JQuery 学习笔记 element属性控制


Posted in Javascript onJuly 23, 2009
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="js/jquery-1.3.2.js" ></script> 
<script type="text/javascript"><!-- 
    $(function(){ 
             $("#aAttr1").click(function(){ 
                    $(    ":text").attr("value",$("#divTest").attr("id"));                 
                }) 
             $("#aAttr2").click(function(){ 
                    $(    ":text").attr("value",function(){ 
                                                             return $("#divTest").attr("id");         
                                                     });                 
                }) 
             $("#aAttr3").click(function(){ 
                    $(    ":text").attr({value:"test2"}); 
                }) 
             $("#aAttr4").click(function(){ 
                    $("#inputTest2").removeAttr("value");     
                })     }) 
// --></script> 
<title>无标题文档</title> 
</head> 
<body> 
<form> 
<input id="inputTest1" type="text" /> 
<input id="inputTest2" type="text" value="test" /> 
<div id="divTest">123</div> 
<a href="#" id="aAttr1">在text表单中显示DIV的ID方法1</a>| 
<a href="#" id="aAttr2">在text表单中显示DIV的ID方法2</a>| 
<a href="#" id="aAttr3">在text表单中显示test2</a>| 
<a href="#" id="aAttr4">去除inputTest2的value属性</a>| 
<input type="reset" /> 
</form> 
</body> 
</html>

1.element.attr(name)
描述:用于获取某个元素的name属性值,如例子中 $("#divTest").attr("id")就可获取divTest的ID值。
2.element.attr(name,value)
描述:用于设置某个元素的name属性值,如例子中$(":text").attr("value",$("#divTest").attr("id"))就将divTest的ID值赋于text表单的value值。
注:例子中(":text")用于获取input表单type为text的元素,同样其它表单也可用同样的方法获取,如<input type="button"/>即可用$(":button")进行获取,其返回值为Array(Element),也可用$(":input")获取所有的input元素。。在JQuery中要获取和设置元素的text与value值还可以使用element.text()/element.text(value)、element.val()/element.val(Value),用法与element.html()一样,若有疑问可以跟帖,我再做说明

3.element.attr(name,function)
描述:用于设置某个元素的name属性值与上一个类似,只是这里的value可以写成个function,更为灵活。
4.element.remove(name);
描述:用于删除某个元素的name属性。

Javascript 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
JQuery 学习笔记 选择器之六
Jul 23 #Javascript
JQuery 学习笔记 选择器之五
Jul 23 #Javascript
JQuery 学习笔记 选择器之四
Jul 23 #Javascript
JQuery 学习笔记 选择器之三
Jul 23 #Javascript
JQuery 学习笔记 选择器之二
Jul 23 #Javascript
JQuery 学习笔记 选择器之一
Jul 23 #Javascript
javascript IFrame 强制刷新代码
Jul 23 #Javascript
You might like
PHP中的reflection反射机制测试例子
2014/08/05 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
php格式文件打开的四种方法
2018/02/24 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
python中字典(Dictionary)用法实例详解
2015/05/30 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
C#基础面试题
2016/10/17 面试题
《凡卡》教学反思
2014/04/09 职场文书
婚前保证书
2014/04/29 职场文书
三八节标语
2014/06/27 职场文书
超市店庆活动方案
2014/08/31 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
品质保证书格式
2015/02/28 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python