jQuery插件編寫學習中碰見的問題--attr prop

我的博客：

https://chenjiahao.xyz

---

 

最近在學習jQuery的插件的編寫，有兩種方式，$.fn.extend以及$.extend，一種是做用於對象原型上，一種是直接做用於jQuery對象。我接下來編寫的是表格奇偶數不一樣色，checkbox選擇則高亮顯示，使用的$.fn.extend。具體html以下：

<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無非就是一個簡單的表格而已。接下來是我隨意設置的樣式，這個全憑我的喜愛啦~~

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

簡單說一下 even是偶數行樣式，odd是奇數行樣式，selected是選中的樣式即高亮。

接下來是重點，碰見的問題也在這。先附上使用attr時的代碼。

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

 接下來是插件的使用方法。

1 //------------------------開始測試插件的應用
2 $(function () {
3     $("#table1").tableColor()
4         .find("th").css("color","red");
5 })

我的看來jq插件須要具有最基本的兩點，一能夠自定義參數，二返回的是對象能夠進行鏈式操做。

讓咱們一塊兒看看使用attr設置checked的時候的效果圖。

而後咱們將16行中attr換成prop，效果圖以下：

 

當咱們使用attr設置checked屬性時，發現只有初次生效，解決的辦法是使用prop。

至於緣由，我也只能淺析地說一下我我的見解：

官方對於prop()的解釋是獲取在匹配的元素集中的第一個元素的屬性值，它的返回值不一樣於attr，爲true或false。（attr返回checked或""），所以總結一下適用範圍：

1.添加屬性名稱該屬性就會生效應該使用prop();
2.是有true,false兩個屬性使用prop();
3.其餘則使用attr();

 

可是，官方推薦使用的是attr，這我有點不知甚解。

 

--------------------------以上純屬本人拙見，若有錯誤之處，懇請指出！~謝謝------------------------