jQuery 属性操作

jQuery 常用属性操作有三种： prop() / attr() / data() ;

1 元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如

元素里面的 type 。

语法

1.1.获取属性语法

  prop（“属性”）

1.2.设置属性语法

  prop（“属性”，“属性值”）

注意： prop() 除了普通属性操作，更适合操作表单属性： disabled / checked / selected 等。

2 元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1” 。

语法

2.1.获取属性语法

  attr（“属性”）  //类似原生getAttribute（）

2.2.设置属性语法

  attr（“属性”，“属性值”）  //类似原生setAttribute（）

该方法也可以获取H5自定义属性

注意： attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

3 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

语法

3.1附加数据语法

data（“name”，“value”）//向被选元素附加数据

3.2获取数据语法

data（“name”）//向被选元素获取数据

注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

演示代码

< body >

< a href = "http://www.itcast.cn" title = " 都挺好 " > 都挺好 < /a>

< input type = "checkbox" name = "" id = "" checked >

< div index = "1" data - index = "2" > 我是 div < /div>

< span > 123 < /span>

< script >

$ ( function () {

//1. element.prop(" 属性名 ") 获取元素固有的属性值

console . log ( $ ( "a" ). prop ( "href" ));

$ ( "a" ). prop ( "title" , " 我们都挺好 " );

$ ( "input" ). change ( function () {

console . log ( $ ( this ). prop ( "checked" ));

});

// console.log($("div").prop("index"));

// 2. 元素的自定义属性 我们通过 attr()

console . log ( $ ( "div" ). attr ( "index" ));

$ ( "div" ). attr ( "index" , 4 );

console . log ( $ ( "div" ). attr ( "data-index" ));

// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面

$ ( "span" ). data ( "uname" , "andy" );

console . log ( $ ( "span" ). data ( "uname" ));

// 这个方法获取 data-index h5 自定义属性 第一个 不用写 data- 而且返回的是数字型

console . log ( $ ( "div" ). data ( "index" ));

})

< /script>

< /body>