jQuery ????? ?????? ???? jQuery ????? ?? ?? ???? ????? ????, ?? ??? ????? ????, ??? ????? ? ?? ???? ????. ??? ? ? ?? jQuery ????? ???? ? jQuery ????? ???? ???? ??? ?????? ???? jQuery ????? ???? ??? ?? ?????????.
jQuery ???? ??:
1. ?? ???? ????? ????
??? ??? ????? ???? ?? ?? jQuery ??? ???? ? ?????. -??. .
2. ?? ??? ????? ????
jQuery ??????? ???? ??? ??? ? ????. ?? ?? jQuery.noCon conflict() ???, ????? ???? jQuery.ajax() ???, ? ?? ??? ???? jQuery.trim() ???? ?? jQuery ?? ?? ??? ??? ???? ???????.
3. ??? ????
?? ???? ??? ????? ???? ???.
???? ?? ???
1. ?? JavaScript ????? ?????? ??? ??? ?? jQuery ????? ?? ??? jquery.[???? ??].js? ???? ?? ????.
2. ?? ?? ???? jQuery.fn ??? ????? ?? ?? ?? ??? jQuery ?? ??? ????? ???.
3. ?? this? DOM ??? ???? click() ???? ?? ???? ??? ?? ???? ???? this? ?? ???? ?? ?? jQuery ??? ?????.
4. this.each? ?? ?? ??? ????? ? ????.
5. ?? ???? ?? ????? ?????? ??? ???. ??? ??? ?? ?? ??? ??? ? ????. ??? ????? ???? ??? ????? ???? ?? ??? ???? ??? ????? ??? ??? ?? ??? ?? ????.
6. ????? ????? ?? ??? ??? ???? ?? jQuery ??? ???? ???. ????? ????? ?? ?? ?? ??? ?? ?? ??? ???? ?? ??? ???
7. ???? ??? jQuery ??? ???? $? ???? ?? ?? ?? jQuery? ???? ?????. ??, ? ??? ???? ?? ?? ??? ??? ?? ????. ??? ?????? $? jQuery? ???? ?? ??? ? ????. ?? ????? ?? ?????.
????? ???
???? ???? ECMAScript? ?? ?? ??? ??? ?????. ?? ??? ????(?, ?? ?? ? ?? ???? ?? ?? ??? ???) ??? ?? ??? ???? ? ????. ?? ?? ??, ???? ? ?? ?? ??? ??? ?? ??? ??? ?? ?? ? ??? ?? ???? ?? ?? ???? ???? ???? ?????. ?, ?? ??? ??? ?? ?? ??? ?????. ? ?? ??? ??? ??? ?? ??? ?? ??, ???? ? ?? ?? ??? ????? ???. ??? ?? ??, ????, ?? ??(??)? ?? ?? ??? ??? ?? ???? ?? ??? ??? ?? ???.
?? ?? ?? function()? ?????.{/*??? ??? ?????*/}, ?? ?? ??? ?? (function(){/*??? ??? ?????*/})? ?? ????? ()? ?????. ???? ?????. ?? ???? ???? ?? ????? ??? ? ????.
//? ?? ???? ?? ???? ?? ????? ??? ?? ?????.
;(function($){ //開始時(shí)將$作為匿名函數(shù)的形參
/*這里放置代碼，可以使用$作為jQuery的縮寫別名*/
})(jQuery); //這里就將jQuery作為實(shí)參傳遞給匿名函數(shù)了?? ???? jQuery ????? ?????.
jQuery ????? ????
jQuery? jQuery ??? ???? ? ?? ??, ? jQuery.fn.extend() ???? jQuery.extend() ???? ?????. ??? ??? ??? ? ?? ???? ?? ? ? ??? ????, ??? ??? ? ????? ???? ? ?????. ? ??? ?? Object ??? ???? ??? ?????. Object ??? "??/? ?"? ?? "?? ?? ??? ??/?? ??"? ?????.
jQuery ??? ??? ? ?? ? ??? jQuery.extend() ????? ?? ?? ??? ???? ???? ??? ??? ????.
jQuery ??? ??? ????.
jQuery.extend(target,obj1,…….[objN])
用一個(gè)或多個(gè)其它對(duì)象來擴(kuò)展一個(gè)對(duì)象，然后返回被擴(kuò)展的對(duì)象。
例如合并settings對(duì)象和options對(duì)象，修改并返回settings對(duì)象。
var settings={validate:false,limit:5,name:”foo”};
var options={validate:true,name:”bar”};
var newOptions=jQuery.extend(settings,options);??? ??? ????.
newOptins={valitdate:true,limit:5,name:”bar”};jQuery.extend() ???? ?? ??? ??? ?? ???? ???? ??? ?? ????? ???? ? ?? ?????.
function foo(options){
options=jQuery.extend({
name:”bar”,
limit:5,
datatype:”xml”
},options);
};foo() ???? ???? ??? ???? options ??? ?? ?? ???? ??? ?? ????, ??? ??? ???? ?????. ??? ??? ????.
foo({name:”a”,length:”4”,dataType:”json”});
foo({name:”a”,length:”4”});
foo({name:”a”});
foo();jQuery.extend() ???? ???? ??? ????? ???? ?? ???? ? ????. ? ???? ???? ?? ??? ???? ?? ?? ?? ????? ?? ???? ???? ?????. ? ????? ? ????? ???? ?? ???? ? ??? ?? ??? ? ?????. ?? ??? ????? ????? ?? ??? ??? ???? ??? ??? ??? ??? ?? ???? ???? ? ????? ???? ??? ? ??? ?? ?????.
jQuery ???? ??
1. jQuery ?? ???? ????? ????
??? ???? ???? ???? ??
?? color() ???? ?? ??? ?????. . ? ????? ?? ? ?? ??? ???? ? ?????.
(1)設(shè)置匹配元素的顏色。
(2)獲取匹配的元素（元素集合中的第1個(gè)）的顏色。
首先將該插件按規(guī)范命名為jquery.color.js。
然后再JavaScript文件里搭好框架.由于是對(duì)jQuery對(duì)象的方法擴(kuò)展，因此采用第1類方法jQuery.fn.extend()來編寫。
;(function($){
$.fn.extend({
“color”:function(value){
//這里寫插件代碼
}
});
})(jQuery);這里給這個(gè)方法提供一個(gè)參數(shù)value，如果調(diào)用了方法的時(shí)候傳遞了value這個(gè)參數(shù)，那么就是用這個(gè)值來設(shè)置字體顏色；否則就是匹配元素的字體顏色的值。
首先，實(shí)現(xiàn)第1個(gè)功能，設(shè)置字體顏色。注意，由于插件內(nèi)部的this指向的是jQuery對(duì)象，而非普通的DOM對(duì)象。代碼如下：
;(function($){
$.fn.extend({
“color”:function(value){
return this.css(“color”,value);
}
});
})(jQuery); 接下來實(shí)現(xiàn)第2個(gè)功能。如果沒用給方法傳遞參數(shù)，那么就是獲取集合對(duì)象中第1個(gè)對(duì)象的color的值。由于css()方法本身就具有返回第1個(gè)匹配元素樣式值的功能，因此此處無需通過eq()來獲取第1個(gè)元素。只要這兩個(gè)方法結(jié)合起來,判斷一下value的值是否是undefined即可。
jQuery代碼如下：
;(function($){
$.fn.extend({
“color”:function(value){
if(color===undefined){
return this.css(“color”,value);
}else{
Return this.css(“color”,value);
}
}
});
})(jQuery);這樣一來，插件也就完成了?，F(xiàn)在來測(cè)試一下代碼。
<script type=”text/javascript”>
//插件編寫
;(function($){
$.fn.extend({
“color”:function(value){
if(color===undefined){
return this.css(“color”,value);
}else{
Return this.css(“color”,value);
}
}
});
})(jQuery);
//插件應(yīng)用
$(function(){
//查看第一個(gè)div的color樣式值
alert($(“div”).color()+”\n返回字符串，證明此插件可用?！?;
//把所有的div字體顏色都設(shè)為紅色
alert($(“div”).color(“red”)+”\n返回object證明得到的是jQuery對(duì)象。“)；
}）
</script>
<div style=”color:red”>red</div>
<div style=”color:blue”>blue</div>
<div style=”color:green”>green</div>
<div style=”color:yellow”>yellow</div>
另外，如果要定義一組插件，可以使用如下所示的寫法：
:(function($){
$.fn.extend({
"color":function(value){
//插件代碼
},
"border":function(value){
//插件代碼
},
"background":function(value){
//插件代碼
}
};
})(jQuery);表格隔行變色插件
表格隔行變色的代碼如下：
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$('tbody>tr').click(function(){
//判斷是否選中
var hasSelected=$(this).hasClass('selected');
//如果選中，則移出selected類，否則就加上selected類
$(this)[hasSelected?"removeClass":"addClass"]('selected')
//查找內(nèi)部的checkbox,設(shè)置對(duì)應(yīng)的屬性
.find('checkbox').attr('checked'.!hasSelected);
});
//如果復(fù)選框默認(rèn)情況下是選擇的，則高色
$('tbody>tr:has(:checked)').addClass('selected');首先把插件方法取名為alterBgColor，然后為該插件方法搭好框架，jQuery代碼如下：
;(function($){
$.fn.extend({
"alterBgColor":function(options){
//插件代碼
}
});
})(jQuery);框架完成后，接下來就需要為options定義默認(rèn)值。默認(rèn)構(gòu)建這樣({odd:"odd",even:"even",selected:"selected"})一個(gè)Object。這樣就可以通過$("#sometable").alterBgColor({odd:"odd",even:"even",selected:"selected"})自定義奇偶行的樣式類名以及選中后的樣式類名。同時(shí)，直接使用$("#sometable").alterBgColor()就可以應(yīng)用 默認(rèn)的樣式類名。
jQuery代碼如下：
;(function($){
$.fn.extend({
"alterBgColor":function(options){
options=$.extend({
odd:"odd", /*偶數(shù)行樣式*/
even:"even", /*奇數(shù)行樣式*/
selected:"selected" /*選中行樣式*/
},options);
}
});
})(jQuery);如果在后面的程序中需要使用options對(duì)象的屬性，可以使用如下的方式來獲得：
options.odd; //獲取options對(duì)象中odd屬性的值 options.even; //獲取options對(duì)象中even屬性的值 options.selected; //獲取options對(duì)象中selected屬性的值
接下來就需要把這些值放到程序中，來代替先前程序中的固定值。
最后就是匹配元素的問題了。顯然不能直接用$('tbody>tr')選擇表格行，這樣會(huì)使頁面中全部的
;(function($){
$.fn.extend({
"alterBgColor":function(options){
//設(shè)置默認(rèn)值
options=$.extend({
odd."odd",
even."even",
selected:"selected"
},options);
$("tbody>tr:odd",this).addClass(options,odd);
$("tbody>tr:even",this).addClass(options,even);
$("tbody>tr",this).click(function(){
//判斷是否選中
var hasSelected=$(this).hasClass(options,selected);
//如果選中，則移出selected類，否則加上selected類
$(this)[hasSelected?"removeClass":"addClass"](options,selected)
//查找內(nèi)部的checkbox,設(shè)置對(duì)應(yīng)屬性
.find(':checkbox').attr('checked',!hasSelected);
});
//如果單選框默認(rèn)情況下是選擇的，則高色
$('tbody>tr:has(:checkd),this').addClass(options,selected);
rerturn this; //返回this，使方法可鏈
}
});
})(jQuery);在代碼的最后，返回this，讓這個(gè)插件具有可鏈性。
此時(shí)，插件就完成了?，F(xiàn)在來測(cè)試這個(gè)插件。構(gòu)造兩個(gè)表格，id分別為table1和table2，然后使用其中一個(gè)
