Fork me on GitHub 盒子
盒子
文章目录
  1. 介绍
  2. Code
    1. html 部分
    2. css部分
    3. 插件编写
    4. 效果图
  3. 浅析原因

jQuery插件编写学习中遇见的问题--attr&prop

介绍

最近在学习JQuery的插件的编写,有两种方式:

  • .fn.extend 作用于对象原型上
  • .extend 作用于JQuery对象上

我接下来编写的是表格奇偶数不同色,checkbox选择则高亮宣誓,使用$.fn.extend

Code

html 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<table id="table1">
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>所在地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>张三</td>
<td></td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>李四</td>
<td></td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>王二</td>
<td></td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>McChen</td>
<td></td>
<td>北京</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>NVSHEN</td>
<td></td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>

html无非就是一个简单的表格,接下来随意设置样式

css部分

1
.even { background:#FFF38F;} .odd { background: #FFFFEE;} .selected { background: #ff0000;}

简单说一下 even是偶数行样式,odd是奇数行样式,selected是选中的样式即高亮。

插件编写

接下来是重点,遇见的问题也在这。先附上使用attr时的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
;(function ($) {
$.fn.extend({
"tableColor": function (options) {
return this.each(function () {
var aaa = $.extend({
odd : "odd",
even : "even",
selected : "selected"
},options);
$("tbody>tr:odd",this).addClass(aaa.odd);
$("tbody>tr:even",this).addClass(aaa.even);
$("tbody>tr",this).on("click",function () {
var hasSelected = $(this).hasClass(aaa.selected); //判断是否选中
//判断是否选中然后增加或移除class
$(this)[hasSelected?"removeClass":"addClass"](aaa.selected)
.find(":checkbox").attr("checked",!hasSelected);
});
$("tbody>tr:has(:checked)",this).addClass(aaa.selected);
return this;
})
}
})
})(jQuery);
//------------------------以上是插件编写的代码

接下来是插件的使用方法

1
2
3
4
5
//------------------------开始测试插件的应用
$(function () {
$("#table1").tableColor()
.find("th").css("color","red");
})

个人看来jq插件需要具备最基本的两点:

  • 可以自定义参数
  • 返回的是对象可以进行链式操作

效果图

先看使用attr设置checked的效果图如下:

Alt text

我们将attr换成prop之后效果如下:

Alt text

当我们使用attr设置checked属性时,发现只有初次生效,解决的办法是使用prop。

浅析原因

官方对于prop()的解释是获取在匹配的元素集中的第一个元素的属性值,它的返回值不同于attr,为true或false。(attr返回checked或””),因此总结一下适用范围:

  1. 添加属性名称该属性就会生效应该使用prop();
  2. 是有true,false两个属性使用prop();
  3. 其他则使用attr();

但是,官方推荐使用的是attr,这我有点不知甚解。

Alt text


如果能给您带去些许帮助,鄙人不甚欢心。如有错误,恳请交流指出,谢谢!
转载请注明出处:http://mcchen.club/


支持一下
扫一扫,支持McChen