jQuery dom元素属性操作

一、属性操作

方法	作用
attr（name value/fn）	获取（一个属性）/设置（两个）元素属性名
removeAttr（name）	删除属性
prop（）	添加属性
removeProp（）	删除属性

1. attr（name value/fn）

1.设置属性

<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>

（1）value

$(".btn").attr('title','我是按钮');

悬停按钮时，出现 我是按钮
（2）fn

$(".btn").attr('title',function(index){
        console.log(index);
        return "我是按钮"+index;
    })

2.设置自定义属性

$(".btn").attr('data-title','标题');

3.获取属性值

	console.log($('.btn').attr('title'));

2. removeAttr（name）

	//removeAttr  删除属性
    $(".btn").removeAttr('data-title');

	//获取属性值
    //通过removeAttr  删除属性  属性值是  undefined（防止出错）
    //把元素上的属性删除了
    console.log($('.btn').attr('data-title'));

3. prop（）

1.设置元素 与attr()相同

	//获取或者设置元素的属性值
    //prop name  /value/fn
    $('.btn').prop('title','我是标题');
    $('.btn').prop('title',function (index){
     return '标题'+index;
     });

2.设置自定义元素

区别一

prop可设置自定义属性 但不显示

	$('.btn').prop('data-index',0);

但可获取属性值：

	console.log($('.btn').prop('data-index'));

3. removeProp（）

区别二

删除的时候 防止浏览器报错
不删除属性 而是直接把值修改undefined

	$('.btn').removeProp('title');

console.log($('.btn').prop('title'));

区别三

<input type="checkbox" class="ck"/>篮球
<input type="checkbox" class="ck"/>足球
<input type="checkbox" class="ck"/>羽毛球
<input type="checkbox" class="ck"/>乒乓球