jQuery对元素属性的操作

jQuery属性操作

1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性,比如<a>元素里面的href, input元素里的type.

1. 获取属性语法

element.prop("属性名")

2. 设置属性语法

prop("属性","属性值")

$("a").prop("title","111");
$("input").change(function() {
    
    
  console.log($(this).prop("checked"));
})

2 设置或获取元素自定义属性值 attr()

1. 获取属性语法

attr("属性名")//类似原生js的getAttribute()

2. 设置属性语法

attr("属性","属性值") //类似原生的setAttribute()

<body>
  <div index="1" data-index="2">我是div</div>
</body>
<script>
  console.log($("div").attr("index"))// 1
  $("div").attr("index",4)//设置自定义属性的值
  console.log($("div").attr("data-index"))// 2 获得H5新增自定义属性 data-index 的值
</script>

3 数据缓存 data()

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

1. 附加数据语法

data("name","value");向被选元素附加数据

2. 获取数据语法

data("name")向被选元素获取数据

同时,还可以读取HTML5自定义属性 如data-index,得到的是数字型

$("span").data("uname","andy");//data里面的数据是存放在元素内存里面,可以简单理解为变量
console.log($("span").data("uname")); //andy
console.log($("div").data("index"))// 获取自定义属性data-index的值 不用写data-,返回的是数字型

猜你喜欢

转载自blog.csdn.net/qq_46178261/article/details/105691986