jQuery_attr_prop及class的使用

prop和attr

prop：对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

attr：对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

通常情况下这两个属性的值是一一对应的，比如说标签属性class和DOM树上节点的属性className，名字虽然不同，但是结果是相等的。

再比如说attr上的id和prop上的id，也是一一对应的，这个通常情况下，可以不区分它们的区别

但是有某些属性还是需要区分的，比如checkbox的check属性。attr上的checked属性他只是设定checkbox的默认值，不会跟着变化；而prop上的checked属性是跟随着变化的。

我们来一起试一下：

我们还是用上节的html文件，增加一个label标签：

运行效果如下：

接着为input加一个checked属性

运行结果默认的就会被选中：

接着我们添加input的change事件：

点选checked属性，也就是复选框时，会出现checked信息：

无论我点多少次，怎么点都是checked

但是我们只有通过prop才能知道这个复选框是否选中，应不应该选中

我们改为prop：

运行结果，我这里点了两次，选中时就为true，不选就为false：

我们再checkedbox中使用一定是要用prop而不是attr

这就是它俩的区别

最后，我们来介绍类的4个方法：

1.addClass  将一个类添加到元素上

2.removeClass  将一个类从元素上删除

3.hasClass  判断类在元素中是否存在

4.toggleClass  切换类

我们新建一个div标签，在style标签中添加两个类属性，.play背景色为绿色，.pause背景色为灰色，当我们点击div让它从灰色变为绿色，再点击就变回来，来回切换

接着我们添加点击事件：

$(this).toggleClass(‘类名称’);

运行结果如下，当我们点击时就会改变颜色：

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web