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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

jQuery

第三章：基本語法、選擇器

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

$(document).ready(function(){alert("我欲奔赴沙場征戰(zhàn)jQuery，勢必攻克之！");});</script>為頁面加載事件綁定方法window.onload$(document).ready()執(zhí)行時機必須等待網頁中所有的內容加載完畢后（包括圖片、flash、視頻等）才能執(zhí)行網頁中所有DOM文檔結構繪制完畢后即刻執(zhí)行，可能與DOM元素關聯(lián)的內容（圖片、flash、視頻等）并沒有加載完編寫個數同一頁面不能同時編寫多個同一頁面能同時編寫多個DOM模型瀏覽器把HTML文檔的元素轉換成節(jié)點對象，所有節(jié)點組成了一個樹狀結構以對象描述文檔的方式就是DOM節(jié)點對象就被稱為DOM對象節(jié)點類型元素節(jié)點：文檔中的所有元素<h2>……</h2>

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

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

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

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

;

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

jQuery語法結構-示例<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簡介</li> <li>jQuery語法</li> </ul></body>為元素添加類樣式常用語法舉例css("屬性","屬性值")為元素設置CSS樣式的值addClass()為元素添加類樣式next()獲得元素其后緊鄰的同輩元素$(document).ready(function(){$("h2").click(function(){ $("h2").css("background-color","#CCFFFF").next().css("display","block"); });});</script><h2>什么是受益人?</h2><p> <strong>解答：</strong>

受益人是指人身保險中由被保險人或者…..</p>練習-制作幫助中心問答特效需求說明點擊標題后，顯示回答的內容，同時標題加上背景色DOM對象轉jQuery對象使用$()函數進行轉化：$(DOM對象)注意vartxtName=document.getElementById("txtName");//DOM對象var$txtName=$(txtName);//jQuery對象jQuery對象命名一般約定以$開頭在事件中經常使用$(this)，this是觸發(fā)該事件的對象jQuery對象轉DOM對象jQuery對象是一個類似數組的對象，可以通過[index]的方法得到相應的DOM對象通過get(index)方法得到相應的DOM對象var$txtName=$("#txtName");//jQuery對象vartxtName=$txtName[0];//DOM對象var$txtName=$("#txtName");//jQuery對象vartxtName=$txtName.get(0);//DOM對象$(document).ready(function(){ varh1=document.getElementById("title"); var$h1=$(h1); $h1.click(function(){ alert('非常滿意'); });});....<h1id='title'>請為我們的服務做出評價</h1>jQuery選擇器jQuery選擇器類似于CSS選擇器，用來選取網頁中的元素獲取并設置網頁中所有<h3>元素的背景“h3”為選擇器語法，必須放在$()中$(“h3”)返回jQuery對象css()是為jQuery對象設置樣式的方法$("h3").css("background","#09F");jQuery選擇器分類jQuery選擇器功能強大，分類如下類CSS選擇器基本選擇器層次選擇器屬性選擇器過濾選擇器基本過濾選擇器可見性過濾選擇器基本選擇器基本選擇器標簽選擇器、類選擇器、ID選擇器、并集選擇器、交集選擇器和全局選擇器名稱語法構成描述示例標簽選擇器element根據給定的標簽名匹配元素$("h2"

)選取所有h2元素類選擇器.class根據給定的class匹配元素$(".title")選取所有class為title的元素ID選擇器#id根據給定的id匹配元素$("#title")選取id為title的元素并集選擇器selector1,selector2,...,selectorN將每一個選擇器匹配的元素合并后一起返回$("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>熱門排行</h3><dl> <dt><imgsrc="images/case_1.gif/></dt> <ddclass="title">斗地主</dd> <dd>休閑游戲</dd> <dd>QQ斗地主是國內同時在線人......</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>元素層次選擇器層次選擇器通過DOM元素之間的層次關系來獲取元素名稱語法構成描述示例后代選擇器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>全部旅游產品分類</h2> <dl> <dt>北京周邊旅游<span>特價</span></dt> <dd><ahref="#">按天數</a><ahref="#">海邊旅游</a><ahref="#">草原</a></dd> </dl> <dl> <dt>景點門票</dt> <dd><ahref="#">名勝</a><ahref="#">暑期</a><ahref="#">樂園</a></dd> <dd><ahref="#">山水</a><ahref="#">雙休</a></dd> </dl> <span>更多分類</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"); });});屬性選擇器屬性選擇器通過HTML元素的屬性來選擇元素名稱語法構成描述示例屬性選擇器[attribute]選取包含給定屬性的元素$("[href]"

)選取含有href屬性的元素[attribute=value]選取等于給定屬性是某個特定值的元素$("[href='#']"

)選取href屬性值為“#”的元素[attribute

!=value]選取不等于給定屬性是某個特定值的元素$("[href

!='#']"

)選取href屬性值不為“#”的元素[attribute^=value]選取給定屬性是以某些特定值開始的元素$("[href^='en']"

)選取href屬性值以en開頭的元素[attribute$=value]選取給定屬性是以某些特定值結尾的元素$("[href$='.jpg']"

)選取href屬性值以.jpg結尾的元素[attribute*=value]選取給定屬性是以包含某些值的元素$("[href*='txt']"

)選取href屬性值中含有txt的元素[selector][selector2][selectorN]選取滿足多個條件的復合屬性的元素$("li[id][title=新聞要點]"

)選取含有id屬性和title屬性為新聞要點的<li>元素屬性選擇器<divid="box"><h2class="odds"title="cartoonlist">動畫列表</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">黑貓警長</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開頭的元素

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

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

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

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

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

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

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

)選取索引是奇數的所有<li>元素基本過濾選擇器基本過濾選擇器可以根據索引的值選取元素名稱語法構成描述示例基本過濾選擇器:eq(index)選取索引等于index的元素（index從0開始）$("li:eq(1)"

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

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

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

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

)選取網頁中所有標題元素:focus選取當前獲取焦點的元素$(":focus"

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

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

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

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

//$("li:odd").css("background-color","#09F");//索引值為奇數的<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”);//所有標題元素

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

});});基本過濾選擇器示例可見

溫馨提示

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

評論

0/150

提交評論