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> </ script>中的写法是 $ .data( element, key, value )和 $.removeData( element, key, value )。

猜你喜欢

转载自blog.csdn.net/weixin_44621746/article/details/89076124