jQuery中attr()和prop()的使用和区别

一、attr()使用

$(selector).attr():获取匹配元素集合中第一个元素的属性值或者设置该匹配元素的属性值

3种使用方法如下：

方法1：设置单个：$(selector).attr(attribute, value)

$(e).attr('key1','value1');
console.log($(e).attr('key1'));

方法2：设置多个：$(selector).attr({attribute:value, attribute:value ...})

$(e).attr({'key1':'value1','key2':'value2','key3':'value3'});
console.log($(e).attr('key2'));

方法3：通过函数设置单个，value为旧值，该函数可接收并使用选择器的index值和当前属性值: $(selector).attr(attribute, function(index,oldvalue))

$(e).attr('key2', function(index, value){
            return value + '222';
        });
console.log($(e).attr('key2'));

二、prop()使用

prop()的使用和arri()用法一样，同上。不同的是attr()传入的是attributeName，prop()传入的是propertyName，即参数名不同。

三、二者区别

prop可以用来获取元素的JS属性，如scrollHeight，offsetHeight等；attr可以用来获取或者生成“直接写在Html标签里的属性”。

实际使用中：我们要操作的是标签元素固有的一些属性时，推荐使用prop，固有属性指的是标签本身就有的一些属性；而操作一些自定义的属性时，推荐用attr。

scrollHeight是js里用来获取元素的完整高度，它是js属性，并不是jQuery属性，如果要在jQuery中使用这个属性的话，需要把jQuery对象转化成js对象，这样才能使用js的属性；而另一种方法是使用jQuery里的prop函数，直接用$(selector).prop('scrollHeight')来获取，但如果换成attr就获取不到了