概述：
1）jQuery是一種框架，對于瀏覽器的兼容問題翩伪，95％不用再去考慮了微猖。
2）jQuery利用選擇器（借鑒了CSS選擇器的語法）查找要操作的節(jié)點(diǎn)（DOM對象），然后將這些節(jié)點(diǎn)封裝成一個(gè)jQuery對象（封裝的目的有兩個(gè)：①是為了兼容不同的瀏覽器缘屹。②也為了簡化代碼）凛剥。通過調(diào)用jQuery對象的方法或者屬性來實(shí)現(xiàn)對底層的DOM對象的操作。
3）jQuery特點(diǎn)簡單概括就是：選擇器 + 調(diào)方法轻姿。
【注意： jQuery 分 2 個(gè)系列版本 1.x 與 2.x犁珠，主要的區(qū)別在于 2.x 不再兼容 IE6逻炊、7、8瀏覽器犁享，這樣做的目的是為了兼容移動端開發(fā)余素。由于減少了一些代碼，使得該版本比 jQuery 1.x 更小炊昆、更快桨吊。
jQuery 每一個(gè)系列版本分為：壓縮版(compressed) 與 開發(fā)版(development)，我們在開發(fā)過程中使用開發(fā)版（開發(fā)版本便于代碼修改及調(diào)試）凤巨，項(xiàng)目上線發(fā)布使用壓縮版（因?yàn)閴嚎s版本體積更小视乐，效率更快）】
- 使用：
1）引入jQuery框架（http://www.jquery.org下載），min為去掉所有格式的壓縮版磅甩；
<script language="javascript" src="js/jquery-1.4.1.min.js"></script>
2）用選擇器查找要操作的節(jié)點(diǎn)（該節(jié)點(diǎn)會被封裝成一個(gè)jQuery對象炊林，并返回）
var $obj=$(‘#d1’);//ID選擇器，查找的節(jié)點(diǎn)ID為d1
3）調(diào)用jQuery對象的方法或者屬性
$obj.css('font-size','60px');//調(diào)用jQuery的css()方法
【注意：jQuery是一個(gè)大的匿名函數(shù)卷要，且內(nèi)部有很多函數(shù)（類似Java中的內(nèi)部類）渣聚，它的大部分函數(shù)返回對象都是jQuery對象（它自己），所以可以繼續(xù)“．”僧叉；】
- jQuery對象與DOM對象相互轉(zhuǎn)換：
1）dom —> jQuery：$(dom)即可奕枝；如：var obj=document.getElementById(“id”); var $obj=$(obj);
2）jQuery —> dom：① $obj.get(0); ② $obj.get()[0];
【注意：Dom對象與jQuery對象是不同的∑慷椋】 - 同時(shí)使用prototype與jQuery:
1）先導(dǎo)入prototype.js隘道，再導(dǎo)入jQuery.js；//必須注意順序郎笆；
2）將jQuery的$函數(shù)換一個(gè)名字：var $a=jQuery.noConflict();//注意大小寫 - EL表達(dá)式與jQuery表達(dá)式的區(qū)別：
1）${}：EL表達(dá)式谭梗，在服務(wù)器端運(yùn)行（JSTL標(biāo)簽庫也在服務(wù)器端運(yùn)行，EL和JSTL標(biāo)簽庫本質(zhì)是Java代碼）宛蚓。
2）$()：jQuery函數(shù)激捏，在瀏覽器中運(yùn)行（JavaScript也在瀏覽器中運(yùn)行）。
選擇器
jQuery模仿CSS選擇器的語法提供了一種用來方便查找要操作的節(jié)點(diǎn)的語法規(guī)則凄吏。
基本選擇器：
1）#id：ID選擇器远舅，如：$(‘#d1').css('color','red');
2）.class：類選擇器，如：$('.s1').css('font-size','60px');
3）element：元素選擇器痕钢，如：$(‘div').css('font-size','60px');
4）selector1,selector2...selectorn：選擇器合并图柏，如：$(‘#d1,p').css('font-size','60px');
5）：所有選擇器，如：$('').css('font-size','60px');
【注意：當(dāng)jQuery選擇器查找到了多個(gè)DOM節(jié)點(diǎn)任连，則仍然是封裝成“一個(gè)”jQuery對象蚤吹，在調(diào)用jQuery對象的屬性或者方法時(shí)，默認(rèn)情況下随抠，會作用于底層所有的DOM節(jié)點(diǎn)之上距辆∮嗟瑁】
層次選擇器
1）select1 select2：所有后代（要符合select2的要求）。
如：$(‘#d1 div’).css('font-size','60px');
2）select1>select2：只考慮子節(jié)點(diǎn)（要符合select2的要求）跨算，孫子不管～
如：$(‘#d1>div').css('font-size','60px');
3）select1+select2：下一個(gè)兄弟（要符合select2的要求）爆土，兒子不管～
如：$(‘#d3+div').css('font-size','60px');
4）select1~select2：下面所有的兄弟（要符合select2的要求），上面的兄弟不管～兄弟中的兒子也不管～
如：$(‘#d2~div').css('background-color','yellow');
基本過濾選擇器
1）:first：第一行诸蚕。
2）:last：最后一行步势。
3）:not(selector)：把滿足要求的選擇器排除在外。
4）:even：偶數(shù)索引背犯，下標(biāo)從0開始坏瘩。
5）:odd：奇數(shù)索引，下標(biāo)從0開始漠魏。
6）:eq(index)：等于下標(biāo)的元素倔矾，下標(biāo)從0開始。
7）:gt(index)：大于下標(biāo)的元素柱锹，下標(biāo)從0開始哪自。
8）:lt(index)：小于下標(biāo)的元素，下標(biāo)從0開始禁熏。
- :header：選擇所有標(biāo)題元素壤巷；
10）:lang(language)：選擇指定語言的所有元素
11）:root：選擇該文檔的根元素 - :animated：選擇所有正在執(zhí)行動畫的元素
使用：如：$(‘#t1 tr:first’).css('background-color','#cccccc');
【注意：過濾器前是沒有空格的。是xx:first而不是xx :first瞧毙‰驶】
內(nèi)容過濾選擇器
1）:contains(text)：匹配包含給定文本的元素。
2）:empty：匹配所有不包含子元素或者文本的空元素宙彪。
3）:has(selector)：匹配含有選擇器所匹配的元素的元素矩动。
4）:parent：匹配含有子元素或者文本的元素（與empty正好相反）。
使用如：$('div:empty').css({'width':'400px', 'height':'80px','border':'2px solid red’});
可見性過濾器
1）:hidden 匹配所有不可見元素释漆，或者type為hidden的元素悲没。
2）:visible 匹配所有的可見元素。
屬性過濾器
1）[attribute]：有某個(gè)屬性的元素灵汪。如：$(‘div[id]').css('font-size','60px');
2）[attribute=value]：某個(gè)屬性的值與指定的值相同的元素。
如：$(‘div[id=d1]').css('font-size','60px');
3）[attribute!=value]：某個(gè)屬性的值與指定的值不相同的元素柑潦。
如：$(‘div[id!=d1]’).css(‘font-size','60px'); - [attr^=value]：用value開關(guān)的元素
- [attr$=value]：用value結(jié)尾的元素
- [attr|=value]：只包含value的元素
- [attr~=value]：查找有包含連字符和value的元素
- [attr*=value]：包含value的元素享言；
子元素過濾選擇器
1）:nth-child(index/even/odd)：對符合條件的每個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)作相同操作。
如：$('ul li:nth-child(2)’).css('font-size','60px');
【注意：子元素過濾器中index從1開始渗鬼±缆叮基本過濾器中eq的index從0開始∑┨ィ】
2）:first-child：選擇所有父元素下的第一個(gè)子元素差牛，如：$(‘.first-div a:first-clild’)
3）:last-child：選擇所有父元素下的最后一個(gè)子元素命锄，如：$('.first-div a:last-child’)
4）:nth-last-child(n)：選擇所有符合條件的第n個(gè)子元素，從最后一個(gè)開始
表單對象屬性過濾選擇器
1）:enabled：沒有被禁用偏化。
如：$('#form1 input:enabled’).attr('disabled',true);//設(shè)置屬性脐恩，可見元素為不可見
2）:disabled：被禁用。
如： $('#form1 input:disabled’).attr('disabled',false);//設(shè)置屬性侦讨，不可見元素為可見
3）:checked：單選框驶冒、多選框中被選中的選項(xiàng)。
如：alert($('#form2 input:checked’).val());//把值輸出韵卤，類似于value屬性
4）:selected：下拉列表中被選中的選項(xiàng)骗污。
如：alert($('#form3 option:selected').val());
表單選擇器
1）:input：input元素。
2）:text：文本框沈条。
3）:pasword：密碼框需忿。
4）:radio：單選。
5）:checkbox：多選蜡歹。
6）:submit：提交按鈕屋厘。
7）:image：圖片。
8）:reset：重置按鈕季稳。
9）:button：普通按鈕擅这。
10）:file：文件。
11）:hidden：隱藏域景鼠。
【注意：可組合使用仲翎，如 $(‘:input:text’)//所有input元素中類型為text的元素】
this選擇器
1）this：表示當(dāng)前的一個(gè)上下文對象是一個(gè)html對象，可以調(diào)用html對象所擁有的屬性和方法 - $(this)：代表的上下文對象是一個(gè)jQuery的上下文對象铛漓，可以調(diào)用jQuery的方法和屬性值溯香。
DOM操作
查詢：利用選擇器找到要操作的節(jié)點(diǎn)之后，獲得節(jié)點(diǎn)的值浓恶、屬性值玫坛、文本以及html內(nèi)容。
1）html()：html內(nèi)容包晰。如：alert($(‘#d1').html())湿镀，相當(dāng)于innerHTML屬性，下例中也會把span輸出（輸出標(biāo)記中的所有內(nèi)容）伐憾，即<span>hello jQuery</span>勉痴。
【$(document).ready(function() {$(“div”).html(“hello”);});//read的作用是等頁面加載完成】
2）text()：文本，如：alert($(‘#d1').text())树肃，相當(dāng)于innerText屬性蒸矛，返回一個(gè)字符串，包含所有匹配元素的合并文本。只輸出文本內(nèi)容hello jQuery（標(biāo)記中的文本內(nèi)容）雏掠。
3）val()：節(jié)點(diǎn)的值斩祭，如：alert($(‘#username’).val())，結(jié)果為文本框中輸入的值乡话。從用于設(shè)置表單的值摧玫，對select元素，若沒有選擇則返回null,若是多選則返回一個(gè)數(shù)組蚊伞。
4）attr()：屬性值席赂，如：alert($(‘#d1').attr('id'))，結(jié)果為d1时迫。
【注意：此外颅停，這幾個(gè)方法也可以用來修改節(jié)點(diǎn)的內(nèi)容、值掠拳、文本內(nèi)容癞揉、屬性值∧缗罚】
創(chuàng)建：$(html);//直接寫html語句即可喊熟，如：var $obj=$(‘<div>常</div>');
插入節(jié)點(diǎn)：
1）append()：向每個(gè)匹配的元素內(nèi)部最后追加內(nèi)容（添加的元素作為最后一個(gè)孩子。如：var $obj=$('<div>抗金英雄</div>'); $(‘body').append($obj);
appendTo()：把所有的匹配的元素追加到另一個(gè)姐刁，指定的元素集合中芥牌。如$(A).appendTo(B);//與append(B)的操作相反，這里是把A添加到B中聂使。
2）prepend()：向每個(gè)匹配的元素內(nèi)部最前添加內(nèi)容（添加的元素作為第一個(gè)孩子壁拉。如：var $obj=$('<div>抗金英雄</div>'); $(‘body').prepend($obj);
prependTo()：同appendTo()，插入方向不同柏靶。
3）after()：向每個(gè)匹配的元素之后插入內(nèi)容（在該元素之后添加兄弟節(jié)點(diǎn)）弃理。如：$(‘ul').after('<p>hello</p>');
4）before()：向每個(gè)匹配的元素之前插入內(nèi)容（在該元素之前添加兄弟節(jié)點(diǎn)）。如：$(‘ul').before('<p>hello</p>');
insertBefore()/insertAfter()：功能相同屎蜓，方向不一樣痘昌。
【注意：都可以簡化為：$(‘body').append/prepend/after/before('<div>抗金英雄</div>');】
刪除節(jié)點(diǎn)：
1）remove()：刪除節(jié)點(diǎn)(包括該節(jié)點(diǎn)所有子節(jié)點(diǎn))，如：$(‘ul li:eq(1)’).remove();
2）remove(selector)：刪除滿足selector的節(jié)點(diǎn)炬转，如：$('ul li').remove('#l2');
3）empty()：清空節(jié)點(diǎn)(并不刪除節(jié)點(diǎn)辆苔，只是清空所有節(jié)點(diǎn)內(nèi)容)，相當(dāng)于innerHTML=“”扼劈，如：$(‘ul li:eq(1)’).empty();
4）detach()：從當(dāng)前頁面中移除該元素驻啤，但保留這個(gè)元素的內(nèi)存模型對象。當(dāng)使用append后测僵，又會重新回到文檔流中街佑，且所有綁定的事件及附加的數(shù)據(jù)都會保留下來『纯浚【注意：是jQuery特有的方法】
復(fù)制節(jié)點(diǎn)：
1）clone()：復(fù)制節(jié)點(diǎn)（不復(fù)制行為）沐旨。
2）clone(true)：使復(fù)制的節(jié)點(diǎn)也具有行為（將事件處理代碼一塊復(fù)制）。
替換節(jié)點(diǎn)：
1）replaceWith(newContent)：用提供的內(nèi)容來集合中所有匹配的元素榨婆，并返回被刪除后的元素的集合磁携。
2）replaceAll(target)：用集合的元素替換每個(gè)目標(biāo)元素。功能同replaceWith()良风，但方向相反谊迄。
DOM包裹
1）wrap(wrappingElement/function)：將元素用其他元素包裹起來，即給它增加一個(gè)父元素烟央。如：$(‘p’).wrap(‘<div></div>’)
2）unwrap()：刪除選中元素的父元素统诺，保留自身（和兄弟元素）在原來的位置。如：$(‘p’).upwrap()
3）wrapAll(wrappingElement/function)：將集合中的元素都其他元素包裹起來疑俭，即增加一個(gè)父元素粮呢。如：對所有<p>添加一個(gè)<div>：$(‘p').wrapAll('<div></div>')
4）wrapInner(wrappingElement/function)：將合集是的元素內(nèi)部所有的子元素用其他元素包裹起來，并當(dāng)作指定元素的子元素钞艇。如：給<div>p元素</div>所有元素增加一個(gè)<p>包裹為<div><p>p元素<p></div>啄寡，$('div').wrapInner('<p></p>')
節(jié)點(diǎn)屬性：
1）attr('attrName')：讀取屬性。
2）attr(‘a(chǎn)ttrName','value')：設(shè)置一個(gè)屬性哩照。
3）attr({“attrName1":"value1","attrName2":"value2"})：設(shè)置多個(gè)屬性挺物。
【注意：此處屬性名可不用引號（單引或雙引），但屬性值必須用引號飘弧！不要把樣式當(dāng)屬性了识藤。】
4）removeAttr(‘a(chǎn)ttrName')：刪除屬性眯牧。
樣式操作：
1）attr('class','')或者attr('style','')：讀取和設(shè)置蹋岩。
如：$(‘#d1').attr('style','color:red;font-style:italic;');
2）addClass(‘’)：追加。不會替換現(xiàn)代戰(zhàn)爭樣式類名学少，只是簡單的添加一個(gè)樣式類名到元素上剪个，如：$(‘#d1’).addClass('s1 s2’);//追加s1和s2兩種樣式
3）removeClass('') ：移除。如：$(‘#d1').removeClass('s1');//移除樣式s1
4）removeClass('s1 s2 ...sn') ：移除多個(gè)樣式版确。
如：$('#d1').removeClass('s1 s2');//移除樣式s1和s2
5）removeClass()：刪除所有樣式扣囊。
6）toggleClass('')：樣式來回切換，有該樣式就刪除绒疗，沒有就添加侵歇。
如：$('#d1').toggleClass('s3');//樣式s3一會有一會沒（來回切換）
7）hasClass(‘’)：是否有某個(gè)樣式。
如：alert($('#d1').hasClass('s3'));//返回值true或false
8）css(‘')：只能讀取style樣式里某個(gè)屬性的值吓蘑。
【注意：注意事項(xiàng)：無法讀取某個(gè)樣式類惕虑》爻澹】
例如：<div id="d1" style="font-size:60px;" class="s3">hello jQuery</div>，則
alert($('#d1').css('font-size'));
只能讀出60px溃蔫，若寫alert($('#d1').css('s3'));則內(nèi)容為空健提，讀不出來。
9）css(‘’,'')：設(shè)置一個(gè)CSS樣式伟叛。如：$('#d1').css('border','1px solid red');
10）css({‘’:'','':''})：設(shè)置多個(gè)樣式私痹。
如：$('#d1').css({'border':'1px solid red’,'font-size':'50px'});
【注意：.addClass()是通過增加class名的方式，為外部樣式统刮；.css是內(nèi)聯(lián)樣式直接附加到元素上紊遵，故其優(yōu)先級要高于.class；一般靜態(tài)結(jié)構(gòu)侥蒙，都確定好了布局的規(guī)則可用addClass方法暗膜；若是動態(tài)HTML，不確定規(guī)則或常變化的情況下鞭衩，一般使用.css】
遍歷節(jié)點(diǎn)
1）children()：只考慮子元素（孩子）桦山，不考慮其它后代元素（孫子）
2）children(selector)：只考慮子元素（孩子），不考慮其它后代元素（孫子）醋旦，然后還要滿足selector的要求（再次過濾）
3）next()：下一個(gè)兄弟
4）next(selector)：下一個(gè)兄弟恒水，然后還要滿足selector的要求（再次過濾）
5）prev()：上一個(gè)兄弟
6）prev(selector)：上一個(gè)兄弟，然后還要滿足selector的要求（再次過濾）
7）siblings()：兄弟們（上下都算）
8）siblings(selector)：兄弟們（上下都算）饲齐，然后還要滿足selector的要求（再次過濾）
9）find(selector)：從某一種節(jié)點(diǎn)開始查找所有符合selector要求的后代
【注意：$('.item-ii').find('li') 等價(jià)于 $('li', '.item-ii')(找到類名為item-ii的標(biāo)簽下的li標(biāo)簽)】
10）parent()：父節(jié)點(diǎn)
11）parents()：所有祖先節(jié)點(diǎn)钉凌；parents(selector)：按條件找到祖先節(jié)點(diǎn)
12）closest(selector)：同parents()，向上找到第一個(gè)匹配的元素捂人。御雕，區(qū)別在于：parents()始于父元素，closest()始于當(dāng)前元素滥搭；parents()一直向上找到根元素酸纲，返回一個(gè)集合，closest()遍歷到第一個(gè)匹配的元素瑟匆，返回一個(gè)元素或空闽坡。
13）add()：添加新元素，并幾乎可接受斜體的$(),包括現(xiàn)代戰(zhàn)爭jQuery選擇器表達(dá)式愁溜，DOM元素或HTML片段
14）each()：類似一個(gè)for循環(huán)迭代器疾嗅，迭代jQuery元素集合中的每個(gè)元素。
博客地址：Web基礎(chǔ)之jQuery（一）
