jQuery

其是對javascript封裝的一個框架包
簡化對javascript的操作
javascript代碼：獲得頁面節(jié)點(diǎn)對象、ajax元素節(jié)點(diǎn)對象實(shí)現(xiàn)、事件操作、事件對象
jquery代碼：無需考慮瀏覽器兼容問題引镊、代碼足夠少



特點(diǎn)：
①   語法簡練洒缀、語義易懂兑牡、學(xué)習(xí)快速、豐富文檔序无。 
②   jQuery 是一個輕量級的腳本嗜桌，其代碼非常小巧 
③   jQuery 支持 CSS1~CSS3 定義的屬性和選擇器 
④   jQuery 是跨瀏覽器的奥溺，它支持的瀏覽器包括 IE 6.0+、FF 1.5+骨宠、Safari 2.0+和 Opera 9.0+。 
⑤   能將 JavaScript 腳本與 HTML 源代碼完全分離相满，便于后期編輯和維護(hù)层亿。 
⑥   插件豐富，除了 jQuery 自身帶有的一些特效外立美，可以通過插件實(shí)現(xiàn)更多功能  

3. 出現(xiàn)的年代
jQuery 是繼 Prototype 之后又一個優(yōu)秀的 JavaScript 框架匿又，由 John Resig 于 2006 年初創(chuàng)建， 目前最新版本為 1.11.2建蹄，官方地址為：http://jquery.com/碌更，中文地址為 http://jquery.org.cn/。 
4. 其他相關(guān)的javascript框架包
Prototype洞慎、YUI痛单、Extjs、bindows劲腿、JSVM(國內(nèi))旭绒、mootools、jQuery

Prototype：與面向?qū)ο蟮脑屠^承關(guān)鍵字一致焦人，該框架的特點(diǎn)是功能擴(kuò)展比較容易挥吵。
YUI:  yahoo  user  interface 雅虎用戶接口，該框架可以實(shí)現(xiàn)各種頁面布局效果花椭。
    例如效果之一：標(biāo)簽切換對應(yīng)內(nèi)容

Extjs: 是目前js框架包里邊最為時尚忽匈、前沿的。通過該框架包可以實(shí)現(xiàn)許多非常絢麗的效果矿辽。
     該框架可以實(shí)現(xiàn)效果之一：頁面不同區(qū)域進(jìn)行拖拽效果丹允。
    該框架由于實(shí)現(xiàn)的效果非彻幔“絢麗”、導(dǎo)致其“實(shí)用”價值相對略低嫌松。
    
jQuery：javascript+query  
    使用前期沪曙，jquery側(cè)重快速找到頁面上各種節(jié)點(diǎn)。
    后期jquery豐富了事件操作萎羔、ajax操作液走、動畫效果、DOM操作等等贾陷。

 選擇器
在頁面上獲得各種元素節(jié)點(diǎn)對象而使用的條件就是選擇器缘眶。
document.getElementById()
document.getElementsByTagName();
document.getElementsByName();
1. 基本選擇器
$(‘#id屬性值’)  ----------->document.getElementById()
$(‘tag標(biāo)簽名稱’)----------->document.getElementsByTagName();
$(‘.class屬性值’)  class屬性值選擇器
$(‘*’)     通配符選擇器
$(‘s1,s2,s3’)聯(lián)合選擇器

層次選擇器
2.1 $(s1  s2) [父子]
派生選擇器：在s1內(nèi)部獲得全部的s2節(jié)點(diǎn)(不考慮層次)
$(“div  span”)
<div>
<span></span>
<p>
<span></span>
</p>
</div>
<span></span>

2.2 $(s1 > s2) [父子]
直接子元素選擇器:在s1內(nèi)部獲得s2的子元素節(jié)點(diǎn)
$(“div > span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>

2.3 $(s1 + s2) [兄弟]
直接兄弟選擇器：在s1后邊獲得緊緊挨著的第一個兄弟關(guān)系的s2節(jié)點(diǎn)
$(“div + span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
<span></span>
<div></div>
<span></span>

2.4 $(s1 ~ s2) [兄弟]
后續(xù)全部兄弟關(guān)系節(jié)點(diǎn)選擇器：在s1后邊獲得全部兄弟關(guān)系的s2節(jié)點(diǎn)
$(“div ~ span”)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
<span></span>
<p></p>
<span></span>


3. 并且(過濾)選擇器:

:first  $("tr:first")
:last
:not
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:gt(index)
:header  匹配h1...h6標(biāo)題元素


內(nèi)容過濾選擇器
4.1 :contains(內(nèi)容)
包含內(nèi)容選擇器，獲得節(jié)點(diǎn)內(nèi)部必須通過標(biāo)簽包含指定的內(nèi)容
$(“div:contains(beijing)”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
4.2 :empty
獲得空元素(內(nèi)部沒有任何元素/文本(空) )節(jié)點(diǎn)對象
$(“div:empty”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div>      </div>

4.3 :has(選擇器)
內(nèi)部包含指定元素的選擇器
    $(“div:has(#apple)”)
<div>hello</div>
<div><p></p></div>
<div><span id=”apple”></span></div>
<div><span class=”apple”></span></div>

4.4 :parent
尋找的節(jié)點(diǎn)必須作為父元素節(jié)點(diǎn)存在
$(“div:parent”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div>      </div>



5. 表單域選中選擇器
復(fù)選框髓废、單選按鈕巷懈、下拉列表

$(:checked) : 過濾出被選中的復(fù)選框,單選按鈕
$("input:lt(4):checked");

$(:selcted) 獲得下拉列表的選中情況


四. 屬性操作
<input  type=”text”  class=”apple”  id=”username”  name=”username” value=”tom” 
    address=”beijing”
/>
itnode.屬性名稱
itnode.屬性名稱= 值;
itnode.getAttribute(屬性名稱);
itnode.setAttribute(屬性名稱，值);

jquery方式操作屬性(attribute)：
$().attr(屬性名稱);         //獲得屬性信息值
$().attr(屬性名稱慌洪，值);   //設(shè)置屬性的信息
$().removeAttr(屬性名稱);   //刪除屬性
$().attr(json對象);       //同時為多個屬性設(shè)置信息值顶燕，json對象的鍵值對就是名稱和值
$().attr(屬性名稱，fn);      //通過fn函數(shù)執(zhí)行的return返回值對屬性進(jìn)行賦值





五. 快捷操作
1. class屬性值操作
$().attr(‘class’,值);
$().attr(‘class’);
$().removeAttr(‘class’);  //刪除class的屬性

$().addClass(值);        //給class屬性追加信息值
$().removeClass(值); //刪除class屬性中的某個信息值
$().toggleClass(值); //開關(guān)效果冈爹，有就刪除涌攻，沒有就添加



標(biāo)簽包含內(nèi)容操作
<div>hello<span>world</span></div>

javascript操作：
dvnode.innerHTML 獲得div包含的信息
dvnode.innerHTML = XXX；  設(shè)置div包含的內(nèi)容
(innerHTML不是w3c標(biāo)準(zhǔn)技術(shù)频伤，許多瀏覽器對其有支持而已)

jquery操作：
$().html();         //獲得節(jié)點(diǎn)包含的信息
$().html(信息);   //設(shè)置節(jié)點(diǎn)包含的內(nèi)容
    $().text();         //獲得節(jié)點(diǎn)包含的“文本字符串信息”內(nèi)容
    $().text(信息);       //設(shè)置節(jié)點(diǎn)包含的內(nèi)容(有html標(biāo)簽就把“><”符號變?yōu)榉枌?shí)體)

    
1 html() 和 text()方法的區(qū)別：
①   獲取內(nèi)容
前者可以獲取html標(biāo)簽 和 普通字符串內(nèi)容
后者只獲取普通字符串內(nèi)容
②   設(shè)置內(nèi)容    
前者可以設(shè)置html標(biāo)簽 和 普通字符串內(nèi)容
后者只設(shè)置普通字符串內(nèi)容恳谎，如果內(nèi)容里邊有tag標(biāo)簽內(nèi)容，就把其中的”<”“>”符號轉(zhuǎn)變?yōu)榉枌?shí)體 <-----&lt;  >----&gt;   空格------&nbsp;
以上兩種操作(獲取/設(shè)置)如果針對的操作內(nèi)容是純字符串內(nèi)容憋肖，則使用效果一致因痛。
3. css樣式操作
$().css(name，value);    //設(shè)置
$().css(name);          //獲取
$().css(json對象);        //同時修改多個css樣式
3.1 css()樣式操作特點(diǎn)：
① 樣式獲取岸更，jquery可以獲取 行內(nèi)鸵膏、內(nèi)部、外部的樣式坐慰。
dom方式只能獲得行內(nèi)樣式
② 復(fù)合屬性樣式需要拆分為"具體樣式"才可以操作
例如：     background 需要拆分為  background-color background-image 等進(jìn)行操作
    border： border-left-style  border-left-width  border-left-color 等
    margin： margin-left  margin-top 等

    
value屬性快捷操作
$().attr(‘value’);
$().attr(‘value’,信息值);

快捷操作：
$().val();          //獲得value屬性值
$().val(信息值);   //設(shè)置value屬性的值
該val方法在 復(fù)選框较性、單選按鈕、下拉列表 的使用有凸出表現(xiàn)结胀。

復(fù)選框操作
全選赞咙、反選、全不選
$().attr(‘checked’,true);       //設(shè)置復(fù)選框選中
$().attr(‘checked’,false);      //取消復(fù)選框選中
$().attr(‘checked’);            //判斷復(fù)選框選中情況糟港，返回布爾值


總結(jié)：
1. 屬性操作
$().attr(name)
$().attr(name,value)
$().attr(json對象);
$().removeAttr(name)
$().attr(name,function)
2. 快捷操作
a)  class屬性值的操作
$().addClass(value)
$().removeClass(value)
$().toggleClass(value)
b) 包含內(nèi)容操作
$().html()  $().html(value)
$().text()   $().text(value)
c) css樣式操作
$().css(name,value)
$().css(name)
$().css(json對象)
d)  val()
$().val()
$().val(value)
e)  復(fù)選框選中操作
$().attr(‘checked’,true);
$().attr(‘checked’,false);

• jQuery和DOM關(guān)系

$符號的由來
$(‘div’)  $(‘.apple’)  $(‘*’)等等攀操。
$符號就是一個函數(shù)，函數(shù)名稱為”$”符號而已秸抚。也可以使用jQuery符號速和。



var jQuery = (function(selctor,context){
    return new jQuery.fn.init(selector,context);
}
    return window.jQuery = window.$ = jQuery
);

使用jquery過程中用到的$符號歹垫，其在jquer框架內(nèi)部體現(xiàn)為是函數(shù)，其和jQuery關(guān)鍵字互為別名

jquery對象 與 dom對象關(guān)系
jquery對象：$(‘li’)  $(‘.apple’) 等選擇器使用返回的信息就是jquery對象
dom對象： document.getElementById()  
           document.getElementsByTagName();

           
1. jquery對象 和 dom對象 互相調(diào)用對方的成員
 jquery對象 與 dom對象 互相調(diào)用對方成員失敗了
原因：它們不是平等關(guān)系颠放，導(dǎo)致其成員也有層次劃分排惨。
jquery對象 是 包含 dom對象的

2.jquery對象 如何封裝的dom對象
dom對象 和jquery對象做合并，dom對象 是jquery對象 的數(shù)組組成部分碰凶。

3. jquery對象 和 dom對象 的轉(zhuǎn)化
3.1 jquery對象-----》dom對象： $()[下標(biāo)]
$("#apple")[1].style.backgroundColor = "red";

3.2 dom對象-----》jquery對象：$(dom對象)
var div = document.getElementById("apple");
$(div).css("background-color","green");

var lis = document.getElementsByTagName("li");
$(lis[2]).css('color','red');

• jquery框架對象分析

jquery框架對象類型：jquery對象  和  $對象
① jquery對象就是各種選擇器創(chuàng)建出來的對象
② $對象就是函數(shù)對象
1. jquery對象
$("#apple").css()/attr()/html()/text()/addClass  等方法可以調(diào)用


2. $函數(shù)對象
    $函數(shù)對象可以調(diào)用的許多成員也是通過extend復(fù)制繼承過來的
    $.get()  $.post()   $.ajax()

上無論是jquery對象 還是 $對象暮芭，他們98%以上的成員都是通過各自的extend復(fù)制繼承過來的。


遍歷方法
each()方法：
$.each(數(shù)組/對象,function處理);  //$對象      調(diào)用的
$(選擇器).each(function處理);   //jquery對象  調(diào)用的

//each遍歷對象

var cat = {name:"kitty",age:22,run:function(){console.log("running!")}};

jQuery.each(cat,function(k,v){
    console.log(k+'----'+v);
});

//2.遍歷對象
var colors = ['red','blue','green'];
jQuery.each(colors,function(i,val){
    console.log(i + '----' + val);
});

/*
遍歷jQuery對象
$('li').each(function(i dom對象下標(biāo)索引,val 代表具體的dom對象){});

    this代表遍歷出來的每個DOM對象
*/

$('li').each(function(i,val){
    console.log(i + '----' + val+'+++'+ this);
});

• 加載事件

javascript的加載事件：
    <body  onload = “函數(shù)()”>
    window.onload = function(){}
1. jquery加載事件實(shí)現(xiàn)
① $(document).ready(function處理);
② $().ready(function處理);
③ $(function處理);  對第一種加載的封裝而已



2.jquery加載事件與傳統(tǒng)加載事件的區(qū)別

2.1 設(shè)置個數(shù)
在同一個請求里邊欲低，jquery的可以設(shè)置多個辕宏，而傳統(tǒng)方式只能設(shè)置一個
    傳統(tǒng)方式加載事件是給onload事件屬性賦值，多次賦值砾莱，后者會覆蓋前者瑞筐。
    jquery方式加載事件是把每個加載事件都存入一個數(shù)組里邊，成為數(shù)組的元素腊瑟，執(zhí)行的時候就遍歷該數(shù)組執(zhí)行每個元素即可聚假，因此其可以設(shè)置多個加載事件。

2.2 執(zhí)行時機(jī)不一樣
    傳統(tǒng)方式加載事件闰非，是全部內(nèi)容(文字魔策、圖片、樣式)在瀏覽器顯示完畢再給執(zhí)行加載事件河胎。
    jquery方式加載事件，只要全部內(nèi)容(文字虎敦、圖片游岳、樣式)在內(nèi)存里邊對應(yīng)的DOM樹結(jié)構(gòu)繪制完畢就給執(zhí)行，有可能對應(yīng)的內(nèi)容在瀏覽器里邊還沒有顯示其徙。


3.jquery加載事件原理
    jquery加載事件是對DOMContentLoaded的封裝(而非onload)


八. 普通事件操作
① dom1級事件設(shè)置
    <input  type=”text”  onclick=”過程性代碼” value=’tom’ />
    <input  type=”text”  onclick=”函數(shù)()” />
    itnode.onclick = function(){}
    itnode.onclick = 函數(shù);
② dom2級事件設(shè)置
    itnode.addEventListener(類型胚迫，處理，事件流);
    itnode.removeEventListener(類型唾那，處理访锻，事件流);
    node.attachEvent();
    node.detachEvent();
③ jquery事件設(shè)置
    $().事件類型(事件處理函數(shù)fn);     //設(shè)置事件
    $().事件類型();                     //觸發(fā)事件執(zhí)行
    事件類型：click、keyup闹获、keydown期犬、mouseover、mouseout避诽、blur龟虎、focus等等    
例如：$(‘div’).click(function(){事件觸發(fā)過程this});
（該方式事件函數(shù)內(nèi)部this都代表jquery對象內(nèi)部的dom節(jié)點(diǎn)對象）。
jquery調(diào)用的大部分方法里邊的this關(guān)鍵字都代表其對應(yīng)的dom對象沙庐。


九. jquery對文檔的操作
通過jquery方式實(shí)現(xiàn)頁面各種節(jié)點(diǎn)的追加鲤妥、修改佳吞、刪除、復(fù)制等操作
1. 節(jié)點(diǎn)追加
1.1 父子關(guān)系追加
主動:append(content)
prepend(content)
    

被動:
appendTo(content)
prependTo(content)



1.<input onclick="...this">
    
2.<input onclick="func()">
    function func(){this}
3.itnode.onclick = func;
function func(){this}
4.itnode.onclick = function (){this}

只有第二種情況this代表window,其它三種都是代表input元素節(jié)點(diǎn)對象

兄弟關(guān)系追加:
主動:
after(content)
before(content)

被動:
insertAfter(content)
insertBefore(content)


$("shu li:last").after("<li>xxx</li>");
$("#fei").before("<li>aaaa</li>");

2.節(jié)點(diǎn)替換

replaceWith(content)
$('select').replaceWith('content');

replaceAll(selector);
$('content').replaceAll('select')

3.節(jié)點(diǎn)刪除
//刪除父元素的全部子元素
$('#shu').empty();

$("#wu li:first,#gai").remove();

4.復(fù)制節(jié)點(diǎn)
clone([false]); //只復(fù)制對象的節(jié)點(diǎn)
clone([true]);  //復(fù)制元素節(jié)點(diǎn)及其身上的對應(yīng)事件;



十. 屬性選擇器使用

[attribute] : $("div[id]"); 

[attribute=value] : $("input[name=selector]");

[attribute!=value]

[attribute^=value],以value值開始的元素:$("input[name^="news"]")

[attribute$=value],以value值結(jié)尾的元素:$("input[name$="news"]")
    
    
[attribute*=value],包含元素:$("input[name*="news"]")

[selector1][selector2][selctor3]:并且選擇器,需要同時滿足多個條件時使用
$["input[id][name$='man']"]

• 事件綁定

 事件綁定
jquery事件的簡單操作：
    $().事件類型(function事件處理);
    $().事件類型();

1.1 jquery事件綁定
    $().bind(事件類型棉安，function事件處理);
    $().bind(類型1 類型2 類型3底扳，事件處理);   //給許多不同類型的事件綁定同一個處理
    $().bind(json對象);       //同時綁定多個不同類型的事件
    (事件類型：click  mouseover  mouseout  focus  blur 等等)
    事件處理：有名函數(shù)、匿名函數(shù)

    
    1.2 取消事件綁定
    ① $().unbind();                     //取消全部事件
    ② $().unbind(事件類型);         //取消指定類型的事件
    ③ $().unbind(事件類型贡耽，處理);      //取消指定類型的指定處理事件
注意：第③種取消事件綁定衷模，事件處理必須是有名函數(shù)。



事件綁定是豐富事件操作的形式而已菇爪。

從dom2級事件操作開始算芯，同一個對象可以綁定多個同類型的事件，具體如下：
dvnode.addEventListener(‘click’,fn);
dvnode.addEventListener(‘click’,fn);
$(‘div’).click(function);
$(‘div’).click(function);


2. 事件委派
live(type,[data],fn) bind()   //后續(xù)添加的元素也會有與當(dāng)前兄弟節(jié)點(diǎn)一樣的事件

die([type],func) //與live反向,綁定的事件會移除 unbind()


3. 事件對象凳宙、阻止瀏覽器默認(rèn)動作熙揍、阻止事件冒泡
$().bind(‘click’,function(evt){ window.event });
$().click(function(evt){});
$().bind(‘mouseover’,f1);
function f1(evt){}
事件對象：就使用紅色的evt即可，在jquery框架內(nèi)部有做瀏覽器兼容處理氏涩。

阻止瀏覽器默認(rèn)動作届囚、阻止事件冒泡：
    dom2級瀏覽器默認(rèn)動作阻止：
        事件對象.preventDefault();    主流瀏覽器
        事件對象.returnValue = false;   IE瀏覽器
    dom2級事件冒泡阻止：
        事件對象.stopPropagation();    主流瀏覽器
        事件對象.cancelBubule = true;   IE瀏覽器
    
在jquery里邊：
    $().bind(‘click’,function(evt){
        evt.preventDefault();
        evt.stopPropagation();
    });
    preventDefault()方法是jquery的方法，名字與js底層代碼的名字一致而已是尖。
                 并且其有做瀏覽器兼容處理
    stopPropagation()方法是jquery的方法意系，名字與js底層代碼的名字一致。

• 動畫效果

1.基本動畫
show(speed,[callback])
hide(speed,[callback])
toggle()
toggle(switch)
toggle(speed,[callback]) //切換元素的可見狀態(tài)

2.垂直動畫
slideUp()
slideDown()
slideToggle()

3.顏色漸變動畫
fadeIn(speed,[callback])
fadeOut(speed,[callback])
fadeTo(speed,opacity,[callback])
fadeToggle(speed,[callback])

• jquery封裝的ajax

具體操作：
$.get(url  [,data]  [,fn回調(diào)函數(shù)]   [, dataType]);
    data:給服務(wù)器傳遞的數(shù)據(jù)饺汹，請求字符串 蛔添、json對象 都可以設(shè)置
    fn：回調(diào)函數(shù)，ajax請求完成后調(diào)用該函數(shù)兜辞，可以在此函數(shù)完成ajax的后續(xù)處理
    dataType：服務(wù)器返回?cái)?shù)據(jù)類型迎瞧，html、text逸吵、xml凶硅、json
    (該ajax是異步的get方式請求)

$.post(url[,data][,fn回調(diào)函數(shù)][, dataType]);
    該方法與$.get()方法使用完全一致，不同的是其為post方式請求

$.ajax({  //json對象
        url:請求地址,
        data:給服務(wù)器傳遞的數(shù)據(jù),
        dataType:數(shù)據(jù)從服務(wù)器返回格式html扫皱、text足绅、xml、json
        type:get/post請求方式
        success:function(){}  ajax成功請求后的回調(diào)函數(shù)韩脑，可以做后續(xù)處理使用
        async:[true]異步/false同步氢妈，
        cache:[true]緩存/false不緩存,
}
)

• jquery插件開發(fā)

什么是jquery插件
jquery框架本身給我們提供了一些方法供使用。但是方法的數(shù)目是有限的扰才，其不能任意滿足我們對各種功能的需求允懂。那么我們自己可以來給jquery框架開發(fā)、擴(kuò)展一些額外功能方法衩匣。

開發(fā)蕾总、擴(kuò)展jquery框架額外方法的過程就是“插件開發(fā)”



2. 兩種形式豐富方法
①  給$.fn(給jquery對象)豐富
    $.fn.成員 = 值;
    $.fn.extend(json對象);
②  給$(給$對象)豐富
    $.成員 = 值;
    $.extend(json對象);