jQuery的属性与样式
来源:互联网 发布:js dom编程艺术 pdf 编辑:程序博客网 时间:2024/05/16 11:38
1jQuery的属性与样式之.attr()与.removeAttr()
每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。
操作特性的DOM方法主要有3个,getAttribute方法、setAttribute方法和removeAttribute方法,就算如此在实际操作中还是会存在很多问题,这里先不说。而在jQuery中用一个attr()与removeAttr()就可以全部搞定了,包括兼容问题
jQuery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr()
attr()有4个表达式
- attr(传入属性名):获取属性的值
- attr(属性名, 属性值):设置属性的值
- attr(属性名,函数值):设置属性的函数值
- attr(attributes):给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
removeAttr()删除方法
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性(attribute)
优点:
attr、removeAttr都是jQuery为了属性操作封装的,直接在一个 jQuery 对象上调用该方法,很容易对属性进行操作,也不需要去特意的理解浏览器的属性名不同的问题
注意的问题:
dom中有个概念的区分:Attribute和Property翻译出来都是“属性”,《js高级程序设计》书中翻译为“特性”和“属性”。简单理解,Attribute就是dom节点自带的属性
例如:html中常用的id、class、title、align等:
<div id="immooc" title="慕课网"></div>
而Property是这个DOM元素作为对象,其附加的内容,例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等
获取Attribute就需要用attr,获取Property就需要用prop
2jQuery的属性与样式之html()及.text()
3jQuery的属性与样式之.val()
4jQuery的属性与样式之增加样式.addClass()
5jQuery的属性与样式之删除样式.removeClass()
6jQuery的属性与样式之切换样式.toggleClass()
7jQuery的属性与样式之样式操作.css()
8jQuery的属性与样式之.css()与.addClass()设置样式的区别
9jQuery的属性与样式之元素的数据存储
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left, .right { width: 300px; height: 120px; } .left div, .right div { width: 100px; height: 90px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h2>jQuery.data()静态方法</h2> <div class="left"> <div class="aaron"> <p>点击看结果</p> <p>jQuery.data</p> </div> <div><span></span></div> </div> <h2>.data()实例方法</h2> <div class="right"> <div class="aaron"> <p>点击看结果</p> <p>.data</p> </div> <div><span></span></div> </div> <script type="text/javascript"> $('.left').click(function() { var ele = $(this); //通过$.data方式设置数据 $.data(ele, "a", "data test") $.data(ele, "b", { name : "慕课网" }) //通过$.data方式取出数据 var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name ele.find('span').append(reset) }) </script> <script type="text/javascript"> $('.right').click(function() { var ele = $(this); //通过.data方式设置数据 ele.data("a", "data test") ele.data("b", { name: "慕课网" }) //通过.data方式取出数据 var reset = ele.data("a") + "</br>" + ele.data("b").name ele.find('span').append(reset) }) </script></body></html>
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery-样式(jQuery的属性与样式)
- JQuery--属性与样式
- jQuery的属性与样式之.val()
- jQuery的属性与样式之.val()
- jQuery的属性与样式之.val()
- jQuery的属性与样式之增加样式.addClass()
- jQuery的属性与样式之删除样式.removeClass()
- jQuery的属性与样式之切换样式.toggleClass()
- jQuery的属性与样式之样式操作.css()
- jQuery的属性与样式之增加样式.addClass()
- jQuery的属性与样式之删除样式.removeClass()
- jQuery的属性与样式之切换样式.toggleClass()
- 3、jQuery的属性与样式--样式篇
- 服务器--使用WordPress搭建个人博客
- C语言补充学习
- web.js.this详解
- 1017. A除以B (20)
- System Verilog视频学习笔记(9)- Inheritance
- jQuery的属性与样式
- 小白题解 Codeforces 794B Cutting Carrot
- 数塔问题
- ubuntu mongoDB的一些相关基本操作
- 1018. 锤子剪刀布 (20)
- 判断一个整数转换成二进制后1的个数
- [安卓基础]学习第五天
- 1019. 数字黑洞 (20)
- 1020. 月饼 (25)