2014年2月10日 星期一

[轉貼] 跟小靜讀《jQuery權威指南》

出處:http://www.cnblogs.com/janes/p/3541708.html

前言
2014年開始了,年底給自己制訂的學習計劃,第一步先從學習《jQuery權威指南》開始。
jQuery大家都很比較熟悉,但是我經常是邊用的時候邊對照著API,這次找本書通讀一遍,記錄下了一些收獲。
趁著歲末年初稍微得閒,快馬加鞭地將筆記進行整理,以作為日後的查閱資料,在此分享給大家。
新的一年,從腳踏實地開始,祝大家進步多多~
目錄

****************************************************************
今天是小年了,2013馬上要過去了,但是學習不能間斷啊。最近正在看《jQuery權威指南》,先溫習一下選擇器和DOM操作。

一、基本選擇器

1.table單雙行:
$(function () {
            $( "#tbStu tr:nth-child(even)" ).addClass("trOdd");
        })
2.jQuery完善的檢測機制:
     傳統js處理對象時要首先判斷是否存在;jQuery具有較完善的檢測機制不需要判斷,即使該元素不存在,也不會出現錯誤提示。
3.選擇器
①基本選擇器:
Image(1)
②層次選擇器
Image(2)
注意:
  • $(「ancestor descendant」)是祖先與後代關系,而$(「parent child」)是父級與子級關系;
  • $(「prev+next」)可以使用.next()代替,表示prev後面緊鄰的兄弟元素;而$(「prev~siblings」)等同於.nextAll(),表示prev後面所有兄弟元素;siblings()方法表示獲取全部的兄弟元素。
③過濾選擇器:
Image(5)
Image(6)
Image(7)
Image(8)
Image(9)
Image(10)
Image(11)

二.DOM操作

1.訪問元素
①元素屬性操作-- attr()
  • 獲取元素屬性:attr(name)
  • 設置元素屬性:
attr(key,value);
attr({key1:value1, key2:value2})
attr(key,function(){}):函數返回值作為屬性值。
  • 刪除元素屬性:removeAttr(name)
②元素內容操作-- html(),text()
Image(12)
③獲取或設置元素值-- val()
設置元素值:val(value)
獲取元素值:val()
獲取select多個選項值:$("select").val().join( ",")
設置多個選中:val(array)。
④元素樣式操作
css(name,value):設置樣式
addClass("class0 class1"):添加樣式
toggleClass(name):切換樣式
removeClass(name):刪除樣式,如果有參數則刪除指定類,否則刪除所有class。
2.DOM-創建節點
$(html):用於動態創建節點。要注意是否閉合。
3.DOM-插入節點
①內部插入節點
Image(13)
②外部插入節點
Image(14)
4.DOM-復制節點
clone():復制元素,不復制行為。
clone(true):復制元素,同時復制行為。
5.替換節點
replaceWith(content)
replaceAll(selector)
替換完成後元素的事件全部消失。
6.包裹節點
Image(15)
7.刪除元素
remove([expr]):選擇元素節點後刪除該節點及其後代元素。
empty():清空元素及其後代元素。
****************************************************************

1.  事件冒泡

Image(16)
    阻止事件冒泡的兩種方式:
  • event.stopPropagation();
  • return false ;

2. 綁定事件——bind(type,[data],function)

   type為一個或多個事件類型的字符串,data是作為event.data屬性值傳遞給事件對象的額外對象。
  • 一個元素綁定多個事件,可用空格隔開。
  $("#btn").bind( "click mouseover", function () {  ...);
  • 通過映射方式為同一元素綁定多個事件。
1
2
3
4
5
6
7
8
9
10
11
12
$(function () {
     $( ".txt").bind({
     "focus": function () {
             $( "#divTip").html("請輸入" ).show();
         },
     "blur":function () {
             $( "#divTip")
                 .show()
                 .html( "合法");
         }
     });
 });

  • 第二個參數data的使用。
    var info = { name: 'Cathy', date: '2014-1-24' };
    $(function () {
        $("#test").bind("click", info, function (event) {
            $("#divTip").show().html(event.data.name + "," + event.data.date);
        });
    });

3.事件切換

  • hover:鼠標懸停與鼠標移除事件切換。
复制代码
    $(function () {
        $(".clsTitle").hover(
        function () {
            $(".clsContent").show();
        },
        function () {
            $(".clsContent").hide();
        });
    });
复制代码
  • toggle:依次順序調用N個函數,最後一個調用完成後再從第一個輪流執行。
复制代码
    $(function () {
        $("#divTest").toggle(
            function () {
                alert(1);
            },
            function () {
                alert(2);
            },
            function () {
                alert(3);
            }
        );
    });
复制代码

4.移除事件——unbind(type,func)

   參數說明:type為要移除的事件類型,func為要移除的事件處理函數。如果func為空,則移除元素所有的事件。
复制代码
 function func() {
        $("#divTip").append("點擊按鈕2");
    }
    $(function () {
        $("#Button1").click(function () {
            $("#divTip").append("點擊按鈕1");
        });
        $("#Button2").click(func);
        $("#Button3").click(function () {
            $("input").unbind("click", func);
        });
    });
复制代码

5.其他事件

one(type,[data],func)——為元素綁定只執行一次的事件。
trigger(type,[data])——在所選擇的元素上觸發指定類型的事件。
复制代码
$(function () {
var i = 1;
function btn_Click() {
this.value = i++;
            }
            $( "input").one("click" , btn_Click);
            $( "input").bind("click" , btn_Click);
            $( "input").trigger("click" );
        })
复制代码

6.實例應用

①選項卡效果
 html Body
复制代码
<script type="text/javascript">
        $( function () {
            $( "#menu li").each(function (index) {
                $( this).click(function () {
                    $( this).addClass("tabFocus" ).siblings().removeClass("tabFocus");
                    $( "#content li:eq(" + index + ")" ).show().siblings().hide();
                });
            });
        });
</script>
复制代码
②屏幕中間彈窗遮罩
 html
复制代码
        <script type="text/javascript">
            $(function () {
                $("#Button1").click(function () { //注冊刪除按鈕點擊事件
                    $(".mask").show(); //顯示背景色
                    showDialog(); //設置提示對話框的Top與Left
                    $(".dialog").show(); //顯示提示對話框
                })
                /*
                *根據當前頁面與滾動條位置,設置提示對話框的Top與Left
                */
                function showDialog() {
                    var objW = $(window); //當前窗口
                    var objC = $(".dialog"); //對話框
                    var brsW = objW.width();
                    var brsH = objW.height();
                    var sclL = objW.scrollLeft();
                    var sclT = objW.scrollTop();
                    var curW = objC.width();
                    var curH = objC.height();
                    //計算對話框居中時的左邊距
                    var left = sclL + (brsW - curW) / 2;
                    //計算對話框居中時的上邊距
                    var top = sclT + (brsH - curH) / 2;
                    //設置對話框在頁面中的位置
                    objC.css({ "left": left, "top": top });
                }

                $(window).resize(function () {//頁面窗口大小改變事件
                    if (!$(".dialog").is(":visible")) {
                        return;
                    }
                    showDialog(); //設置提示對話框的Top與Left
                });

                $(".title img").click(function () { //注冊關閉圖片點擊事件
                    $(".dialog").hide();
                    $(".mask").hide();
                })

                $("#Button3").click(function () {//注冊取消按鈕點擊事件
                    $(".dialog").hide();
                    $(".mask").hide();
                })

                $("#Button2").click(function () {//注冊確定按鈕點擊事件
                    $(".dialog").hide();
                    $(".mask").hide();
                    if ($("input:checked").length != 0) {//如果選擇了刪除行
                        $(".divShow").remove(); //刪除某行數據
                    }
                })
            })
        </script>
复制代码

****************************************************************

一、 顯示與隱藏——hide(),show()

1. 方法:
  • hide(speed,[callback]);
  • show(speed,[callback]);
     說明:這兩個方法還可以實現帶動畫效果的顯示隱藏。speed可以是「slow"(600毫秒)、"normal"(400毫秒)、"fast"(200毫秒),可以直接是毫秒數。
      callback是動畫執行完的回調函數。
2.實例:
 html
复制代码
<script type="text/javascript">
        $(function () {
            var $link = $(".artList a");
            var $hide = $(".artList :eq(2)");
            $link.click(function () {
                if ($(this).html() == "顯示") {
                    $(this).html("隱藏");
                    $hide.show(1000,function(){alert("顯示")});
                } else {
                    $(this).html("顯示");
                    $hide.hide(800, function () { alert("隱藏")});
                }
            })
        });
    </script>
复制代码

二、切換顯示隱藏——toggle()

1. 方法
  • toggle():無參數,直接切換顯示隱藏狀態;
  • toggle(switch):switch是布爾值,true顯示元素,false隱藏元素。
  • toggle(speed,[callback]):speed為切換速度;callback為動畫效果執行之後的回調函數。
說明:當以動畫效果展示時,元素的width,height,padding,margin都以動畫形式展示。
2. 實例:
 html
复制代码
<script type="text/javascript">
        var isShow = false;
        var title = $(".divTitle");
        var content = $(".divContent");

        $(function () {
            title.click(function () {
                if (isShow) {
                    $("img").slideUp("normal", function () {
                        $("#divTip").html("關閉成功");
                        isShow = false;
                    });
                } else {
                    $("img").slideDown("normal");
                    $("#divTip").html("");
                    isShow = true;
                }
            });
        });
    </script>
复制代码

三、滑動效果——slide

  • slideUp(speed,[callback]):向上滑動,減小元素高度至0
  • slideDow(speed,[callback]):向下滑動,增大元素高度。
  • slideToggle(speed,[callback]):以動畫效果切換元素高度。

四、淡入淡出——fade

1. 淡入淡出方法
  • fadeIn(speed,[callback]):淡入,透明度由0.0到1.0;
  • fadeOut(speed,[callback]):淡出,透明度由1.0到0.0;
實例:
 html
复制代码
<script type="text/javascript">
        $(function () {
            $img = $("img"); //圖片元素對象
            $tip = $(".divTip"); //提示元素對象
            $("#Button1").click(function () { //第一個按鈕單擊事件
                $tip.html(""); //清空提示內容
                //在2000毫秒中淡入圖片,並執行一個回調函數
                $img.fadeIn(2000, function () {
                    $tip.html("淡入成功!");
                })
            })
            $("#Button2").click(function () { //第二個按鈕單擊事件
                $tip.html(""); //清空提示內容
                //在2000毫秒中淡出圖片,並執行一個回調函數
                $img.fadeOut(2000, function () {
                    $tip.html("淡出成功!");
                })
            })
        })
    </script>
复制代码
2. fadeTo(speed,opacity,[callback]):以動畫效果將透明度設置為一個指定值,還可以設置回調函數。
實例:
 html
复制代码
<script type="text/javascript">
        $(function () {
            var opacity = 0.0;
            $("#btn").click(function () {
                if (opacity >= 1.0) {
                    opacity = 0.0;
                } else {
                    opacity += opacity + 0.2;
                }
                $("img").fadeTo("normal", opacity);
            });
        });
    </script>
复制代码

五、自定義動畫——animate

1.方法 :
animate(params,[duration],[easing],[callback])
說明:param表示要調整的屬性鍵值對,duration表示速度,easing表示動畫插件,callback表示動畫效果完成後的回調效果。
注意:
params的屬性名要使用駱駝寫法,例如font-size要寫成fontSize。
如果想以動畫形式移動元素位置,則position必須設置為relative或者absolute。
隊列動畫:在元素中執行一個或者多個animate方法。
****************************************************************

一、獲取異步數據

jQuery可以從服務器異步獲得靜態數據。
①load()
$.load(url,data,callback)
  • url要加載的頁面地址,
  • data發送到服務器的數據key/value格式,
  • callback表示加載成功後返回到加載頁面的回調函數。
其中url中還可以過濾頁面元素。
复制代码
<script type="text/javascript">
        $( function () {
            $( "#Button1").click(function () { //按鈕點擊事件
                $( "#divTip").load("a.html .aa" ); //load()方法加載數據
            });
        })
</script>
复制代码
a.html代碼為:
<div class="clsShow">test</div>
<div class="clsShow aa">test1</div>
image
②getJSON()
方法:$.getJSON(url,data,callback):獲取.json格式的數據並進行處理。
參數:url要加載的頁面地址,data發送數據,callback回調函數。
news.js
复制代码
[
  {
    "title": "新天龍八部要停播",
    "date":"2014-1-26"
  },
  {
    "title": "我是歌手你喜歡誰",
    "date":"2014-1-24"
  }
]
复制代码
html:
复制代码
<div class="divFrame">
      <div class="divTitle">
           <input id="Button1" type="button" 
                  class="btn" value="獲取數據" />
      </div>
      <div class="divContent">
           <div id="divTip"></div>
      </div>
 </div>
复制代码
复制代码
<script type="text/javascript">
    $(function () {
        $("#Button1").click(function () {
            $.getJSON("news.js", function (data) {
                var html = "";
                $.each(data, function (index, item) {
                    html += (index + 1);
                    html += "標題:" + item.title + "<br/>";
                    html += "日期:" + item.date + "<br/>";
                });
                $("#divTip").html(html);
            });
        });
    });
</script>
复制代码
③getScript()
$.getScript(url,callback):獲取js文件並自動執行注入的腳本。
參數:url為要加載的js文件地址,callback為回調函數。
實例:
news1.js:
复制代码
var data = [
  {
      "title": "新天龍八部要停播",
      "date": "2014-1-26"
  },
  {
      "title": "我是歌手你喜歡誰",
      "date": "2014-1-24"
  }
];
$.each(data,function () {
    var html = "";
    $.each(data, function (index, item) {
        html += (index + 1);
        html += "標題:" + item.title + "<br/>";
        html += "日期:" + item.date + "<br/>";
    });
    $("#divTip").html(html);
});
复制代码
調用:
$(function () {
    $("#Button1").click(function () {
        $.getScript("news1.js");
        });
});

二、請求服務器數據——$.get,$.post

①方法
  • $.get(url,[data],[callback],[type])
  • $.post(url,[data],[callback],[type])
參數說明:url是要請求的數據地址;data是表示發送到服務器的地址是key/value格式;callback表示請求成功後執行的回調函數;type是返回數據的格式,如html、json、xml等。
注意:data中如果包含中文格式,要使用encodeURI()方法進行轉碼;在客戶端接收數據時要使用decodeURI()方法進行解碼。
②差別:
$.get和$.post方法差別不大,主要差別在以下兩點:
  • $.get不適合傳遞數據量較大的數據,$.post無此限制。
  • $.get請求的結果會緩存到瀏覽器中,而$.post結果不會瀏覽器緩存。
③實例:
复制代码
<script type="text/javascript">
        $(function() {
            $("#Button1").click(function() { //按鈕單擊事件
                //打開文件,並通過回調函數返回服務器響應後的數據
                $.get("UserInfo.aspx",
                { name: encodeURI($("#txtName").val()) },
                function(data) {
                    $("#divTip")
                    .empty() //先清空標記中的內容
                    .html(data); //顯示服務器返回的數據
                })
            })
        })
    </script>
复制代码

三、$.ajax

①方法
$.ajax([options])是比較底層的異步調用方法。參數options是key/value格式的,既包含發送請求的設置,也包含相應後的回調數據。
需要注意的是跨域調用時要使用Jsonp方式。
image
image
②ajax中的全局事件
image
實例:
复制代码
<script type="text/javascript">
        $(function() {
            //元素綁定全局ajaxStart事件
            $("#divMsg").ajaxStart(function() {
                $(this).show(); //顯示元素
            })
            //元素綁定全局ajaxStop事件
            $("#divMsg").ajaxStop(function () {
                $(this).html("已成功獲取數據。").hide();
            })
            //按鈕的單擊事件
            $("#Button1").click(function() {
                $.ajax({ //帶參數請求服務器
                    type: "GET",
                    url: "GetData.aspx",
                    //獲取加碼後的數據並作為參數傳給服務器
                    data: { txtData: encodeURI($("#txtData").val()) },
                    dataType: "html",
                    success: function(data) { //顯示解碼後的返回數據
                        $("#divTip").html(decodeURI(data));
                    }
                })
            })
        })
         </script>
****************************************************************

一、說明

jQuery插件官網:http://plugins.jquery.com/
使用插件時引用順序:插件引用要位於主jquery庫之後。

二、插件應用實例

演示插件jquery.validate.js的使用方法:
①引用jQuery主庫和validate插件。
注意:
  • jQuery主庫要先於插件引用;
  • 如果想顯示中文錯誤提示,還需要引用jquery.validate.messages_cn.js。
复制代码
<script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    </script>
    <script type="text/javascript" 
            src="Js-7-1/jquery.validate.js">
    </script>
    <script type="text/javascript" 
            src="Js-7-1/jquery.validate.messages_cn.js">
    </script>
复制代码
复制代码
<form id="frmV" method="get" action="#">
     <div class="divFrame">
         <div class="divTitle">
              請輸入下列資料
         </div>
         <div class="divContent">
              <div>
              標題:<br />
                  <input id="title" name="title"
                         type="text" class="txt" />
              <font color="red">*</font><br />
              <span></span>
              </div>
              <div>
         </div>
      </div>
         <div class="divBtn">
              <input id="sbtUser" type="submit" 
                     value="提交" class="btn" />
         </div>
     </div>
     </form>
复制代码
②設置驗證規則,注意name要與控件對應。
复制代码
<script type="text/javascript">
        $(function() {
            $("#frmV").validate(
              {
                  /*自定義驗證規則*/
                  rules: {
                      title: { required: true, minlength: 5,maxlength:18 }
                  },
                  /*錯誤提示位置*/
                  errorPlacement: function(error, element) {
                      error.appendTo(element.siblings("span"));
                  }
              }
            );
        })
    </script>
复制代码

三、自定義插件

1.插件分類:
  • 封裝方法插件:對象插件
  • 封閉函數插件:類插件
2.插件開發注意事項
①插件命名格式: jquery.[插件名].js;
②所有插件都應該以分號;開頭,避免壓縮插件之後出現錯誤;為了保證JQuery的鏈式寫法正確性,插件本身必須返回一個jQuery對象;
③在插件內部,this表示選擇器選中的對象,和平時的this含義不太相同;
④為了避免沖突,在編寫插件時盡量使用jQuery而不是$符號;
⑤對象級別插件所有方法都依附於jquery.fn主體對象;類級別插件所有方法都依附於jquery對象。
⑥編寫對象級別插件是用jQuery.fn.extend()方法進行擴展,編寫類級別插件時是用jQuery.extend()方法進行擴展。
2.對象插件示例:
插件功能比較簡單,當鼠標經過菜單項時自動切換背景顏色。
首先定義插件jquery.color.js
复制代码
; (function($) {
    $.fn.extend({
          "focusColor":function (color) {
              var def_col = "#ccc";
              var list_bg = "#fff";
              color = (color == undefined )? def_col : color;
              $(this).find("li").each(function() {
                  $(this).mouseover(function() {
                      $(this).css("background-color", color);
                  }).mouseout(function() {
                      $(this).css("background-color", list_bg);
                  });
              });
              return $(this);
          }
    });
})(jQuery);
复制代码
調用:
<script type="text/javascript">
        $(function() {
            $("#u1").focusColor("green");//調用自定義的插件
        })
    </script>
3.類插件示例:
定義類級別插件jquery.calc.js。
复制代码
;$(function () {
    $.extend({
        "addNum": function (a, b) {
            a = a || 0;
            b = b || 0;
            return parseInt(a) + parseInt(b);
        }
    });
})(jQuery);
复制代码
調用:
复制代码
<script type="text/javascript">
        $(function() {
            $("#Button1").click(function() {
                $("#Text3").val(
                $.addNum($("#Text1").val(),
                         $("#Text2").val()));
            }); 
        })
    </script>
****************************************************************

一、數組和對象操作

1. $.each——遍歷
$.each(obj,function(param1,param2))
遍歷數組時:param1為元素序號,param2為元素內容;
遍歷對象時:param1為元素屬性名,param2為元素屬性值。
例如:
①遍歷數組:
 
复制代码
$(function () {
            var arrStu = { "張三:": "60", "李四:": "70", "王二:": "80" }
            var strContent = "<li class='title'>姓名:分數</li>";
            $.each(arrStu, function (Name, Value) {
                strContent += "<li>" + Name + Value + "</li>";
            })
            $("ul").append(strContent);
        })
复制代码
②遍歷對象:
  
复制代码
<script type="text/javascript">
        $(function() {
            var strContent = "<li class='title'>屬性:值</li>";
            $.each($.get, function(Property, Value) {
                strContent += "<li>" + Property + ":" + Value + "</li>";
            })
            $("ul").append(strContent);
        })
    </script >
复制代码
2.$.grep——篩選數組
$.grep(array,function(element,index)):array為要篩選的數組,element為數組中的元素,index為元素在數組中的序號(0起)。
复制代码
<script type="text/javascript">
        $(function() {
            var strTmp = "篩選前數據:";
            var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
            var arrGet = $.grep(arrNum, function(ele, index) {
                return ele > 5 && index < 8 //元素值大於5且序號小於8
            })
            strTmp += arrNum.join();
            strTmp += "<br/><br>篩選後數據:";
            strTmp += arrGet.join();
            $("#divTip").append(strTmp);
        },true)
    </script >
复制代码
   執行結果:
篩選前數據:2,8,3,7,4,9,3,10,9,7,21
篩選後數據:8,7,9,10
3.$.map——數據變更
$.map(array,function(element,index)):array為要篩選的數組,element為數組中的元素,index為元素在數組中的序號
复制代码
<script type="text/javascript">
        $(function() {
            var strTmp = "變更前數據:";
            var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
            var arrGet = $.map(arrNum, function(ele, index) {
                if (ele > 5 && index < 8) { //元素值大於5且序號小於8
                    return ele + 1; //元素增加1
                }
            })
            strTmp += arrNum.join();
            strTmp += "<br/><br>變更後數據:"
            strTmp += arrGet.join();
            $("#divTip").append(strTmp);
        })
    </script>
复制代码
執行結果:
變更前數據:2,8,3,7,4,9,3,10,9,7,21
變更後數據:9,8,10,11
4.$.inArray()——查找數組元素
$.inArray(value,array):查找元素在數組中的元素,如果不存在則返回-1。
复制代码
$(function() {
            var strTmp = "待搜索數據:";
            var arrNum = [4, 21, 2, 12, 5];
            var arrPos = $.inArray(12, arrNum);
            strTmp += arrNum.join();
            strTmp += "<br/><br>12搜索結果:"
            strTmp += arrPos;
            $("#divTip").append(strTmp);
        })
复制代码
執行結果:
待搜索數據:4,21,2,12,5
12搜索結果:3

二、瀏覽器檢測

$.browser對象,可以處理瀏覽器相關檢測。
注意:該對象在jquery1.4.2添加,但是1.9中已經刪除。
image
$.support.boxModel檢測頁面是否為標准盒子模型。經測試該對象在1.10中測試也已經去掉。

三、字符串操作

   $.trim():去掉字符串左右兩側的空格。這是jquery核心庫中唯一針對字符串處理的函數。

四、測試函數

image
1.$.isEmptyObject(obj):檢測參數是否為空對象。
复制代码
<script type="text/javascript">
        $( function() {
            var obj0 = {};
            var obj1 = { "name" : "taoguorong" };
            var obj2 = [];
            var obj3 = [1];
            var obj4;
            var strTmp = "obj0是否為空:" + $.isEmptyObject(obj0);           //true
            strTmp += "<br><br>obj1是否為空:" + $.isEmptyObject(obj1);//false
            strTmp += "<br><br>obj2是否為空:" + $.isEmptyObject(obj2);//true
            strTmp += "<br><br>obj3是否為空:" + $.isEmptyObject(obj3);//false
            strTmp += "<br><br>obj4是否為空:" + $.isEmptyObject(obj4);//true
            $( "#divTip").append(strTmp);
        })
    </script >
复制代码
2.$.isPlainObject(obj):檢測參數是否為原始對象,即通過{}或者new Object()創建。
复制代码
<script type="text/javascript">
        $( function() {
            var obj0 = {};
            var obj1 = new Object();
            var obj2 = "null" ;
            var obj3 = { "a" : 1 };
            var obj4 = new Object(1);
            var obj5 = 1;
            var strTmp = "obj0是否為原始對象:" + $.isPlainObject(obj0);           //true
            strTmp += "<br><br>obj1是否為原始對象:" + $.isPlainObject(obj1);//true
            strTmp += "<br><br>obj2是否為原始對象:" + $.isPlainObject(obj2);//false
            strTmp += "<br><br>obj3是否為原始對象:" + $.isPlainObject(obj2);//false
            strTmp += "<br><br>obj4是否為原始對象:" + $.isPlainObject(obj2);//false
            strTmp += "<br><br>obj5是否為原始對象:" + $.isPlainObject(obj2);//false
            $( "#divTip").append(strTmp);
        })
    </script >
复制代码
說明:當new Object()方法帶參數時,不是原始對象。
3.$.contain(container,contained):兩個參數均為dom對象,如果container對象包含contained對象則返回true,否則返回false。

五、URL操作

$.param(obj):其中obj為數組或者jquery對象,該方法將其序列化為鍵值對。
复制代码
<script type="text/javascript">
        $( function() {
            var arrInfo = { id: 101, name: "tao" , sex: 0 }; //基本信息數組
            //分數和匯總信息數組
            var arrScore = { Score: { chinese: 90, maths: 100, english: 98 },
                SunNum: { Score: 288, Num: 3 }
            };
            //序列化各數組
            var arrNewInfo = $.param(arrInfo);
            var arrNewScore = $.param(arrScore);
            var arrDecScore = decodeURIComponent($.param(arrScore));
            //顯示序列化後的數組
            var strTmp = "<b>arrInfo數組序列化後</b>:" ;
            strTmp += arrNewInfo; //結果:id=101&name=tao&sex=0
            strTmp += "<br><br><b>arrScore數組序列化後</b>:" ;
            strTmp += arrNewScore;//結果:Score%5Bchinese%5D=90&Score%5Bmaths%5D=100&Score%5Benglish%5D=98&SunNum%5BScore%5D=288&SunNum%5BNum%5D=3
            strTmp += "<br><br><b>arrScore序列化解碼後</b>:" ;
            strTmp += arrDecScore;//結果:Score[chinese]=90&Score[maths]=100&Score[english]=98&SunNum[Score]=288&SunNum[Num]=3
            //顯示在頁面中
            $( "#divTip").append(strTmp);
        })
    </script >
复制代码

六、$.extend——擴展工具函數

擴展
复制代码
; (function ($) {
            $.extend({
                "test": function (p1, p2) {
                    return p1 && p2;
                }
            })
        })(jQuery);
复制代码

調用
$.test(true, true);

七、$.proxy——改變事件函數的作用域

兩種格式:
$.proxy(function,scope):function為指定的事件方法,scope為事件函數設置作用域的對象。
$.proxy(scope,functionName):scope為函數的作用域對象,functionName為函數名,它必須是scope對象的一個屬性。
复制代码
<script type="text/javascript">
        $( function() {
            var objMyInfo = {
              name: "小張", //設置對象name屬性
                sex: "男", //設置對象sex屬性
                ShowEvent: function() { //設置執行的事件
                    $( "#divShow").html("姓名:" +
                     this.name + "<br><br>性別:" +
                     this.sex);
                }
            }
            $( "#Button1").bind("click" ,objMyInfo.ShowEvent);//結果:姓名:"",性別:undefined
            $( "#Button1").bind("click" ,$.proxy(objMyInfo, "ShowEvent")); //通過proxy函數綁定設置的事件。結果:姓名:小張,性別:男。
            $( "#Button1").bind("click" , $.proxy(objMyInfo.ShowEvent, objMyInfo));//通過proxy函數綁定設置的事件。結果:姓名:小張,性別:男。
        })
    </script >
复制代码

八、實例——檢測對象類型


复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>使用jQuery 擴展工具函數實現對字符串指定類型的檢測</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    </script>
    <style type="text/css">
           body{font-size:11px}
           fieldset{width:410px}
           fieldset div{padding:8px}
           fieldset div select{font-size:9pt;padding:1px}
           #divTip{margin-top:10px;padding:10px;border:solid 1px #666;
           background-color:#eee;width:210px;display:none}
           .txt{border:#666 1px solid;padding:2px;width:120px;margin-right:3px}
           .btn {border:#666 1px solid;padding:2px;width:60px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        /*------------------------------------------------------------/
        功能:返回檢測字符串指定類型的結果
        參數:checkType 為檢測字符串的類型;strS 為待檢測的字符串
        返回:一個bool值,true 表示是指定的類型,false 表示不是指定的字符類型
        示例:$.chkStrByType("陶國榮", "zh_cn");
        /------------------------------------------------------------*/
         ; (function($) {
             $.extend({
                 chkStrByType: function(strS, chkType) {
                     var result;
                     switch (chkType) {
                         case 'odd'://奇數型
                             var chkStr = arrRegExp['number'];
                             var reg = RegExp(chkStr, 'g');
                             var result = reg.test(strS);
                             if (true == result) {
                                 var num = parseInt(strS) % 2;
                                 if (1 == num) {
                                     result = true;
                                 } else {
                                     result = false;
                                 }
                             } else {
                                 result = false;
                             }
                             break;
                         case 'even'://偶數型
                             var chkStr = arrRegExp['number'];
                             var reg = RegExp(chkStr, 'g');
                             var result = reg.test(strS);
                             if (true == result) {
                                 var num = parseInt(strS) % 2;
                                 if (num == 0) {
                                     result = true;
                                 } else {
                                     result = false;
                                 }
                             } else {
                                 result = false;
                             }
                             break;
                         default://其它類型按正則表達式檢測
                             var chkStr = arrRegExp[chkType];
                             var reg = RegExp(chkStr, 'g');
                             var result = reg.test(strS);
                             break;
                     }
                     return result;
                 }
             });
             /*  正則驗證字符串表達式  */
             var arrRegExp = {};
             arrRegExp['email'] = '\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*';
             arrRegExp['telephone'] = '(\\(\\d{3,4}\\)|\\d{3,4}-|\\s)?\\d{7,8}';
             arrRegExp['mobile'] = '(86)*0*1[3,5]\\d{9}';
             arrRegExp['postcode'] = '^\\d{6}$';
             arrRegExp['number'] = '^-?[0-9]\\d*$';
             arrRegExp['zh_cn'] = '[\\u4e00-\\u9fa5]';
             arrRegExp['url'] = '[a-zA-z]+://[^\\s]*';
         })(jQuery);

         $(function() {
             $("#btnChkStr").click(function() {
                 //獲取待檢測的字符串與指定的類型
                 var $ChkStr = $("#txtChkStr").val();
                 var $ChkType = $("#selStrType").val();
                 //保存檢測後的結果值
                 var blnResult = $.chkStrByType($ChkStr, $ChkType);
                 //返回檢測後的結果
                 var strTmpShow = "";
                 var strTmpType = blnResult ? "" : " 不是 ";
                 strTmpShow = $ChkStr + strTmpType;
                 strTmpShow = strTmpShow + $("select :selected").text();
                 strTmpShow = strTmpShow + " 類型";
                 //將返回後的結果顯示在頁面中
                 $("#divTip").show().html("").append(strTmpShow);
             });
         });
    </script>
</head>
<body>
   <fieldset><legend>指定類型檢測字符串</legend>
      <div>
       <span>檢測內容:</span><input id="txtChkStr" type="text" class="txt" />
       <span>選擇類型:</span>
       <select id="selStrType">
        <option value="email">郵箱</option>
        <option value="telephone">電話號碼</option>
        <option value="mobile">手機號碼</option>
        <option value="postcode">郵政編碼</option>
        <option value="number">整數</option>
        <option value="zh_cn">漢字</option>
        <option value="url">網址</option>
        <option value="odd">奇數</option>
        <option value="even">偶數</option>
       </select>
       <input id="btnChkStr" type="button" value="檢測" class="btn" />
       <div id="divTip"></div>
      </div>
   </fieldset>
</body>
</html>
复制代码
****************************************************************

一、優化選擇器執行速度

1. 優先使用ID選擇器和標記選擇器
  • 使用選擇器時應該首選ID選擇器($("#id")),其次是標記選擇器($("div")),最後再選用class、屬性等選擇器。
  • 避免重復使用ID號修飾ID號,例如$("#div1 #div2")。也避免使用tag,class等修飾ID號,例如$(".title #id")。
  • 使用屬性選擇器時,盡量使用標記進行修飾。例如$(div[title='aa'])。
2. 使用jQuery對象緩存
  • 如果多次操作同一個DOM元素,可以將其存在全局變量中,避免重復調用選擇器。
  • 緩存JQuery的變量命名規則盡量以$開頭。
  • 如果同一個DOM對象進行多個操作,盡量使用鏈式寫法。
3. 給選擇器一個上下文
格式:$(expression,[context]),expression是選擇器表達式,context是選擇器查找的范圍。這樣會比在全局查找效率高一些。
實例:
复制代码
<script type="text/javascript">
        $( function() {
            window.$objPub = { //在全局范圍中,定義一個windows對象
                $objTmp0: $( "#div0", ".MyCls0" ),
                $objTmp1: $( "#div1")
            }
            TestFun();
        })
        function TestFun() { //自定義顯示div內容的函數
            $objPub.$objTmp0.html( "Tmp0").css("width" ,"100px");
            $objPub.$objTmp1.html( "Tmp1");
        }
    </script >
复制代码

二、處理選擇器不規范元素

1. 選擇器屬性中包含特殊符號:特殊字符前添加轉義字符\\。
2. 選擇器中空格符:包含空格時表示祖先元素和後代元素的關系;不包含空格時表示一個選擇器中兩種篩選條件的合並。
复制代码
<script type="text/javascript">
        $( function() {
            var $objTmp0 = $(".MyCls :hidden" );//含有空格符,.MyCls子元素中的隱藏元素
            var $objTmp1 = $(".MyCls:hidden" );//沒有空格符,.MyCls類名並且隱藏的元素
            var $objTest = $("#div\\[test\\]" );//選擇器特殊符號
        })
    </script >
复制代码

三、解決jQuery庫與其他庫$沖突問題

使用jQuery.noConflict()轉讓$使用權,然後只能使用jQuery變量訪問jQuery對象。
1.jQuery庫先於其他庫導入
無需使用jQuery.noConflict()方法。只要使用jQuery方法時不要使用$符號而是使用jQuery符號就可以了。
2.jQuery庫後於其他庫導入
需要先使用jQury.noConflict(),然後使用jQuery符號操作jQuery中的對象。如果仍然想使用簡潔符號,有兩種方法
①自定義其他符號用作快捷方式:
复制代码
var j=jQuery.noConflict();
        j( function() {
            j( "#Button1").click(function () {
                獲取對象
                var $objTmp = j("#txtName" );
                顯示內容
                j( "#divTmp").html("J_" + $objTmp.val());
            })
        })
复制代码
②在jQuery方法內部繼續使用$符號。
复制代码
jQuery.noConflict();
        jQuery( function($) {
            $( "#Button1").click(function () {
                //獲取對象
                var $objTmp = $("#txtName" );
                //顯示內容
                $( "#divTmp").html("J_" + $objTmp.val());
            })
        })
复制代码

四、其他優化

  • 盡量減少對DOM元素直接操作的次數。
复制代码
<script type="text/javascript">
        $( function() {
            //定義數組
            var arrList = ["list0" , "list1", "list2", "list3" , "list4", "list5"];
            var strList = "" ; //初始化字符
            $.each(arrList, function(index) {
                //遍歷後累加數組元素
                strList += ( "<li>" + arrList[index] + "</li>" );
            })
            //一次性完成DOM元素的增加
            $( "#ulFrame").append(strList);
        })
    </script >
复制代码
  • 使用子查詢優化選擇器性能。

五、區分DOM對象和jQuery對象

1.DOM對象和jQuery對象定義的區別
  • DOM對象:通過傳統js方法獲取的DOM元素對象;
  • jQuery對象:通過jQuery方法包裝原始的DOM對象後生成的新對象。
2.DOM對象和jQuery對象的轉換
如果想使DOM對象和jQuery對象之間的方法相互調用,需要先將對象進行類型轉換。
  • DOM轉jQuery:DOM對象通過$()方法進行包裝就可以轉換為jQuery對象。
  • jQuery轉DOM:通過get(index)或者[index]方法,可以將jQuery對象轉換為DOM對象。
复制代码
<script type="text/javascript">
        $( function() {
            //***** DOM對象轉成jQuery對象 *****//
            //DOM對象
            var objDom0 = document.getElementById("div0");
            //轉成jQuery對象
            var $obj0 = $(objDom0);
            //調用jQuery中的方法設置其中的內容
            $obj0.html( "DOM對象轉成jQuery對象後設置的內容" );

            //***** jQuery對象轉成DOM對象 *****//
            //jQuery對象
            var $obj1 = $("#div1" );
            //轉成DOM對象
            var objDom1 =  $obj1[0];//或者$obj1.get(0);
            //調用JavaScript中的對象方法設置內容
            objDom1.innerHTML = "jQuery對象轉成DOM對象後設置的內容" ;
        })
    </script >
复制代码

沒有留言:

張貼留言