第3章：jQuery基本語(yǔ)法、選擇器_第1頁(yè)
第3章：jQuery基本語(yǔ)法、選擇器_第2頁(yè)
第3章：jQuery基本語(yǔ)法、選擇器_第3頁(yè)
第3章：jQuery基本語(yǔ)法、選擇器_第4頁(yè)
第3章：jQuery基本語(yǔ)法、選擇器_第5頁(yè)
已閱讀5頁(yè)，還剩32頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

jQuery

第三章：基本語(yǔ)法、選擇器

目錄jQuery的基本語(yǔ)法jQuery對(duì)象與DOM對(duì)象的相互轉(zhuǎn)換使用jQuery實(shí)現(xiàn)簡(jiǎn)單特效選擇器基本選擇器層次選擇器屬性選擇器基本過(guò)濾選擇器可見(jiàn)性過(guò)濾選擇器jQuery簡(jiǎn)介jQuery由美國(guó)人JohnResig于2006年創(chuàng)建jQuery是目前最流行的JavaScript程序庫(kù)，它是對(duì)JavaScript對(duì)象和函數(shù)的封裝jQuery能做什么訪(fǎng)問(wèn)和操作DOM元素控制頁(yè)面樣式對(duì)頁(yè)面事件進(jìn)行處理擴(kuò)展新的jQuery插件與Ajax技術(shù)完美結(jié)合jQuery的優(yōu)勢(shì)體積小，壓縮后只有100KB左右強(qiáng)大的選擇器出色的DOM封裝可靠的事件處理機(jī)制出色的瀏覽器兼容性使用隱式迭代簡(jiǎn)化編程豐富的插件支持jQuery庫(kù)文件jQuery庫(kù)分開(kāi)發(fā)版和發(fā)布版在頁(yè)面中引入jQuery名稱(chēng)大小說(shuō)明jquery-1.版本號(hào).js（開(kāi)發(fā)版）約268KB完整無(wú)壓縮版本，主要用于測(cè)試、學(xué)習(xí)和開(kāi)發(fā)jquery-1.版本號(hào).min.js（發(fā)布版）約91KB經(jīng)過(guò)工具壓縮或經(jīng)過(guò)服務(wù)器開(kāi)啟Gzip壓縮，主要應(yīng)用于發(fā)布的產(chǎn)品和項(xiàng)目<scriptsrc="js/jquery-1.8.3.js"type="text/javascript"></script>jQuery基本語(yǔ)法使用jQuery彈出提示框$(document).ready()與window.onload的區(qū)別<script>

$(document).ready(function(){alert("我欲奔赴沙場(chǎng)征戰(zhàn)jQuery，勢(shì)必攻克之！");});</script>為頁(yè)面加載事件綁定方法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è)面不能同時(shí)編寫(xiě)多個(gè)同一頁(yè)面能同時(shí)編寫(xiě)多個(gè)DOM模型瀏覽器把HTML文檔的元素轉(zhuǎn)換成節(jié)點(diǎn)對(duì)象，所有節(jié)點(diǎn)組成了一個(gè)樹(shù)狀結(jié)構(gòu)以對(duì)象描述文檔的方式就是DOM節(jié)點(diǎn)對(duì)象就被稱(chēng)為DOM對(duì)象節(jié)點(diǎn)類(lèi)型元素節(jié)點(diǎn)：文檔中的所有元素<h2>……</h2>

文本節(jié)點(diǎn)：元素節(jié)點(diǎn)內(nèi)的文本內(nèi)容<p>你最喜歡的食品是？</p>

屬性節(jié)點(diǎn)：元素節(jié)點(diǎn)的子節(jié)點(diǎn)<ptitle="提示">……</p>

DOM對(duì)象和jQuery對(duì)象DOM對(duì)象：直接使用JavaScript獲取的節(jié)點(diǎn)對(duì)象

jQuery對(duì)象：使用jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象，它能夠使用jQuery中的方法varobjDOM=document.getElementById("title");varobjHTML=objDOM.innerHTML;$("#title").html();等同于document.getElementById("title").innerHTML;jQuery語(yǔ)法結(jié)構(gòu)語(yǔ)法工廠(chǎng)函數(shù)$()：將DOM對(duì)象轉(zhuǎn)化為jQuery對(duì)象選擇器selector：獲取需要操作的DOM元素方法action()：jQuery中提供的方法，其中包括綁定事件處理的方法“$”等同于“jQuery”$(selector).action()

;

$(document).ready()=jQuery(document).ready()$(function(){...})=jQuery(function(){...})

jQuery語(yǔ)法結(jié)構(gòu)-示例<styletype="text/css">li{list-style:none;line-height:22px;cursor:pointer;}.current{background:#6cf;font-weight:bold;color:#fff;}</style><scriptsrc="js/jquery-1.8.3.js"type="text/javascript"></script><scripttype="text/javascript">$(document).ready(function(){ $("li").click(function(){ $("#current").addClass("current"); });});</script></head><body> <ul> <liid="current">jQuery簡(jiǎn)介</li> <li>jQuery語(yǔ)法</li> </ul></body>為元素添加類(lèi)樣式常用語(yǔ)法舉例css("屬性","屬性值")為元素設(shè)置CSS樣式的值addClass()為元素添加類(lèi)樣式next()獲得元素其后緊鄰的同輩元素$(document).ready(function(){$("h2").click(function(){ $("h2").css("background-color","#CCFFFF").next().css("display","block"); });});</script><h2>什么是受益人?</h2><p> <strong>解答：</strong>

受益人是指人身保險(xiǎn)中由被保險(xiǎn)人或者…..</p>練習(xí)-制作幫助中心問(wèn)答特效需求說(shuō)明點(diǎn)擊標(biāo)題后，顯示回答的內(nèi)容，同時(shí)標(biāo)題加上背景色DOM對(duì)象轉(zhuǎn)jQuery對(duì)象使用$()函數(shù)進(jìn)行轉(zhuǎn)化：$(DOM對(duì)象)注意vartxtName=document.getElementById("txtName");//DOM對(duì)象var$txtName=$(txtName);//jQuery對(duì)象jQuery對(duì)象命名一般約定以$開(kāi)頭在事件中經(jīng)常使用$(this)，this是觸發(fā)該事件的對(duì)象jQuery對(duì)象轉(zhuǎn)DOM對(duì)象jQuery對(duì)象是一個(gè)類(lèi)似數(shù)組的對(duì)象，可以通過(guò)[index]的方法得到相應(yīng)的DOM對(duì)象通過(guò)get(index)方法得到相應(yīng)的DOM對(duì)象var$txtName=$("#txtName");//jQuery對(duì)象vartxtName=$txtName[0];//DOM對(duì)象var$txtName=$("#txtName");//jQuery對(duì)象vartxtName=$txtName.get(0);//DOM對(duì)象$(document).ready(function(){ varh1=document.getElementById("title"); var$h1=$(h1); $h1.click(function(){ alert('非常滿(mǎn)意'); });});....<h1id='title'>請(qǐng)為我們的服務(wù)做出評(píng)價(jià)</h1>jQuery選擇器jQuery選擇器類(lèi)似于CSS選擇器，用來(lái)選取網(wǎng)頁(yè)中的元素獲取并設(shè)置網(wǎng)頁(yè)中所有<h3>元素的背景“h3”為選擇器語(yǔ)法，必須放在$()中$(“h3”)返回jQuery對(duì)象css()是為jQuery對(duì)象設(shè)置樣式的方法$("h3").css("background","#09F");jQuery選擇器分類(lèi)jQuery選擇器功能強(qiáng)大，分類(lèi)如下類(lèi)CSS選擇器基本選擇器層次選擇器屬性選擇器過(guò)濾選擇器基本過(guò)濾選擇器可見(jiàn)性過(guò)濾選擇器基本選擇器基本選擇器標(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元素全局選擇器*匹配所有元素$("*"

)選取所有元素基本選擇器<divid="box">id為box的div<h2class="title">class為title的h2</h2><h3class="title">class為title的h3</h3><h3>熱門(mén)排行</h3><dl> <dt><imgsrc="images/case_1.gif/></dt> <ddclass="title">斗地主</dd> <dd>休閑游戲</dd> <dd>QQ斗地主是國(guó)內(nèi)同時(shí)在線(xiàn)人......</dd></dl></div>$(function(){$("h2").click(function(){ $("h3").css("background-color","#09F");

//$(".title").css("background","#09F"); //$("#box").css("background","#09F"); //$("h2,dt,.title").css("background","#09F");//并集選擇器 //$("h3.title").css("background","#09F");//交集選擇器 //$("*").css("color","red");//全局選擇器});});所有class為title的<h3>元素層次選擇器層次選擇器通過(guò)DOM元素之間的層次關(guān)系來(lái)獲取元素名稱(chēng)語(yǔ)法構(gòu)成描述示例后代選擇器ancestordescendant選取ancestor元素里的所有descendant（后代）元素$("#menuspan"

)選取#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>層次選擇器<divid="menu"><h2>全部旅游產(chǎn)品分類(lèi)</h2> <dl> <dt>北京周邊旅游<span>特價(jià)</span></dt> <dd><ahref="#">按天數(shù)</a><ahref="#">海邊旅游</a><ahref="#">草原</a></dd> </dl> <dl> <dt>景點(diǎn)門(mén)票</dt> <dd><ahref="#">名勝</a><ahref="#">暑期</a><ahref="#">樂(lè)園</a></dd> <dd><ahref="#">山水</a><ahref="#">雙休</a></dd> </dl> <span>更多分類(lèi)</span></div>樣式與jQuery代碼層次選擇器<styletype="text/css">*{margin:0;padding:0;line-height:30px;}#menu{border:2pxsolid#03C;padding:10px;}a{text-decoration:none;margin-right:5px;}span{font-weight:bold;padding:3px;}h2{margin:10px0;}</style>$(function(){ $("h2").click(function(){ $("#menuspan").css("background-color","#09F");

//$("#menu>span").css("background-color","#09F"); //$("h2+dl").css("background-color","#09F"); //$("h2~dl").css("background-color","#09F"); });});屬性選擇器屬性選擇器通過(guò)HTML元素的屬性來(lái)選擇元素名稱(chēng)語(yǔ)法構(gòu)成描述示例屬性選擇器[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]選取滿(mǎn)足多個(gè)條件的復(fù)合屬性的元素$("li[id][title=新聞要點(diǎn)]"

)選取含有id屬性和title屬性為新聞要點(diǎn)的<li>元素屬性選擇器<divid="box"><h2class="odds"title="cartoonlist">動(dòng)畫(huà)列表</h2> <ul> <liclass="odds"title="kn_jp">名偵探柯南</li> <liclass="evens"title="hy_jp">火影忍者</li> <liclass="odds"title="ss_jp">死神</li> <liclass="evens"title="yj_jp">妖精的尾巴</li> <liclass="odds"title="yh_jp">銀魂</li> <liclass="evens"title="hm_da">黑貓警長(zhǎng)</li> <liclass="odds"title="xl_ds">仙履奇緣</li> </ul></div>#box{background-color:#FFF;border:2pxsolid#000;padding:5px;}屬性選擇器$(function(){$("h2").click(function(){$(“h2[title]”).css(“background-color”,“#09F”);//含有title屬性的<h2>元素

//$("[class=odds]").css("background-color","#09F");//class屬性的值為odds

//的元素

//$(“[id!=box]”).css(“background-color”,“#09F”);//id屬性的值不為box的元素

//$(“[title^=h]”).css(“background-color”,“#09F”);//title屬性的值中以h開(kāi)頭的元素

//$("[title$=jp]").css("background-color","#09F");//title屬性的值中以jp結(jié)尾的元素

//$("[title*=s]").css("background-color","#09F");//title屬性的值中含有s的元素

//$("li[class][title*=y]").css("background-color","#09F");//包含class屬性，//且title屬性的值中含有y的<li>元素

});});屬性選擇器也支持屬性值的模糊匹配過(guò)濾選擇器過(guò)濾選擇器通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選元素語(yǔ)法特點(diǎn)是使用“:”，如使用$(“l(fā)i:first”)來(lái)選取第一個(gè)li元素主要分類(lèi)如下：基本過(guò)濾選擇器可見(jiàn)性過(guò)濾選擇器表單對(duì)象過(guò)濾選擇器在后面課程中講解基本過(guò)濾選擇器基本過(guò)濾選擇器可以選取第一個(gè)元素、最后一個(gè)元素、索引為偶數(shù)或奇數(shù)的元素名稱(chēng)語(yǔ)法構(gòu)成描述示例基本過(guò)濾選擇器:first選取第一個(gè)元素$("li:first"

)選取所有<li>元素中的第一個(gè)<li>元素:last選取最后一個(gè)元素$("li:last"

)選取所有<li>元素中的最后一個(gè)<li>元素:even選取索引是偶數(shù)的所有元素（index從0開(kāi)始）$("li:even"

)選取索引是偶數(shù)的所有<li>元素:odd選取索引是奇數(shù)的所有元素（index從0開(kāi)始）$("li:odd"

)選取索引是奇數(shù)的所有<li>元素基本過(guò)濾選擇器基本過(guò)濾選擇器可以根據(jù)索引的值選取元素名稱(chēng)語(yǔ)法構(gòu)成描述示例基本過(guò)濾選擇器:eq(index)選取索引等于index的元素（index從0開(kāi)始）$("li:eq(1)"

)選取索引等于1的<li>元素:gt(index)選取索引大于index的元素（index從0開(kāi)始）$("li:gt(1)"

)選取索引大于1的<li>元素（注：大于1，不包括1）:lt(index)選取索引小于index的元素（index從0開(kāi)始）$(“l(fā)i:lt(1)”

)選取索引小于1的<li>元素（注：小于1，不包括1）基本過(guò)濾選擇器基本過(guò)濾選擇器還支持一些特殊的選擇方式名稱(chēng)語(yǔ)法構(gòu)成描述示例基本過(guò)濾選擇器:not(selector)選取去除所有與給定選擇器匹配的元素$("li:not(.three)"

)選取class不是three的元素:header選取所有標(biāo)題元素，如h1~h6$(":header"

)選取網(wǎng)頁(yè)中所有標(biāo)題元素:focus選取當(dāng)前獲取焦點(diǎn)的元素$(":focus"

)選取當(dāng)前獲取焦點(diǎn)的元素基本過(guò)濾選擇器$(function(){$("h2").click(function(){ $("li:first").css("background-color","#09F");//第1個(gè)<li>元素

//$("li:last").css("background-color","#09F");//最后一個(gè)<li>元素

//$("li:not(.three)").css("background-color","#09F");//class不為three的<li>元素

//$("li:even").css("background-color","#09F");//索引值為偶數(shù)的<li>元素

//$("li:odd").css("background-color","#09F");//索引值為奇數(shù)的<li>元素

//$("li:eq(1)").css("background-color","#09F");//索引值等于1的<li>元素

//$("li:gt(1)").css("background-color","#09F");//索引值大于1的<li>元素

//$("li:lt(1)").css("background-color","#09F");//索引值小于1的<li>元素

//$(“:header”).css(“background-color”,“#09F”);//所有標(biāo)題元素

//$(":focus").css("background-color","#09F");//當(dāng)前獲取焦點(diǎn)的元素

});});基本過(guò)濾選擇器示例可見(jiàn)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論