JQuery核心用法課件

1、1JQuery快速入門2講座內(nèi)容1、jQuery是什么2、jQuery核心函數(shù)3、jQuery選擇器使用4、jQuery 的dom操作3官方解釋：o jQuery是一個以前未曾有過的JavaScript庫。o 他快速、簡潔，能夠很輕易地處理HTML文檔、控制事件、給頁面添加動畫和Ajax效果。o jQuery是為了改變JavaScript的編寫方式而設(shè)計的。o 他適合所有人：設(shè)計師、開發(fā)人員、極客、商業(yè)應(yīng)用.o 體積小：26.5KB（1.2.1壓縮版），45.3KB（1.2.1精簡版），78.6KB（1.2.1完整版）.20.7KB（1.1.2壓縮版），57.9KB（1.1.2完整版）o 兼容

2、性：支持CSS 1-3和基本的XPatho 跨瀏覽器：IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+（向后兼容）4jQuery特點o 強大的選擇器o DOM操作的封裝o 可靠的事件處理機制o 完美的Ajax支持o 鏈?zhǔn)讲僮鞣绞給 隱式迭代o 豐富的插件支持,擴展容易o .5jQuery核心函數(shù) jQuery(expression,context) 可以簡寫為$6使用jQueryo 導(dǎo)入jquery 的js庫(可從http:/下載最新版)o 在網(wǎng)頁開頭寫上如下代碼$(document).ready(function();或者簡寫為$(function();7j

3、Query基本選擇器 首先回顧一下CSS選擇器標(biāo)簽選擇器 div id選擇器 #myDiv 類選擇器 .classname div.classname *群組選擇器 h1,h2,h3 *后代選擇器 上述選擇器的組合 div a 通配符 *jQuery完美的支持上面所有的選擇器,且用法基本相同.8示例o jQuery 代碼:$(“input“):查找所有的input元素o JQuery 代碼: $(“div”):查找所有的 div 元素o $(“h1,h2,h3,p”):查找所有的h1,h2,h3,p元素HTML 代碼代碼:id=notMeid=myDiv jQuery 代碼代碼:$(#myDi

4、v); 結(jié)果結(jié)果: id=myDiv div class=notMediv class=myClassspan class=myClass jQuery 代碼:$(.myClass); 結(jié)果: div class=myClass, span class=myClass 9后續(xù)操作o 利用選擇器定位到元素后,得到的是jQuery對象,然后就可以利用其提供的方法進行常規(guī)的操作.常用的有:n val():獲得value值n html():相當(dāng)于 obj.innerHTMLn text():相當(dāng)于 obj.innerTextn css():設(shè)置css屬性n attr():屬性n Hide():隱藏元素

5、n addClass():增加一個樣式n toggleClass():增加(若沒有)或者刪除(若有)樣式o 以上的方法大部分可以讀取或者設(shè)置10多元素處理o 如果獲得的是多個元素,jQuery隱式迭代處理.o 但是需要單個處理.可以用如下的函數(shù)n size():獲得元素個數(shù)n get():獲得元素的數(shù)組n get(index):獲得指定位置的元素.下標(biāo)從0開始n 循環(huán)讀取,利用each方法,如果返回false則提前終止循環(huán),默認是true.在循環(huán)中this表示當(dāng)前元素.o 上述的get以及this都是dom對象.可以利用$(obj)將其轉(zhuǎn)換成jQuery對象$(img).each(functi

6、on(i) this.src = test + i + .jpg;); 11限制范圍jQuery 代碼:$(input, document.forms0); o 從第一個form中查找input元素12jQuery選擇器o 層次選擇器o 過濾選擇器o 可見性選擇器o 過濾選擇器o 屬性過濾選擇器13jQuery的層次選擇器o 利用dom元素的層次關(guān)系,比如后代元素、子元素、相鄰元素、兄弟元素等，來獲取指定元素，層次選擇器是非常好的選擇n $(“parent children”):選取parent 里的所有children元素n $(“parent child”)選取parent 里的所有chi

7、ldren的直接(子)元素n $(“prev+next”):選取緊跟在prev后面的next元素n $(“prevsib”):選取prev后面的所有sib元素14過濾選擇器o 通過特定的規(guī)則篩選元素.分為基本過濾、屬性過濾、子元素過濾等o 語法是 :xxx15基本過濾選擇器o :first:取第一個元素.$(“div:first”)取得所有div中第一個元素o :last 取最后一個元素o :not(選擇器).$(“input:not(.myCls)”):取得class不是myCls的input元素o :even:選取偶數(shù)元素(從0開始)o :odd:選取奇數(shù)元素o :eq(index):查找

8、索引等于index的元素o :gt(index):查找索引大于index的元素o :lt(index):查找元素小于index的元素o :header:查找所有h1h7元素o :animated:查找所有執(zhí)行動畫的元素16內(nèi)容過濾選擇器o :contains(text):選取含有文本內(nèi)容的元素o :empty:選取不包含子元素或者文本的空元素o :has: 選取含有選擇器所匹配的元素的元素.n $(“div:has(p)”):選取含有p元素的div元素o :parent:選取含有子元素或者文本的元素.n $(“div:parent”)選取擁有子元素的div元素17可見性過濾器o :hidden

9、:選取所有不可見元素o :visable:選取所有可見元素18屬性過濾選擇器o xx:存在某個屬性: $(“divclass”):所有存在class屬性的divo xx=vo xx!=vo xx=v:選取以v值開頭的元素o xx$=v:選取以v結(jié)尾的元素o xx*=v:選取屬性值xx包含v的元素o s1=v1s2=v2:可以組合使用19子元素過濾選擇器o :nth-child(index/even/odd):選取第index個元素或者奇偶元素(下標(biāo)從1開始)n $(“table tr:nth-child(odd)”):選取所有奇數(shù)行n $(“ul ol:nth-child(2n+1)”)選取1

10、,3,5位置的元素o :first-child:匹配第一個元素o :last-child:匹配最后一個元素o :only-child:匹配唯一的子元素n $(“ul li:only-child”):在ul中選取是唯一子元素的li元素20表單對象屬性過濾選擇器o :enabled:匹配可用元素o :disabled:選取不可用元素o :checked:選取所有被選中的元素o :selected:選取所有被選擇的元素n $(“select :selected”):選中所有被選中的option元素21表單選擇器o :input:選取所有的input元素o :text:匹配所有的單行文本框Reset,

11、image,textarea,button,reset,file,hidden類似22注意事項o 選擇器本身含有# .等特殊符號,需要加轉(zhuǎn)義字符 o 空格的特殊處理.$(“.test :hidden”)和$(“.test:hidden”)是不同的,前一個是選擇class為test的后代隱藏元素;后一個是選擇隱藏的class為test的元素23事件處理o jQuery中,頁面元素的事件不需要在html中寫,直接寫在主函數(shù)中,采用綁定機制n $(“#btn”).click(function();n $(“btn”).bind(“click”,function();24Dom操作o jQuery對象有完整的可以代替dom操作的方法o Obj.text();獲得對象的文本o Obj.text(“text1”).設(shè)置對象的文本o Obj.html():設(shè)置或者讀取對象的html文本o 以上方法類似于dom的innerText和innerHTML屬性o attr(“attr”):讀取對象attr屬性o attr(“attr”,”value”)設(shè)置attr屬性的值為valueo 對于表單元素,還有val()函數(shù),用法類似25Dom操作o addClass:添加類樣式屬性o css:添加樣式o removeAttr(“att”)刪除屬性o remove