jQuery 選擇器 整理
阿新 • • 發佈：2019-01-04
一、 css選擇器1.查詢元素的方法按照 $app1 = $("#app")/$(".app")/$("div/li/ul"); 形式來寫2.支援多級查詢：形式大概在：$app1 = $("#app,.app1,#app2")$app1 = $(".app>app1")//子代選擇器$app1 = $("#app app1")//後代選擇器3.用jq給css 新增樣式css()即$app.css("background","red")4.current 當前5 .next() 返回後一個同級元素<li class="app12"></li><li class="app13"></li>$(".app12").next();這個返回的實際上就是第二個li;6.parent()取相應的父元素<div id='app'><li class="app12"></li><li class="app13"></li></div>$(".app12").parent();這個找到的實際上就是#app這個元素7.siblings() 取同級元素的集合（不包括自己本身）<li class="app12"></li><li class="app13"></li><li class="app14"></li>$(".app12").siblings() 實際上去得的是13,14兩個li，它和next()的區別在於 一個是去集合另一個是取一個元素4. children()取得所有子元素它可以有引數 結果是取得符合條件的子代元素<ul id="ul1">一 <li class="li1" id="siblings">1</li> <li class="li1">2</li> <li class="li1">3</li> <li class="li1">4</li> <li class='li2'></li></ul>$("#ul1").children().css('background',"red");//取得的是前四個$("#ul1").children('.li2').css("background","yellow"//取得是最後一個5.remove()6.toggleClass() 函式 <div id="app" class="div1"> </div>沒有類則是建立一個類，如果有則反選。例如$("#app").toggleClas（“div1“）;7.:eq()選擇器例如 var $app = $(".app:eq(0)").html(); eq選擇類名是 app的dom元素中的某一個 ，這個是指從0 開始到n-1 傳-1取得是最後一個dom元素。 html()函式，是jq的語法，不穿函式的時候用來取得這個dom函式的值，傳值的時候會覆蓋原有的html結構可以是<li></li>這種東西。 執行的東西應該是一個$元素，而不是一個$陣列8.:even例如 var $app = $(".app:even").css("background,red"); 這個函式選擇的是所有奇數的dom元素，1，3，5，7，需要注意的是這個肯定會回傳一個數組，所以不能使用像html（）這種只能操作一個的函式。9.屬性選擇器： <ul> <li name="aa">1</li> <li name="aabb">2</li> <li name="bbaa">3</li> <li name = "aa-bb">4</li> </ul> 1.var $xianshi = $("#app ul li[name=aa]").css("background","red");//選中屬性值也就是name 等於aa 的dom元素 也就是第一個 2.var $xianshi = $("#app ul li[name*=aa]").css("background","red");//選中所有含有aa的元素 三個都有 3.var $xianshi = $("#app ul li[name~=aa]").css("background","red"); 選中 含有aa這個單詞的元素？ 4. var $xianshi = $("#app ul li[name$=aa]").css("background","red")// 選中以aa為結尾的 dom元素 5. var $xianshi = $("#app ul li[name^=aa]").css("background","red")// 選中以aa為開頭的dom元素 6.var $xianshi = $("#app ul li[name!=aa]").css("background","red")// 選中不含有aa 的dom元素 7.var $xianshi = $("#app ul li[name|=aa]").css("background","red") //選中以aa 為字首的dom 元素？10. 1.$("#div h1:first-child") 這句話的意思是選中div下面的第一個孩子而且必須是h1。 2.$("#div h1:first of type") 選中div下第一個型別是h1的dom 元素 3.$("#div h1:nth-child(2n)")選擇所有偶數 4.$("#div h1:nth-child(2n+1)")選擇所有奇數二jq 擴充套件選擇器1.:animated 選擇正在執行動畫效果的dom元素 $("div:animated").toggleClass("colored");2.eq()選擇器例如 var $app = $(".app:eq(0)").html(); eq選擇類名是 app的dom元素中的某一個 ，這個是指從0 開始到n-1 傳-1取得是最後一個dom元素。 html()函式，是jq的語法，不穿函式的時候用來取得這個dom函式的值，傳值的時候會覆蓋原有的html結構可以是<li></li>這種東西。 執行的東西應該是一個$元素，而不是一個$陣列3.:even例如 var $app = $(".app:even").css("background,red"); 這個函式選擇的是所有奇數的dom元素，1，3，5，7，需要注意的是這個肯定會回傳一個數組，所以不能使用像html（）這種只能操作一個的函式。 4.:odd var $app = $(".app:odd").css("background,red"); 選擇所有偶數的dom元素。 5.:first var $app = $(".app:first").css（"background","red"）;匹配第一個元素6. :gt(index) var $div1 =$("#div1 li:gt(0)"); $div1.each(function(){ $(this).css("background","green"); }); 索引從零開始，所以這個是操作所有大於index（0+1）的元素。7.：headervar $div1 = $("div1:header")選擇所有header標題元素 類似於h1,h2,h3,h4。8.:lang(lang) $( "div:lang(es-es)" ).addClass( "spain" ); 選擇指定語言的所有元素 對於HTML元素，語言值由lang屬性決定，也可能由來自meta元素或HTTP頭資訊決定。9.：last $("div:last").css("background","red"); 選擇最後一個div10.:it(index) var div1 = $("div:it(0)"); $div1.each(function(){ $(this).css("background","green"); }); 用於操作所有小於index+1的dom元素。11.：not(selector) $("input:not(:checked) + span").css("background-color", "yellow"); 選擇除了選定元素之外的其他元素。不推薦使用沒有.not()好用。12.:html選擇該文件的根元素在HTML中，文件的根元素，和$(":root")選擇的元素一樣， 永遠是<html>元素13.:target選擇由文件URI的格式化識別碼表示的目標元素如果文件的URI包含一個格式化的識別符號，或hash（雜湊）， 然後:target選擇器將匹配ID和識別符號相匹配的元素。 例如，給定的URI http://example.com/#foo， $( "p:target" )，將選擇<p id="foo">元素。14.：emptyvar $div1 = $("#div1 li:empty").css("background","red");選擇空元素的jq元素15:contains(text)var $div1 = $("#div1 li:contains(2)").css("background","red");選擇內容中含有text 的所有jq元素15.:parentvar $div1 = $("#div1 li:parent").css("background","red");選擇任何有子元素或者文字的父元素16.：hidden選中所有隱藏元素17.:visible選中所有可見元素18.：button選中所有按鈕19.：checkbox 選中所有複選框的jq元素20.：checked <input type="checkbox" checked> <input type="checkbox"> <input type="checkbox"> $(":checked").val("haha") 選擇所有被選中的單選框，並且單選框不能新增背景和邊框，用於單選框和複選框，下拉框用:selected21.js 物件分三種{ 1.內建物件 2.dom物件 3.自定義物件}jq物件 就是個自定義物件,但可以當做陣列來操作。22. dom 物件和jq 物件互換 1.dom物件 換成jq 物件 var oBtn = document.getElementById('app'); $btn = $("oBtn") console.log($btn); 2.jq 物件轉成 dom 物件 兩種方式 1..get（0） 因為jq 物件相當於一個數組 var $Btn = $("#app"); console.log($Btn.get(0)); 或者 console.log($Btn[0]);23.API 函式 就是那些語法24.js 命名規範 1.o 代表原生的 2.$代表jq 物件25.屬性選擇器： <ul> <li name="aa">1</li> <li name="aabb">2</li> <li name="bbaa">3</li> <li name = "aa-bb">4</li> </ul> 1.var $xianshi = $("#app ul li[name=aa]").css("background","red");//選中屬性值也就是name 等於aa 的dom元素 也就是第一個 2.var $xianshi = $("#app ul li[name*=aa]").css("background","red");//選中所有含有aa的元素 三個都有 3.var $xianshi = $("#app ul li[name~=aa]").css("background","red"); 選中 含有aa這個單詞的元素？ 4. var $xianshi = $("#app ul li[name$=aa]").css("background","red")// 選中以aa為結尾的 dom元素 5. var $xianshi = $("#app ul li[name^=aa]").css("background","red")// 選中以aa為開頭的dom元素 6.var $xianshi = $("#app ul li[name!=aa]").css("background","red")// 選中不含有aa 的dom元素 7.var $xianshi = $("#app ul li[name|=aa]").css("background","red") //選中以aa 為字首的dom 元素？26. 1.$("#div h1:first-child") 這句話的意思是選中div下面的第一個孩子而且必須是h1。 2.$("#div h1:first of type") 選中div下第一個型別是h1的dom 元素 3.$("#div h1:nth-child(2n)")選擇所有偶數 4.$("#div h1:nth-child(2n+1)")選擇所有奇數27. 我有一個ul 裡面各種LI li不確定多少個，把他橫過來，根據裝置寬度不同，間隙相同，所有li 均分，第一列在最左邊 ，最後一列在最右邊...... 1. 檢測不同的裝置用css3響應式設計28.each()函式 var $div1 =$("#div1 li"); $div1.each(function(){ $(this).css("background","green"); }); 用來遍歷jq元素但是需要用this來指向，並且那個$一定不要忘，是$(this)並不是this。30..val(value)函式想一個jq元素中新增value 屬性 value=value(自己設的東西)。31.1.toggle 函式不傳引數的時候toggle();$app.toggle();改變這個元素的顯示或者隱藏toggle可以傳遞一個函式來控制是隱藏還是顯示$app.toggle(true);這個引數是一個布林值