前言
2014年開始了，年底給自己制訂的學習計劃，第一步先從學習《jQuery權威指南》開始。
jQuery大家都很比較熟悉，但是我經常是邊用的時候邊對照著API，這次找本書通讀一遍，記錄下了一些收獲。
趁著歲末年初稍微得閒，快馬加鞭地將筆記進行整理，以作為日後的查閱資料，在此分享給大家。
新的一年，從腳踏實地開始，祝大家進步多多~
目錄
****************************************************************
今天是小年了，2013馬上要過去了，但是學習不能間斷啊。最近正在看《jQuery權威指南》，先溫習一下選擇器和DOM操作。
一、基本選擇器
1.table單雙行：
$(function () {$( "#tbStu tr:nth-child(even)" ).addClass("trOdd");})
2.jQuery完善的檢測機制：
傳統js處理對象時要首先判斷是否存在；jQuery具有較完善的檢測機制不需要判斷，即使該元素不存在，也不會出現錯誤提示。
3.選擇器
①基本選擇器：
②層次選擇器
注意：
- $(「ancestor descendant」)是祖先與後代關系，而$(「parent child」)是父級與子級關系；
- $(「prev+next」)可以使用.next()代替，表示prev後面緊鄰的兄弟元素；而$(「prev~siblings」)等同於.nextAll()，表示prev後面所有兄弟元素；siblings()方法表示獲取全部的兄弟元素。
③過濾選擇器：
二.DOM操作
1.訪問元素
①元素屬性操作-- attr()
- 獲取元素屬性：attr(name)
- 設置元素屬性：
attr(key,value);attr({key1:value1, key2:value2})attr(key,function(){}):函數返回值作為屬性值。
- 刪除元素屬性：removeAttr(name)
②元素內容操作-- html(),text()
③獲取或設置元素值-- 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-插入節點
①內部插入節點
②外部插入節點
4.DOM-復制節點
clone():復制元素，不復制行為。clone(true):復制元素，同時復制行為。
5.替換節點
replaceWith(content)replaceAll(selector)替換完成後元素的事件全部消失。
6.包裹節點
7.刪除元素
remove([expr])：選擇元素節點後刪除該節點及其後代元素。empty()：清空元素及其後代元素。
****************************************************************
1. 事件冒泡
阻止事件冒泡的兩種方式：
- 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>
②getJSON()
方法：$.getJSON(url,data,callback)：獲取.json格式的數據並進行處理。
參數：url要加載的頁面地址，data發送數據，callback回調函數。
news.js
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方式。
②ajax中的全局事件
實例：
<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中已經刪除。
注意：該對象在jquery1.4.2添加，但是1.9中已經刪除。
$.support.boxModel檢測頁面是否為標准盒子模型。經測試該對象在1.10中測試也已經去掉。
三、字符串操作
$.trim()：去掉字符串左右兩側的空格。這是jquery核心庫中唯一針對字符串處理的函數。
四、測試函數
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對象的一個屬性。
$.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 >
沒有留言:
張貼留言