jquery常用的選擇器 jquery有幾種選擇器 _jquery有幾種選擇器

文章插圖

文章插圖

JQuery的選擇器
頁面的任何操作都需要節點的支撐，開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。jQuery提供了一系列的選擇器幫助開發者達到這一目的，讓開發者可以更少的處理復雜選擇過程與性能優化，更多專注業務邏輯的編寫。
jQuery幾乎支持主流的css1~css3選擇器的寫法，我們從最簡單的也是最常用的開始學起
1、id選擇器：一個用來查找的ID，即元素的id屬性
$( “#id” )
id選擇器也是基本的選擇器，jQuery內部使用JavaScript函數document.getElementById()來處理ID的獲取。原生語法的支持總是非常高效的，所以在操作DOM的獲取上，如果能采用id的話盡然考慮用這個選擇器值得注意：id是唯一的，每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素。但這種行為不應該發生;有超過一個元素的頁面使用相同的id是無效的
2、類選擇器，顧名思義，通過class樣式類名來獲取節點
描述：$( “.class” )
類選擇器，相對id選擇器來說，效率相對會低一點，但是優勢就是可以多選，同樣的jQuery在實現上，對于類選擇器，如果瀏覽器支持，jQuery使用JavaScript的原生getElementsByClassName()函數來實現的我們不難發現：jQuery除了選擇上的簡單，而且沒有再次使用循環處理不難想到$(“.imooc”).css()方法內部肯定是帶了一個隱式的循環處理，所以使用jQuery選擇節點，不僅僅只是選擇上的簡單，同時還增加很多關聯的便利操作，后續我們還會慢慢的學到其他的優勢。
3、元素選擇器：根據給定（html）標記名稱選擇所有的元素
描述：$( “element” )
搜索指定元素標簽名的所有節點，這個是一個合集的操作。同樣的也有原生方法getElementsByTagName()函數支持下例代碼所示：

<body><div class="aaron"><p>class="aaron"</p><p>選中</p></div><div class="aaron"><p>class="aaron"</p><p>選中</p></div><div class="imooc"><p>class="imooc"</p><p>jQuery選中</p></div><div class="imooc"><p>class="imooc"</p><p>jQuery選中</p></div><script type="text/javascript">//通過原生方法處理//獲取到所有的節點標記名為div的元素//給每一個div加上藍色的邊框var divs = document.getElementsByTagName('div');for (var i = 0; i < divs.length; i++) {divs[i].style.border = "3px solid blue";}</script><script type="text/javascript">//通過jQuery直接傳入標簽名p//標簽是可以多個的，所以得到的同樣也是一個合集$("p").css("border", "3px solid red");</script></body>復制代碼

第一組：通過getElementsByTagName方法得到頁面所有的<div>元素 var divs = document.getElementsByTagName(‘div’); divs是dom合集對象，通過循環給每一個合集中的<div>元素賦予新的boder樣式二組：同樣的效果，$(“p”)選取所有的<p>元素，通過css方法直接賦予樣式
4、全選擇器（選擇器）
在CSS中，經常會在第一行寫下這樣一段樣式
{padding: 0; margin: 0;}
通配符