dom元素属性操作
- 一、dom元素的属性设置、获取、删除----attr
- 1.设置属性---attr()
- (1)设置属性
- (2)设置自定义属性
- 2.删除属性---removeAttr()
- 3.获取属性值
- 二、dom元素的属性设置、获取、删除----prop
- 1.设置属性---prop()
- (1)设置属性
- (2)设置自定义属性
- 2.删除属性---removeProp()
- 3.获取属性值
- 四、removeAttr()和removeProp()的区别
- 五、attr和prop的相互转化使用
参数说明
参数说明name属性名称properties作为属性的“名/值对”对象key属性名称value属性值function(index, attr)返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。
- 以下空格代表或。
方法概述attr(name properties key,value fn)设置或返回被选元素的属性值。removeAttr(name)从每一个匹配的元素中删除一个属性prop(name properties key,value fn)获取在匹配的元素集中的第一个元素的属性值。removeProp(name)用来删除由.prop()方法设置的属性集
<button class="btn">按钮</button> <button class="btn">按钮</button> <button class="btn">按钮</button> <button class="all">全选</button> <button class="fall">反选</button> <button class="check">选择</button> <br/> <input type="checkbox" class="ck"/>篮球 <input type="checkbox" class="ck"/>足球 <input type="checkbox" class="ck"/>羽毛球 <input type="checkbox" class="ck"/>乒乓球
一、dom元素的属性设置、获取、删除----attr
1.设置属性—attr()
(1)设置属性
//方法1 $(".btn").attr('title','标题'); //方法2 $(".btn").attr('title',function(index){ return '我是按钮'+index; })
(2)设置自定义属性
$(".btn").attr('data-title','标题');
2.删除属性—removeAttr()
$(".btn").attr('title','标题'); $(".btn").removeAttr('title');
3.获取属性值
$(".btn").attr('title','标题'); console.log($(".btn").attr('title'));//undefined
- 若是有那个属性，获取的属性值是当前属性的属性值。若是没有或者通过removeAttr()删除属性后，属性值是undefined。
二、dom元素的属性设置、获取、删除----prop
1.设置属性—prop()
(1)设置属性
//方法1 $(".btn").prop('title','标题'); //方法2 $(".btn").prop('title',function(index){ return '标题'+index; })
(2)设置自定义属性
- prop()可以设置自定义属性，但是属性不显示
$('.btn').prop('data-index',0); console.log($('.btn').prop('data-index'));
2.删除属性—removeProp()
- 删除时防止浏览器报错，不删除元素的属性，而是直接把值修改为undefined。
$(".btn").prop('title','标题'); $(".btn").removeProp('title');
3.获取属性值
console.log($(".btn").prop('title'));//undefined
- 若是有那个属性，获取的属性值是当前属性的属性值。若是没有或者通过removeProp()删除属性后，属性值是undefined。
四、removeAttr()和removeProp()的区别
- removeAttr()直接删除属性，而removeProp()不删除属性，而是直接修改值。
$('.btn').prop('title','标题'); $('.btn').attr('name','名字'); $('.btn').removeAttr('name'); $('.btn').removeProp('title');
五、attr和prop的相互转化使用
$('.btn').attr('title','name'); console.log($('.btn').prop('title')); $('.btn').removeProp('title');
- 实现全选和反选
- 方法1：
$('.ck').attr('checked',true); $('.all').click(function(){ $('.ck').prop('checked',true); }); $('.fall').click(function(){ $('.ck').attr('checked',function(){ var isture = $(this).prop('checked'); if(isture){ $(this).prop('checked',false); } else{ $(this).prop('checked',true); } }); });
- 方法2：
$("input:checkbox").attr("checked",true); var change=false; $(".check").click(function(){ if(change){ $("input:checkbox").removeProp("checked"); } else{ $("input:checkbox").prop("checked",'checked'); } change=!change; })
