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处理DOM元素事件实现代码
May 23 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
javascript中var的重要性分析
Feb 11 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 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 Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
PHP云打印类完整示例
2016/10/15 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
js中new一个对象的过程
2017/02/20 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
python 多个参数不为空校验方法
2019/02/14 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
python如何停止递归
2020/09/09 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
关于教师节的演讲稿
2014/09/04 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python