jQuery属性与样式3

jQuery属性与样式3

一、.attr()方法
1、每个元素都有一个或者多个特性，而这些特性的用途是给出相应元素或者元素内容的附加信息。例如：img元素（img标签）中的src就是元素的特性，它的用途是用来标记图片的地址（图片的链接）。
2、操作特性的DOM方法主要有3个，它们分别是getAttribute方法、setAttribute方法和removeAttribute方法。但是在jQuery中，我们只要用一个.attr()与.removeAttr()就可以把所有有关问题（包括兼容问题）全部搞定了。
3、在jQuery中，.attr()方法是一个用来获取和设置元素属性的方法。attr是attribute（属性）的缩写形式。
4、在jQuery中的DOM操作中我们经常会用到.attr()方法，而.attr()方法有四种表达式（用法），分别是：
（1）.attr()方法是传入属性名,获取属性的值；
（2）.attr(propertyName, value)方法是通过属性名来给指定的元素设置属性值；
（3）.attr(propertyName, 函数值)方法是通过属性名来给指定的元素设置属性的函数值；
（4）.attr( attributes )方法是给指定的元素设置多个属性值。即：{属性名1： “属性值1” ， 属性名2： “属性值2” ，··· ··· }。
二、.removeattr()方法
1、.removeAttr( attributeName )方法是从每一个匹配元素之中删除一个属性（attribute）。2、.removeAttr()方法是第一个匹配元素删除一个属性后，第二个匹配元素也要删除一个属性，这样一直轮流下去，直到所有匹配元素都轮流过才停止。
3、.removeAttr()方法有多少个匹配元素就要删除相对应的多少个属性。
三、.attr()方法和.removeAttr()方法的注意事项
1、.attr()方法和.removeAttr()方法都是jQuery为了属性操作而封装的方法，可直接在一个 jQuery 对象上调用。
2、.attr()方法和.removeAttr()方法很容易对属性进行操作，它不需要我们特意的去理解浏览器的属性名同不同的问题
3、我们要注意的是：在dom的概念中Attribute和Proprety都翻译为“属性”；但Attribute和Proprety在《JS高级程序设计》一书中却被翻译为“特性”和“属性”。
4、对于Attribute和proprety，我们要知道：
（1）Attribute是dom节点（标签）自带的属性。例如：html中常用的id、class、title、align、type和src等；
（2）而Property是一个DOM元素作为对象时的附加内容。例如：tagName, nodeName, nodeType, defaultChecked,和 defaultSelected 等是使用.prop()方法进行取值或赋值的。
（3）.attr()是获取Attribute时需要用到的方法；而.prop()是获取Property时需要用到的方法。
5、例如：
（1）通过.attr()方法获取name属性的值
var MyName=$("#Index").attr(“name”);
（2）通过.attr()方法设置class属性的值为val。
$(“#Index”).attr(“class”,”val”);
（3）通过.removeAttr()方法删除class属性。
$(“#Index”).removeAttr(“class”);
（4）通过.prop()方法获取class属性。
$(“#Index”).prop(“class”)。
四、.data()方法（元素的数据存储）
1、html5 dataset是新的HTML5标准。
2、html5 dataset的特点是：
（1）数量没有限制；
（2）可以使用JavaScript来修改数据；
（3）支持使用CSS选择器进行样式设置。
3、html5 dataset的特点使得data属性特别灵活且强大。这样就使得我们能够更加有序直观的进行数据预设或数据存储。
4、在支持HTML5标准的浏览器中，它允许我们在普通的元素标签里嵌入类似data-*的属性，来实现一些简单数据的存取。
5、而在不支持HTML5标准的浏览器中，jQuery为我们提供了一个.data()的方法，来处理如何实现数据存取的问题。
6、.data()方法是一个jquery内部预用的，可以用来做性能优化的方法，比如在sizzle选择中可以用来缓存部分结果集等。
7、我们常常在.data()方法中存放一些临时数据，因为它是直接跟DOM元素对象绑定在一起的。
8、jQuery提供的元素的数据存储接口有俩个接口，分别是静态接口和实例接口；其中，它们又各自可以存数据和取数据：
（1）jQuery.data( element, key, value )方法是通过静态接口来存数据；
（2）jQuery.data( element, key )方法是通过静态接口来取数据；
（3）.data( key, value )方法是通过实例接口来存数据；
（4）.data( key ) 方法是通过实例接口来取数据。
9、在jQuery的官方文档中，我们一般是使用.data()方法的。
10、jQuery提供的元素数据存储接口的俩个方法在使用上，存数据和取数据都是通过一个接口来传递元素的键值数据的。
11、如果我们把DOM看作一个对象，那么我们在对象上是可以存在基本类型和引用类型的数据的，但这样的话，它可能会存在循环引用的内存泄漏的风险问题。
12、我们可以通过jQuery提供的数据接口，来处理这个循环引用的内存泄漏问题。对此，我们不需要关心它的底层是如何实现的，只需要去按照对应的.data()方法使用就行了。
13、同样的jQuery也提供俩个对应的删除接口，使用上与.data()方法是一致的，只不过一个的作用是增加而另一个的作用是删除罢了。
14、删除接口分别是：
（1）jQuery.removeData( element [, name ] )方法是通过静态接口来删除数据；
（2）.removeData( [name ] )方法是通过实例接口来删除数据。
15、在jQuery提供的元素的数据存储接口中，静态接口方法是用美元符号（ $ ）取代jQuery的。因此，实际上jQuery.data( element, key, value )方法和jQuery.removeData( element [, name ] )方法，在JavaScript的标签< script> 中的写法是 $ .data( element, key, value )和 $.removeData( element, key, value )。