jquery對(duì)象

jquery最重要的就是其對(duì)象掘托，它的調(diào)用基本可以分成方法和函數(shù)（方法當(dāng)然是函數(shù)内颗，這里這么說(shuō)是把由對(duì)象調(diào)用的和由類(lèi)調(diào)用的區(qū)分開(kāi)來(lái)）捶惜，所以得到j(luò)Query對(duì)象就十分重要批钠，第一部分只有一個(gè)函數(shù)$()

$(document.getElementById('mydiv'));
$(this)
//從原生對(duì)象中生成jQuery對(duì)象
var dst=$(CSS-selector);
//利用CSS選擇器從文檔中得到j(luò)query對(duì)象
typeof dst[0]//并非jQuery對(duì)象而是原生對(duì)象
$('body')[0]==document.body//true
$('.btn-lg',$('body'));
//在body中得到類(lèi)為btn-lg的元素組裝成為對(duì)象，$()的第二參數(shù)為上下文
$('<img/>',{
    src:"http://www.example.com/img/00.jpg",
    css:{
        width:90px;
        height:45px;
    },
    click:handler
});
//產(chǎn)生一個(gè)新對(duì)象
//最后一個(gè)用法怠苔，與上面不同同廉，用來(lái)做事件注冊(cè)
$(func);
//等同于$(document).ready(func); func里的this指向原生對(duì)象document

jQuery屬性方法

jquery的getter和setter不做區(qū)分是同一個(gè)函數(shù)，設(shè)定值時(shí)就是setter嘀略，否則就是getter恤溶，但getter得到的是jQuery對(duì)象中第一個(gè)元素對(duì)應(yīng)的屬性值
下面首先介紹有哪些屬性方法

• attr，處理html屬性
• css帜羊，處理css屬性
• addClass咒程，removeClass，增添刪除對(duì)應(yīng)CSS類(lèi)
• toggleClass讼育，沒(méi)有則加帐姻，有則刪
• hasClass稠集，jQuery對(duì)象元素中至少有一個(gè)滿足就返回true，否則false
• val饥瓷，操作表單各項(xiàng)剥纷，比如文本，復(fù)選框等
• 各種坐標(biāo)屬性方法如offset呢铆，innerWidth
• data與removeData晦鞋，將數(shù)據(jù)綁定到元素上

用法，以下用func指代屬性方法

$('..').func(attribute-name);
$('..').func(name,value);
$('..').func({
    name1:value1,
    name2:value2,
    ...
})
$('..').func(name,function);//function的返回值是name的值
//特例
$('..').val()//get方法
$('..').val(value)//set方法
$('..).is('CSS-selector')//至少有一個(gè)滿足

修改文檔結(jié)構(gòu)

基本分成兩種形式

$(target).position($(content));
//上面加$是為了說(shuō)明均是jQuery對(duì)象棺克，position指的是一些位置描述悠垛，比如after，before娜谊，append等
$(content).actionPosition($(target));
//action代表采取的操作如insert确买、append和replace等，position代表相對(duì)位置如To纱皆、All和after等
//比較特殊的例子
$('..').clone()
//clone不會(huì)復(fù)制事件處理器湾趾，要復(fù)制的話可以在注冊(cè)時(shí)采用live方法綁定
$('..').wrap(document-element)
//對(duì)每一個(gè)選中元素外面加一層包裝
$('..').wrapall(document-element)
//將選中元素作為一組來(lái)包裝
$('..').wrapInner(document-element)
//包裝每個(gè)選中元素的內(nèi)容

具體的操作函數(shù)太多了就不一一列出了

事件處理

這一部分在我之前的博客中有詳細(xì)講述，還是復(fù)制粘貼以下吧
Web之事件處理

jquery事件處理器

• jquery的事件處理程序一般只有一個(gè)參數(shù)（必定是第一個(gè)參數(shù)）派草，那就是jquery事件對(duì)象搀缠。
• jquery處理器中的this指向的是對(duì)應(yīng)html元素，需要轉(zhuǎn)成jquery對(duì)象澳眷，看下面例子

$("p").click(function(){
    $(this).css({background,#555555});  
});

• jquery處理器的返回值始終有意義胡嘿，如果返回false，該事件的默認(rèn)行為及接下來(lái)的冒泡傳播均會(huì)停止钳踊，類(lèi)似于調(diào)用了stopPropagation和preventDefault.
• 要想傳入多個(gè)參數(shù)，需用trigger函數(shù)顯式觸發(fā)事件勿侯。

jquery事件對(duì)象

包含了jquery事件的詳細(xì)信息拓瞪，有諸多NB屬性，比如data屬性助琐，還定義了preventDefault等方法祭埂。

jquery注冊(cè)

簡(jiǎn)單注冊(cè)

$(".sign").click(handler);
//jquery對(duì)象.簡(jiǎn)單事件類(lèi)型名(處理器);
//注意，以下為特例
$(selector).hover(f,g);
//為鼠標(biāo)放上去和離開(kāi)分別注冊(cè)
$(selector).toggle(f1,f2,f3...);
//第i次事件調(diào)用fi

高級(jí)注冊(cè)

$('a').on('mouseover mouseleave',handler);
$('a').on({
    mouseover:f,
    mouseleave:g
});
$('a').on('mouseover',{sb:6},handler);
//中間參數(shù)會(huì)作為jquery事件對(duì)象的data屬性值
//對(duì)于動(dòng)態(tài)元素怎么辦呢
$(parent).on(name,childSelector,{sb:6},handler);
//用父元素為它注冊(cè)
//one方法使用與on一致兵钮，但只起一次作用蛆橡，搞完就注銷(xiāo)

事件注銷(xiāo)

$(selector).off('EventName');
//移除該事件所有處理器
$(selector).off(jquery對(duì)象);
$('a').off({
    mouseover:f,
    mouseleave:g
});//移除單個(gè)處理器

事件觸發(fā)

$('a').click();
//$(selector).SimpleEventName();但這樣不能手動(dòng)觸發(fā)addEventListener和attachEvent注冊(cè)的處理器
$(selector).trigger(EventName,[args]);
//triggerHandler方法觸發(fā)的事件不會(huì)冒泡也沒(méi)有默認(rèn)操作
$(selector).live(Name,handler)
//為動(dòng)態(tài)元素即在注冊(cè)后添加的元素也注冊(cè)，取消用die掘譬，用法基本同bind與unbind,在1.7版本后不可用泰演，全部綜合為on和off了

jQuery的AJAX

輔助方法

$.load(url)
//調(diào)用http的get方法，并異步加載對(duì)應(yīng)內(nèi)容,默認(rèn)得到html
$.load(url,{..});
//當(dāng)?shù)诙€(gè)對(duì)象為json對(duì)象葱轩，時(shí)采用Post
$.load(url,{..},callback(data,status,req));
//第三個(gè)參數(shù)睦焕，沒(méi)有json時(shí)為第二個(gè)參數(shù)回調(diào)函數(shù)藐握，其參數(shù)分別是
//返回的數(shù)據(jù)，狀態(tài)碼如success垃喊，請(qǐng)求對(duì)象猾普，可以缺省
//回調(diào)函數(shù)可缺省，其格式如上本谜，不做特殊說(shuō)明初家，下面均如此
$.getScript(url,callback(data,status,req));
//得到腳本后執(zhí)行，再執(zhí)行回調(diào)函數(shù)乌助，默認(rèn)得到j(luò)avascript
$.getJSON(url,JSON,callback(data,status,req));
//中間參數(shù)可以缺省笤成，這樣回調(diào)函數(shù)就變第二個(gè)
//中間加數(shù)據(jù)的話，會(huì)變成字符串加在url的'&'和'?'后眷茁，也就是說(shuō)方法依然是get了

常用方法

下面介紹兩個(gè)十分常用的方法get和post

$.get(url,object,callback(data,status,req),type);
$.post(url,object,callback(data,status,req),type);
//基本同上面一致炕泳，但type是希望得到的數(shù)據(jù)類(lèi)型，比如json（但要用
//$.parseJSON解析上祈，還有script（傳入回調(diào)函數(shù)前會(huì)執(zhí)行）培遵，text等

最根本的方法

ajax函數(shù)是最復(fù)雜也是最根本的方法

var option={
    type:'GET',
    url:'url',
    data:string or JSON,
    dataType:'JSON',
    success:callback,
    error:errorhandler
};
$.ajax(option);
//ajax可以設(shè)置回調(diào)選項(xiàng)以在不同階段做不同的回調(diào)處理
//階段：beforesend,success,complete,error
//上面的例子做了一些展示

工具函數(shù)

$.each(list,f(index,value));
/*f的參數(shù)分別是對(duì)象的系列值和對(duì)應(yīng)的值或者元素屬性名和對(duì)應(yīng)值，其
this和第二個(gè)參數(shù)一致登刺，當(dāng)返回false時(shí)循環(huán)停止*/
$.extend(dst,src);
//求兩個(gè)對(duì)象的并集并賦給第一個(gè)籽腕，src中值為undefined和null會(huì)被忽略
$.merge(dst,src)
//同上面差不多，只不過(guò)對(duì)于類(lèi)數(shù)組對(duì)象
$.map(list,f(index,value));
//list是類(lèi)數(shù)組對(duì)象纸俭，其中每個(gè)元素被f處理皇耗，f返回值組成新數(shù)組返回
$.parseJSON(string);
//傳入JSON格式字符串得到JSON對(duì)象

工具函數(shù)還有許多，這里只是列舉了最常用的一些揍很，其余的還是查找文檔吧郎楼。

注意事項(xiàng)

• 好的命名規(guī)則，對(duì)于jQuery對(duì)象應(yīng)該有特殊的命名規(guī)則比如在前面一致加上'$'窒悔，才能免于與原生對(duì)象和一些臨時(shí)變量混淆
• 使用鏈?zhǔn)秸{(diào)用呜袁，會(huì)使得我們對(duì)操作的jQuery對(duì)象更清楚