網(wǎng)頁特效技術(shù)第一講jquery選擇器

1、網(wǎng)站前臺(tái)設(shè)計(jì)第一講 JQuery選擇器本章目標(biāo)JQuery簡介JQuery代碼編寫JQuery選擇器應(yīng)用JQuery編寫程序1.1 JQuery簡介JQuery:目前使用最廣的一種JavaScript庫；Prototype：最早成型的JavaScript庫；Dojo ：提供了很多其它JavaScript庫沒有的功能，如離線存儲(chǔ)的API、生成圖標(biāo)的組件等；YUI：是Yahoo公司開發(fā)的一套完備的網(wǎng)頁開發(fā)程序集；Ext JS：利用jQuery等JavaScript框架作為基礎(chǔ)庫，Ext作為界面的擴(kuò)展庫來使用。JQuery優(yōu)勢:輕量級(jí)強(qiáng)大的選擇器出色的DOM操作的封裝可靠的事件處理機(jī)制完善的Ajax

2、出色的瀏覽器兼容鏈?zhǔn)讲僮餍袨閷优c結(jié)構(gòu)層分離豐富的插件支持1.1 JQuery簡介一、配置jQuery環(huán)境1、獲取jQuery庫 進(jìn)入jQuery官方網(wǎng)站 下載 jquery-1.5.1.min.js文件2、jQuery環(huán)境配置 將jquery-1.5.1.min.js文件放到網(wǎng)站上公共的位置3、在頁面中引入jQuery1.2 JQuery代碼編寫firstweb二、編寫第一個(gè)程序 1.2 JQuery代碼編寫myfirstweb $(document).ready(function()alert(Hello jQuery!); );這是第一個(gè)jQuery程序1.2 JQuery代碼編寫這段代碼

3、類似于JS中的window.onload方法，但有所區(qū)別，如下所示：$(document).ready(function()/);Window.onload$(document).ready()執(zhí)行時(shí)機(jī)必須等待網(wǎng)頁中所有內(nèi)容加載完畢后(包括圖片)才執(zhí)行網(wǎng)頁中所有DOM結(jié)構(gòu)繪制完畢后執(zhí)行編寫個(gè)數(shù)不能同時(shí)編寫多個(gè)能同時(shí)編寫多個(gè)，正確執(zhí)行簡化寫法無$(function(); 1.3 JQuery選擇器JQuery選擇器完全繼承CSS的風(fēng)格。優(yōu)點(diǎn)：1）簡潔的寫法 $() 選擇器函數(shù)，例： $(“#id”)=document.getElementById()$(“tagName”)=document.g

4、etElementsByTagName()2）支持CSS1到CSS3選擇器3）完善的處理機(jī)制 例如下代碼：testdocument.getElementById(“tt”).style.color=“red”;出錯(cuò)了！1.3 JQuery選擇器jQuery代碼：testif(document.getElementById(“tt”) document.getElementById(“tt”).style.color=“red”;JavaScript代碼：test $(“#tt”).css(“color”,”red”);使用jQuery獲取網(wǎng)頁中不存在的元素不會(huì)報(bào)錯(cuò)。 JQuery選擇器分為基本

5、選擇器、層次選擇器、過濾選擇器和表單選擇器。一、基本選擇器 基本選擇器通過id、class、標(biāo)簽名等來查找DOM元素。1.3 JQuery選擇器選擇器描述返回示例#id根據(jù)給定的id匹配一個(gè)元素單個(gè)元素$(“#test”).class根據(jù)給定的類名匹配元素集合元素$(“.test”)Element根據(jù)給定的元素名匹配元素集合元素$(“p”)*匹配所有的元素集合元素$(“*”)Selector1,selector2,selector3將第一個(gè)選擇器匹配到的元素合并在一起返回集合元素$(div,span,p.myclass)示例1：基本HTML代碼（1.2 html）1、改變id為one的元素的背

6、景色為紅色2、改變class為mini的所有元素的背景色為藍(lán)色3、改變?cè)孛麨閐iv的所有元素的背景色為黃色4、改變所有元素的背景色為灰色5、改變所有的span元素和id為two的元素的背景色為紫色1.3 JQuery選擇器二、層次選擇器選擇器描述返回示例$(“ancestor descendant”)選取ancestor里的所有descendant后代元素集合元素$(“div span”)$(“parent child”)選取parent元素下的child子元素集合元素$(“divspan”)$(prev+next)選取緊接在prev元素后的next元素集合元素$(“.one+div”)$(

7、prevsiblings)選取prev元素之后的所有siblings元素集合元素$(#twodiv)1.3 JQuery選擇器1.3 JQuery選擇器示例2：基本HTML代碼（1.2 html ）1、改變body內(nèi)所有的div的背景色為紅色2、改變body內(nèi)的子div的背景色為藍(lán)色3、改變class為one的下一個(gè)div兄弟元素的背景色為黃色4、改變id為two的元素后面的所有div兄弟元素背景色為灰色三、（1）基本過濾選擇器選擇器描述返回示例:first選取第一個(gè)元素單個(gè)元素$(“div:first”):last選取最后一個(gè)元素單個(gè)元素$(“div:last”):not(selector)

8、選取去除所有與給定選擇器匹配的元素集合元素$(“div:not(.myclass)”):even選取索引為偶數(shù)的所有元素集合元素$(“div:even”):odd選取索引為奇數(shù)的所有元素集合元素$(“div:odd”):eq(index)選取索引等于index的元素單個(gè)元素$(“div:eq(1)”):gt(index)選取索引大于index的元素單個(gè)元素$(“div:gt(1)”):lt(index)選取索引小于index的元素單個(gè)元素$(“div:lt(1)”):header選取所有的標(biāo)題元素集合元素$(“:header”):animated選取當(dāng)前正在執(zhí)行動(dòng)畫的所有元素集合元素$(“di

9、v:animated”)1.3 JQuery選擇器1.3 JQuery選擇器示例3：基本HTML代碼（1.2 html ）1、改變第1個(gè)（最后一個(gè)）div的背景色為紅色2、改變class不為one的背景色為藍(lán)色3、改變索引值為偶數(shù)（奇數(shù)）的div元素的背景色為黃色4、改變索引值等于(大于3、小于3)的div元素背景色為灰色5、改變所有的標(biāo)題元素的背景色為綠色（2）內(nèi)容過濾選擇器選擇器描述返回示例:contains(text)選取包含文本內(nèi)容text的元素集合元素$(“div:contains(我)”):empty選取不包含子元素或者文本的空元素集合元素$(“div:empty”):has(se

10、lector)選取含有選擇器所匹配的元素的元素集合元素$(“div:has(.myclass)”):parent選取含有子元素或者文本的元素集合元素$(“div:parent”)1.3 JQuery選擇器1.3 JQuery選擇器示例4：基本HTML代碼（1.2 html ）1、改變含有文本“id”的div的背景色為紅色2、改變不包含子元素的div空元素的背景色為藍(lán)色3、改變含有class為mini元素的div元素的背景色為黃色4、改變含有子元素的div元素背景色為灰色（3）可見性過濾選擇器選擇器描述返回示例:hidden選取所有不可見的元素集合元素$(“:hidden”),包含,:visib

11、le選取所有可見的元素集合元素$(“div:visible”)1.3 JQuery選擇器1.3 JQuery選擇器示例5：基本HTML代碼（1.2 html ）1、改變所有可見的div的背景色為紅色2、顯示隱藏的div元素 $(“div:hidden”).show(3000);（4）屬性過濾選擇器選擇器描述返回示例attribute選取擁有此屬性的元素集合元素$(“divid“)attribute=value選取屬性值為value的元素集合元素$(“divtitle=test”)attribute!=value選取屬性值不為value的元素集合元素$(“divtitle!=test”)attr

12、ibute=value選取屬性值以value開始的元素集合元素$(“divtitle=test”)attribute$=value選取屬性值以value結(jié)束的元素集合元素$(“divtitle$=test”)attribute*=value選取屬性值含有value的元素集合元素$(“divtitle*=test”)selector1 selector2selector3用屬性選擇器合并成一個(gè)復(fù)合屬性選擇器,滿足多個(gè)條件.每選擇一次,縮小一次范圍集合元素$(dividtitle*=test)1.3 JQuery選擇器示例6：基本HTML代碼（1.2 html ）1、改變含有title屬性的div

13、元素的背景色為紅色2、改變屬性title屬性不等于test的div元素的背景色為藍(lán)色3、改變屬性title屬性值以te開始的div元素的背景色為灰色4、改變屬性title屬性值以est結(jié)束的div元素的背景色為黃色5、改變屬性title屬性值含有es的div元素的背景色為粉色6、改變含有屬性id，并且含有屬性title值含有es的div元素的背景色紫色1.3 JQuery選擇器（5）子元素過濾選擇器選擇器描述返回示例:nth-child(index/even/odd/equation)選取父元素下的第index個(gè)子元素或者奇偶元素集合元素$(“div :nth-child(1)“)選取第一個(gè)子

14、元素:first-child選取父元素的第一個(gè)子元素集合元素$(“div :first-child”):last-child選取父元素的最后一個(gè)子元素集合元素$(“div :last-child”):only-child如果某個(gè)元素是它父元素中唯一的子元素，那么將會(huì)被匹配。集合元素$(“ul li :only-child”)1.3 jQuery選擇器示例7：基本HTML代碼（1.2 html ）1、改變每個(gè)class為one的div元素的第2個(gè)子元素的背景色為紅色2、改變每個(gè)class為one的div父元素下的第一個(gè)子元素的背景色為藍(lán)色3、改變每個(gè)class為one的div父元素下的最后一個(gè)子

15、元素的背景色為灰色4、如果class為one的div父元素下只有一個(gè)子元素,那么改變這個(gè)子元素的背景色為粉色1.3 jQuery選擇器（6）表單對(duì)象屬性過濾選擇器選擇器描述返回示例:enabled選取所有可用的元素集合元素$(“ #form :enabled“):disabled選取所有不可用的元素集合元素$(“#form :disabled”):checked選取所有被選中的元素(單選框、復(fù)選框)集合元素$(“input:checked”):selected選取所有被選中的選項(xiàng)元素（下拉列表）集合元素$(“select:selected”)1.3 jQuery選擇器示例8：基本HTML代碼（

16、1.3 ）1、改變表單內(nèi)可用元素的值為”這里變化了” $(“”).val();2、改變表單內(nèi)不可用元素的值為”這里變化了”3、獲取多選框選中的個(gè)數(shù) $(“”).length;4、獲取下拉框中的內(nèi)容 $(“”).text();1.3 jQuery選擇器四、表單選擇器選擇器描述返回示例:input選取所有的元素集合元素$(“:input”):text選取所有的單行文本框集合元素$(“:text”):password選取所有的密碼框集合元素$(“:password”):radio選取所有的單選框集合元素$(“:radio”):checkbox選取所有的多選框集合元素$(“:checkbox”):su

17、bmit選取所有的提交按鈕集合元素$(“:submit”):image選取所有的圖像按鈕集合元素$(“image”):reset選取所有的重置按鈕集合元素$(“:reset”):button選取所有的按鈕集合元素$(“:button”):file選取所有的上傳域集合元素$(:radio):hidden選取所有不可見的元素集合元素$(“:hidden”)1.3 jQuery選擇器示例9：基本HTML代碼（1.4）1、獲取表單內(nèi)表單元素的個(gè)數(shù) 2、獲取表單內(nèi)單行文本框的個(gè)數(shù)3、獲取表單內(nèi)密碼框的個(gè)數(shù)1.3 jQuery選擇器1.4 應(yīng)用jQuery編寫程序綜合示例9：1、給網(wǎng)頁中所有的元素添加on

18、click事件。2、使一個(gè)特定的表格隔行變色。3、對(duì)多選框進(jìn)行操作，輸出選中的多選框的值。jQuery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換var $variable=jQuery對(duì)象;var variable=DOM對(duì)象;1、jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象（1）jQuery對(duì)象是一個(gè)數(shù)組對(duì)象，可以通過index的方法得到相應(yīng)的DOM對(duì)象var $cr=$(“#cr”);var cr=$cr0;alert(cr.innerHTML);（2）jQuery提供了get(index)方法得到相應(yīng)的DOM對(duì)象var $cr=$(“#cr”);var cr=$cr.get(0);alert(cr.innerHTML);2、 DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象 對(duì)于一個(gè)DOM對(duì)象，用$()把DOM對(duì)象包