出處：http://www.cnblogs.com/janes/p/3541708.html
前言
2014年開始了，年底給自己制訂的學習計劃，第一步先從學習《jQuery權威指南》開始。
jQuery大家都很比較熟悉，但是我經常是邊用的時候邊對照著API，這次找本書通讀一遍，記錄下了一些收獲。
趁著歲末年初稍微得閒，快馬加鞭地將筆記進行整理，以作為日後的查閱資料，在此分享給大家。
新的一年，從腳踏實地開始，祝大家進步多多~
目錄
1. 讀<jquery 權威指南>[1]-選擇器及DOM操作
2. 讀<jquery 權威指南>[2]-事件
3. 讀<jquery 權威指南>[3]-動畫
4. 讀<jquery 權威指南>[4]-Ajax
5. 讀<jQuery 權威指南>[5]-插件
6. 讀<jQuery 權威指南>[6]--實用工具函數
7. 讀<jquery 權威指南>[7]-性能優化與最佳實踐
****************************************************************
讀<jquery 權威指南>[1]-選擇器及DOM操作
今天是小年了，2013馬上要過去了，但是學習不能間斷啊。最近正在看《jQuery權威指南》，先溫習一下選擇器和DOM操作。
一、基本選擇器
1.table單雙行：
$(function () {2.jQuery完善的檢測機制：
$( "#tbStu tr:nth-child(even)" ).addClass("trOdd");
})
傳統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(){}):函數返回值作為屬性值。
②元素內容操作-- html(),text()
- 刪除元素屬性：removeAttr(name)
③獲取或設置元素值-- val()
設置元素值：val(value)④元素樣式操作
獲取元素值：val()
獲取select多個選項值：$("select").val().join( ",")
設置多個選中：val(array)。
css(name,value):設置樣式2.DOM-創建節點
addClass("class0 class1"):添加樣式
toggleClass(name)：切換樣式
removeClass(name):刪除樣式，如果有參數則刪除指定類，否則刪除所有class。
$(html)：用於動態創建節點。要注意是否閉合。3.DOM-插入節點
①內部插入節點
②外部插入節點
4.DOM-復制節點
clone():復制元素，不復制行為。5.替換節點
clone(true):復制元素，同時復制行為。
replaceWith(content)6.包裹節點
replaceAll(selector)
替換完成後元素的事件全部消失。
7.刪除元素
remove([expr])：選擇元素節點後刪除該節點及其後代元素。****************************************************************
empty()：清空元素及其後代元素。
讀<jquery 權威指南>[2]-事件
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>
****************************************************************
讀<jquery 權威指南>[3]-動畫
一、 顯示與隱藏——hide(),show()
1. 方法：- hide(speed,[callback]);
- show(speed,[callback]);
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為動畫效果執行之後的回調函數。
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 權威指南>[4]-Ajax
一、獲取異步數據
jQuery可以從服務器異步獲得靜態數據。①load()
$.load(url,data,callback)
- url要加載的頁面地址，
- data發送到服務器的數據key/value格式，
- callback表示加載成功後返回到加載頁面的回調函數。
<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
[
{
"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])
注意：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 權威指南>[5]-插件
一、說明
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.插件分類：- 封裝方法插件：對象插件
- 封閉函數插件：類插件
①插件命名格式： 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>
****************************************************************
讀<jQuery 權威指南>[6]--實用工具函數
官方地址：http://api.jquery.com/category/utilities/
一、數組和對象操作
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,213.$.map——數據變更
篩選後數據：8,7,9,10
$.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,214.$.inArray()——查找數組元素
變更後數據：9,8,10,11
$.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中已經刪除。
$.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對象的一個屬性。
<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>
****************************************************************
讀<jquery 權威指南>[7]-性能優化與最佳實踐
一、優化選擇器執行速度
1. 優先使用ID選擇器和標記選擇器- 使用選擇器時應該首選ID選擇器($("#id"))，其次是標記選擇器（$("div")），最後再選用class、屬性等選擇器。
- 避免重復使用ID號修飾ID號，例如$("#div1 #div2")。也避免使用tag，class等修飾ID號，例如$(".title #id")。
- 使用屬性選擇器時，盡量使用標記進行修飾。例如$(div[title='aa'])。
- 如果多次操作同一個DOM元素，可以將其存在全局變量中，避免重復調用選擇器。
- 緩存JQuery的變量命名規則盡量以$開頭。
- 如果同一個DOM對象進行多個操作，盡量使用鏈式寫法。
格式：$(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對象後生成的新對象。
如果想使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 >
