JQuery選擇器

JQuery選擇器

 

$的選擇器部分:凡是運用$,其返回值是一個object$選擇器主要用於選擇標籤.基本用法是同css的選擇器.可是,很讓人興奮的是,他支持常見的瀏覽器,而css中不少選擇器是IE6所不支持的.1.基本選擇器(3種):$("標籤名"),如$("p")是選取了全部的p標籤節點$("#id名"),如$("#test")是選取了id爲test的標籤節點$(".class名"),如$(".test")是選取了全部class爲test的標籤節點上面的$("標籤名")和$(".class名")返回的都是全部知足的節點,至於進一步篩選能夠添加一些函數,如eq,gt,lt等等.2.組選擇器:下面仍是現作一個約定:把"標籤名或#id名或.class名"記做mix,則mix表示一個標籤名,或一個#id或一個.class.$("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 3.後代選擇器:$("mix mix"),固然能夠是多個嵌套,但後代選擇器能夠是深層子代,因此$("mix mix mix ...")這種寫法做用不大.例子:$("div .test"):在div標籤內的全部具備test的class的後代元素(就是被div嵌套的class屬性爲test的標籤)能夠見DEMO。4.子選擇器:$("mix>mix"),這個放在後代選擇器後面是爲了和它作對比.子選擇器只能選擇第一代子代.不處理深層嵌套.例子:$("div>.test")<div><p class="test"></p></div>對這裏的p段落標籤有效.但對<div><p><p class="test"></p></p></div>對這裏的p段落標籤無效,這裏要用$("div .test)5.臨近選擇器:$("mix+mix"),選取下一個兄弟節點.如:$("div +#test"),id爲test的的節點必須是div的下一個兄弟節點.<div></div><p id="test"></p>在$("div + #test")中能取到p段落節點<div></div><p></p><p id="test"></p>則不能取到6.屬性選擇器:把屬性選擇器不放在css選擇器裏面是由於jQuery中寫法是不同的.至於css中寫法能夠參考我以前寫的一篇css的選擇器一文.jQuery中是和xPath相似的寫法:$("mix[@attr]"):選取全部該mix且具備attr屬性的節點$("mix[@attr=a_value"]):選取全部該mix且具備attr屬性並知足屬性值爲a_value的節點$("mix[@attr^=a_value_head"]):attr屬性的屬性值是以a_value_head開頭的$("mix[@attr$=a_value_end"]):attr屬性的屬性值是以a_value_end結尾的$("mix[@attr*=a_value"]):attr屬性的屬性值中包含a_value7.進一步選擇器:這個名稱是我本身起的,其實選擇器組合都有進一步的意思,你明白後面所介紹的知識便可.具備限定子節點選擇器:$("mix1[mix2]"):返回包含mix2的mix1節點.如:$("div[a]"):包含a標籤的div.這個和$("div a")不相同.後者表示div中的a標籤,返回的是a標籤對象,前者返回的是div標籤對象冒號限定結點選擇器:$("mix:condition"):mix標籤,而且知足限定條件.E:root:類型爲E,而且是文檔的根元素E:nth-child(n):是其父元素的第n個類型爲E的子元素 ,基數從1開始E:first-child:是其父元素的第1個類型爲E的子元素E:last-child:是其父元素的最後一個類型爲E的子元素E:only-child:且是其父元素的惟一一個類型爲E的子元素E:empty:沒有子元素（包括text節點）的類型爲E的元素E:enabledE:disabled:類型爲E,容許或被禁止的用戶界面元素E:checked:類型爲E,處於選中狀態的用戶界面元素（例如單選按鈕或複選框）E:visible:選擇全部可見元素(display值爲block或visible,visibility值爲visible元素,不包括hide域)E:hidden:選擇全部隱藏元素(非Hide域,且display值爲block或visible,visibility值爲visible的元素)E:not(s):類型爲E,不匹配選擇器sE:eq(n),E:gt(n),E:lt(n):元素限定E:first:至關於E:eq(0)E:last:最後一個匹配的元素E:even:從匹配的元素集中取序數爲偶數的元素E:odd:從匹配的元素集中取序數爲奇數的元素E:parent:選擇包含子元素（包含text節點）的全部元素E:contains('test'):選擇全部含有指定文本的元素表單選擇器:E:input:選擇表單元素(input,select,textarea,button)E:text:選擇全部文本域(type="text")E:password:選擇全部密碼域(type="password")E:radio:選擇全部單選按鈕(type="radio")E:checkbox:選擇全部複選框(type="checkbox")E:submit:選擇全部提交按鈕(type="submit")E:p_w_picpath:選擇全部圖像域 (type="p_w_picpath")E:reset:選擇全部清除域(type="reset")E:button:選擇全部按鈕(type="button")固然包括E:hidden8.xPath路徑查詢:先介紹下xPath的語法:/:選取根節點//:選取文檔中全部符合條件的節點,無論該節點位於何處.:選取當前節點..:選取單前節點的父節點@:選取屬性,這個在以前說過了(屬性選擇器)nodename:選取節點下的全部節點jQuery中的應用:根節點是不多用到的,經常使用的以下面的例子:$("div/p")至關於$("div>p")$("div//p")至關於$("div p")$("//div/../p"):全部div節點的父節點下的p標籤還有相對路徑的寫法以及支持的Axis選擇器,還不是會應用,不介紹了...已經一大堆了$的其餘用法:$(html節點):根據提供的原始HTML標記字符串,動態建立由jQuery對象包裝的DOM元素.如:$("<div><p>Hello</p></div>").appendTo("#body");//把<div><p>Hello</p></div>添加到body元素中$(document):網頁文檔對象$(document.body):網頁body對象,和$("body")是同樣的$(函數):DOM載入後就執行該函數.因此$(document).ready()能夠寫作$()$(選擇器部分,選擇器來源):這個舉例說明$("input:radio",document.forms[0]):在文檔的第一個表單中,搜索全部單選按鈕$("div",xml.responseXML):查詢指定XML文檔中的全部div元素選擇器來源能夠是:做爲上下文的DOM元素,文檔或jQuery對象還有兩個:$.extend(prop)和$.noConflict()是和插件以及和其餘庫兼容的使用,之後再寫jQuery的core部分還有:eq(數字):將匹配的元素集合縮減爲一個元素。這個元素在匹配元素集合中的位置變爲0,而集合長度變成1gt(數字):將匹配的元素集合縮減爲給定位置以後的全部元素lt(數字):將匹配的元素集合縮減爲給定位置以前的全部元素上面三個的例子:$("div:eq(1)")//第2個div$("div:gt(2)")//第3個div以及以後的div$("div:lt(2)")//第2個div以及以前的div,即第1個div和第2個divlength或size():當前匹配的元素數量each():以每個匹配的元素做爲上下文來執行一個函數。這意味着,每次執行傳遞進來的函數時,函數中的this關鍵字都指向一個不一樣的元素(每次都是一個不一樣的匹配元素).並且,在每次執行函數時,都會給函數傳遞一個表示做爲執行環境的元素在匹配的元素集合中所處位置的數字值做爲參數.$("img").each(function(i){ this.src = "test" + i + ".jpg"; });//迭代圖像,並設置它們的src屬性get():若是沒有參數,返回全部,是一個對象數組;若是帶參數,必須是數字,基數從0開始.例子:$("div").get():返回一個div對象數組$("div").get(1):返回第二個div對象index(需求的元素節點對象):返回數字.用個例子說明:$("div").index($(".test"))[1] //表示從全部div節點中查找class屬性爲test的節點.而且找的是第二個節點(基數從0開始).返回值是該節點在div節點中的位置(基數也是從0開始).