#JQuery基礎(chǔ)
1.?Javascript類(lèi)的實(shí)現(xiàn)方式
????1.?Object方式
????????* Objecet是所有類(lèi)的父類(lèi)，可以使用Object表示其他類(lèi)
????2.?函數(shù)方式
????????* 函數(shù)名作為類(lèi)名，函數(shù)內(nèi)部包含的屬性和方法作為類(lèi)成員
2.?this的作用
* this表示當(dāng)前作用域下的對(duì)象
* 不同作用域下this表示的對(duì)象不同
????????* 在函數(shù)中指向的是window
????????* 在方法中指向的是調(diào)用該方法的對(duì)象
3.?對(duì)象類(lèi)型的判斷
????1.?typeof函數(shù)
????????* 返回對(duì)象的具體類(lèi)型
????2.?instanceof函數(shù)
????????* 判斷對(duì)象是否是某種類(lèi)型的實(shí)例
4.?在頁(yè)面中引入jQuery
????```
????????<script src="js/jquery-3.1.0.js" type="text/javascript"></script>
????```
????注意：一定要放在前面(可放在header中)
5.?jQuery基礎(chǔ)語(yǔ)法
????1.?$(document).ready()與window.onload類(lèi)似，但也有區(qū)別
????| |window.onload|$(document).ready()|
????|---|---|---|
????|執(zhí)行時(shí)機(jī)|必須等待網(wǎng)頁(yè)中所有的內(nèi)容加載完畢后（包括圖片、flash、視頻等）才能執(zhí)行|網(wǎng)頁(yè)中所有DOM文檔結(jié)構(gòu)繪制完畢后即刻執(zhí)行，可能與DOM元素關(guān)聯(lián)的內(nèi)容（圖片、flash、視頻等）并沒(méi)有加載完|
????|編寫(xiě)個(gè)數(shù)|同一頁(yè)面不能編寫(xiě)多個(gè)|同一頁(yè)面能編寫(xiě)多個(gè)|
????|簡(jiǎn)化寫(xiě)法|無(wú)|$(function(){//執(zhí)行代碼})?;|
6.?jQuery語(yǔ)法結(jié)構(gòu)
????```$(selector).action()?;```
* 工廠函數(shù)$()：將DOM對(duì)象轉(zhuǎn)化為jQuery對(duì)象
* 選擇器 selector：獲取需要操作的DOM 元素
* 方法action()：jQuery中提供的方法
????????示例：```$("#current").addClass("current"); ```
7.?jQuery代碼風(fēng)格
????1.?“$”等同于“ jQuery ”
????????```
????????????$(document).ready()=jQuery(document).ready()
????????????$(function(){...})=jQuery (function(){...})
????????```
????2.?操作連綴書(shū)寫(xiě)
????????```
????????????$("h2").css("background-color","#CCFFFF").next().css("display","block");
????????```
????3.?DOM對(duì)象和jQuery對(duì)象
????????* DOM對(duì)象：直接使用JavaScript獲取的節(jié)點(diǎn)對(duì)象
????????????```
????????????????var objDOM=document.getElementById("title");?
????????????????var objHTML=objDOM.innerHTML;?
????????????```
????????* jQuery對(duì)象：使用jQuery包裝DOM對(duì)象 后產(chǎn)生的對(duì)象，它能夠使用jQuery中的方法
????????????```
????????????????$("#title").html( );
????????????????等同于
????????????????document.getElementById("title").innerHTML;
????????????```
????????*??提示：DOM對(duì)象和jQuery對(duì)象分別擁有一套獨(dú)立的方法，不能混用
????4.?使用$()函數(shù)進(jìn)行轉(zhuǎn)化：$(DOM對(duì)象)
????????```
????????????var txtName =document.getElementById("txtName"); //DOM對(duì)象
????????????var $txtName =$(txtName);???//jQuery對(duì)象
????????```
????????**注意：jQuery對(duì)象命名一般約定以$開(kāi)頭
????5.?jQuery對(duì)象轉(zhuǎn)DOM對(duì)象
?????????* jQuery對(duì)象是一個(gè)類(lèi)似數(shù)組的對(duì)象，可以通過(guò)[index]的方法得到相應(yīng)的DOM對(duì)象
????????????```
????????????????var $txtName =$ ("#txtName");??????//jQuery對(duì)象
????????????????var txtName =$txtName[0];??????????//DOM對(duì)象
????????????```
????????* 通過(guò)get(index)方法得到相應(yīng)的DOM對(duì)象
????????????```
????????????????var $txtName =$("#txtName");????????//jQuery對(duì)象
????????????????var txtName =$txtName.get(0);???????//DOM對(duì)象
????????????```
8.??jQuery選擇器
????1.?基本選擇器包括標(biāo)簽選擇器、類(lèi)選擇器、ID選擇器、并集選擇器、交集選擇器和全局選擇器
????????|名稱(chēng)|語(yǔ)法構(gòu)成|描述|示例|
????????|---|:---:|:---:|---:|
????????|標(biāo)簽選擇器|element|根據(jù)給定的標(biāo)簽名匹配元素|$("h2"?)選取所有h2元素|
????????|類(lèi)選擇器|.class|根據(jù)給定的class匹配元素|$(" .title")選取所有class為title的元素|
????????|ID選擇器|#id|根據(jù)給定的id匹配元素|$(" #title")選取id為title的元素|
????????|并集選擇器|selector1,selector2,...,selectorN|將每一個(gè)選擇器匹配的元素合并后一起返回|$("div,p,.title"?)選取所有div、p和擁有class為title的元素|
????????|交集選擇器|element.class或element#id|匹配指定class或id的某元素或元素集合|$("h2.title")選取所有擁有class為title的h2元素|
????????|全局選擇器|*|匹配所有元素|$("*"?)選取所有元素|
????2.?層次選擇器通過(guò)DOM 元素之間的層次關(guān)系來(lái)獲取元素
????????|名稱(chēng)|語(yǔ)法構(gòu)成|描述|示例|
????????|---|---|---|---|
????????|后代選擇器|ancestor descendant|選取ancestor元素里的所有descendant（后代）元素|$("#menu span"?)選取#menu下的\<span>元素|
????????|子選擇器|parent>child|選取parent元素下的child（子）元素|$(" #menu>span"?)選取#menu的子元素\<span>|
????????|相鄰元素選擇器|prev+next|選取緊鄰prev元素之后的next元素|$(" h2+dl "?)選取緊鄰\<h2>元素之后的同輩元素\<dl>|
????????|同輩元素選擇器|prev~sibings|選取prev元素之后的所有siblings元素|$(" h2~dl "?)選取\<h2>元素之后所有的同輩元素\<dl>|
????????|屬性選擇器|[attribute]|選取包含給定屬性的元素|$(" [href]"?)選取含有href屬性的元素|
????????|屬性選擇器|[attribute=value]|選取等于給定屬性是某個(gè)特定值的元素|$(" [href ='#']"?)選取href屬性值為“#”的元素|
????????|屬性選擇器|[attribute?!=value]|選取不等于給定屬性是某個(gè)特定值的元素|$(" [href?!='#']"?)選取href屬性值不為“#”的元素|
????????|屬性選擇器|[attribute^=value]|選取給定屬性是以某些特定值開(kāi)始的元素|$(" [href^='en']"?)選取href屬性值以en開(kāi)頭的元素|
????????|屬性選擇器|[attribute$=value]|選取給定屬性是以某些特定值結(jié)尾的元素|$(" [href$='.jpg']"?)選取href屬性值以.jpg結(jié)尾的元素|
????????|屬性選擇器|[attribute*=value]|選取給定屬性是以包含某些值的元素|$(" [href* ='txt']"?)選取href屬性值中含有txt的元素|
????????|屬性選擇器|[selector] [selector2] [selectorN]|選取滿足多個(gè)條件的復(fù)合屬性的元素|$("li[id][title=新聞要點(diǎn)]"?)選取含有id屬性和title屬性為新聞要點(diǎn)的\<li>元素|
????3.?過(guò)濾選擇器通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選元素
????????* 語(yǔ)法特點(diǎn)是使用“:”，如使用$(“l(fā)i:first”)來(lái)選取第一個(gè)li元素
????????* 基本過(guò)濾選擇器、可見(jiàn)性過(guò)濾選擇器、內(nèi)容過(guò)濾選擇器、子元素過(guò)濾選擇器……
????????* 基本過(guò)濾選擇器可以選取第一個(gè)元素、最后一個(gè)元素、索引為偶數(shù)或奇數(shù)的元素
????????????|名稱(chēng)|語(yǔ)法構(gòu)成|描述|示例|
????????????|---|---|---|---|
????????????|基本過(guò)濾選擇器|:first|選取第一個(gè)元素|$(" li:first"?)選取所有\(zhòng)<li>元素中的第一個(gè)\<li>元素|
????????????|基本過(guò)濾選擇器|:last|選取最后一個(gè)元素|$(" li:last"?)選取所有<li>元素中的最后一個(gè)\<li>元素|
????????????|基本過(guò)濾選擇器|:even|選取索引是偶數(shù)的所有元素(index從0開(kāi)始)|$(" li:even"?)選取索引是偶數(shù)的所有\(zhòng)<li>元素|
????????????|基本過(guò)濾選擇器|:odd|選取索引是奇數(shù)的所有元素（index從0開(kāi)始）|$(" li:odd"?)選取索引是奇數(shù)的所有\(zhòng)<li>元素|
????????????|基本過(guò)濾選擇器|:eq(index)|選取索引等于index的元素（index從0開(kāi)始）|$("li:eq(1)"?)選取索引等于1的\<li>元素|
????????????|基本過(guò)濾選擇器|:gt(index)|選取索引大于index的元素（index從0開(kāi)始）|$(" li:gt(1)"?)選取索引大于1的\<li>元素（注：大于1，不包括1）|
????????????|基本過(guò)濾選擇器|:lt(index)|選取索引小于index的元素（index從0開(kāi)始）|$(“l(fā)i:lt(1)”?)選取索引小于1的\<li>元素（注：小于1，不包括1）|
????????????|基本過(guò)濾選擇器|:not(selector)|選取去除所有與給定選擇器匹配的元素|$(" li:not(.three)"?)選取class不是three的元素|
????????????|基本過(guò)濾選擇器|:header|選取所有標(biāo)題元素，如h1~h6|$(":header"?)選取網(wǎng)頁(yè)中所有標(biāo)題元素|
????????????|基本過(guò)濾選擇器|:focus|選取當(dāng)前獲取焦點(diǎn)的元素|$(":focus"?)選取當(dāng)前獲取焦點(diǎn)的元素|
????????* 可見(jiàn)性過(guò)濾選擇器可以通過(guò)元素顯示狀態(tài)來(lái)選取元素
????????????|名稱(chēng)|語(yǔ)法構(gòu)成|描述|示例|
????????????|---|---|---|---|
????????????|可見(jiàn)性過(guò)濾選擇器|:visible|選取所有可見(jiàn)的元素|$(":visible"?)選取所有可見(jiàn)的元素|
????????????|可見(jiàn)性過(guò)濾選擇器|:hidden|選取所有隱藏的元素|$(":hidden"?) 選取所有隱藏的元素|
????????????* 示例 ```$("?p:hidden").show();```獲取隱藏的<p>元素，使其顯示
????????????* 示例 ```$("?p:visible").hide();```獲取顯示的<p>元素，使其隱藏
9.?jQuery的樣式設(shè)置
????1.?使用css()為指定的元素設(shè)置樣式值
????????```css(name,value)```
????????示例：$(this).css("border","5px solid #f5f5f5");
????2.?使用css()添加邊框效果
????3.?追加樣式
????????```addClass(class)或addClass(class1 class2 … classN)```
????4.?移除樣式
????????```removeClass(“style2 ”)或removeClass("style1 style2 ")```
????5.?toggleClass()模擬了addClass()與removeClass()實(shí)現(xiàn)樣式切換的過(guò)程
????6.?html()可以對(duì)HTML代碼進(jìn)行操作，類(lèi)似于JS中的innerHTML
????????示例： $("div.left").html("<div class='content'>…</div>");
????7.?text()可以獲取或設(shè)置元素的文本內(nèi)容
????8.?html()和text() 的區(qū)別如下：
????????|語(yǔ)法|參數(shù)|功能|
????????|html()|無(wú)參數(shù)|用于獲取第一個(gè)匹配元素的HTML內(nèi)容或文本內(nèi)容|
????????|html(content)|content參數(shù)為元素的HTML內(nèi)容|用于設(shè)置所有匹配元素的HTML內(nèi)容或文本內(nèi)容|
????????|text()|無(wú)參數(shù)|用于獲取所有匹配元素的文本內(nèi)容|
????????|text (content)|content參數(shù)為元素的文本內(nèi)容|用于設(shè)置所有匹配元素的文本內(nèi)容|
????9.?val()可以獲取或設(shè)置元素的value屬性值
