第十三章：第9节jQuery对象方法——属性方法（一）attr、addClass

使用选择器匹配到HTML元素，我们使用jQuery对象的方法可对HTML元素的属性做增删查改。

1）看下面这组方法：

原生的js使用节点对象可以使用下面的属性和方法对HTML元素的属性做改动：

itnode.属性名称

itnode.属性名称= 值;

itnode.getAttribute(属性名称);

itnode.setAttribute(属性名称，值);

itnode.removeAttribute(属性名称)

而jQuery使用attr方法和removeAttr方法对HTML元素的属性做改动：

$().attr(属性名称);    //获得属性信息值

$().attr(属性名称，值);   //设置属性的信息

$().removeAttr(属性名称);  //删除属性

$().attr(json对象);    //同时为多个属性设置信息值，json对象的键值对就是名称和值

$().attr(属性名称，fn);  //通过fn函数执行的return返回值对属性进行赋值

相比原生JS的方法，jQuery在方法名上又做了简化。

attr是jQuery很重要的一个方法，用的很多，也非常简单，就不多说了。本节学习代码中有实例代码供大家测试。

有个地方需要说下：

复选框选没选中取决于“checked”属性，在一些低版本的jQuery中，可使用attr()方法操作“checked”属性。比如：

$().attr(‘checked’,true);  //设置复选框选中

$().attr(‘checked’,false);  //取消复选框选中

$().attr(‘checked’);   //判断复选框选中情况，返回布尔值

在jQuery1.6版本之后，取复选框有没有被选中，要用prop方法。

$().prop(‘checked’,true);  //设置复选框选中

$().prop(‘checked’,false);  //取消复选框选中

$().prop(‘checked’);   //判断复选框选中情况，返回布尔值

2）看这组方法：

这是操作HTML元素class属性值的一组方法。

jQuery的attr方法可以操作HTML元素的class属性，那jQuery为什么又单独针对class属性写了这几个方法？

回顾CSS的知识，HTML的class属性填写的是CSS的类选择器，一个class属性可以填写多个类选择器名称。比如：

<div class="c1 c2 c3"></div>

如果把“c2”类选择器名称从class属性中去掉，使用jQuery对象的attr方法来实现会很费劲，需要额外做处理。为了让JS代码写起来更方便，jQuery专门写了针对class属性操作的三个方法。

$().attr(‘class’,值);

$().attr(‘class’);

$().removeAttr(‘class’);  //删除class的属性

$().addClass(值);    //给class属性追加CSS类选择器

$().removeClass(值); //删除class属性中的某个CSS类选择器

$().toggleClass(值); //开关效果，有就删除，没有就添加

这三个方法也是很实用的！

因为页面的很多特效主要靠JS修改CSS标签实现。如果一个效果的实现需要很多CSS标签，通常开发者不会用JS一个一个地去修改CSS标签，而是会把每种效果的CSS标签写到一个class类选择器里，再用JS去修改HTML元素的class属性值来实现效果。

本节学习代码中有实例代码供大家测试。

本节学习代码》》》