初識JQuery（1）-選擇器

時間 2020-05-09

原文原文鏈接

初識jquery

在學習jquery以前，就有看過一些相關的視頻，才知道它是能夠寫不多的代碼就能夠完成不少事的。記得第一寫輪播圖的時候，首先就百度了篇輪播圖的實現，當時還不知道本身百度的其實不是原生的JS代碼，而是用jquery完成的，當時也是初識JS，而後就一臉懵逼的看了視頻，結果好像還看懂了，因而跟着他的代碼像作着世界上最偉大的事同樣的敲着代碼，編譯的時候卻沒反應，通過一些瞭解後才發現這是用傳說中的jquery完成的。儘管第一次接觸jquery不是爲接觸而接觸的，可是也意識到了他強大的功能。javascript

真正接觸jquery：css

jquery是一種輕量級的javascript庫不只兼容了css3，還兼容各類瀏覽器。當咱們再作一個項目時，須要作一些底層的東西，就是說兼容，像一些方法，網頁事件，動畫，DOM操做、Ajax封裝等，他能夠在最底層爲事件作兼容，除此外，jquery還具備強大的選擇器。html

講真，jquery強大的選擇器真的把我給嚇到了，雖然說「兵不在多而在於精「，可是jquery」多多益善「的各類選擇器給咱們操做頁面元素帶來了大大的方便，這裏我就先講講我對【id選擇器、類選擇器、元素選擇器、全選擇器、層級選擇器、基本篩選選擇器、內容篩選選擇器、可見性篩選選擇器】的理解即總結。前端

頁面的任何操做都須要節點的支撐，開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。jQuery提供了一系列的選擇器幫助開發者達到這一目的，讓開發者能夠更少的處理複雜選擇過程與性能優化，更多專一業務邏輯的編寫。java

【id選擇器】jquery

一個用來查找的ID的選擇器，即元素的id屬性。css3

$("#id");

id選擇器也是基本的選擇器，jQuery內部使用JavaScript函數document.getElementById()來處理ID的獲取。原生語法的支持老是很是高效的，因此在操做DOM的獲取上，若是能採用id的話盡然考慮用這個選擇器瀏覽器

注意：id是惟一的，每一個id值在一個頁面中只能使用一次。若是多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素。但這種行爲不該該發生;有超過一個元素的頁面使用相同的id是無效的。性能優化

【類選擇器】less

經過class樣式類名來獲取節點。

$(".class");

<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> <script type="text/javascript"> //經過原生方法處理 //樣式是能夠多選的，因此獲得的是一個合集 //須要經過循環給合集中每個元素修改樣式 var divs = document.getElementsByClassName('aaron'); for (var i = 0; i < divs.length; i++) { divs[i].style.border = "3px solid blue"; } </script> <script type="text/javascript"> //經過jQuery直接傳入class //class選擇器能夠選擇多個元素  $(".class").css("border", "3px groove red");//groove，展示出來的邊框內測是凹進去的，有點像畫框邊緣。 </script>  </body>

jQuery除了選擇上的簡單，並且沒有再次使用循環處理，不難想到$(".imooc").css()方法內部確定是帶了一個隱式的循環處理，因此使用jQuery選擇節點，不只僅只是選擇上的簡單，還增長不少關聯的便利操做。

【元素選擇器】

根據給定（html）標記名稱選擇全部的元素，搜索指定元素標籤名的全部節點，這個是一個合集的操做。一樣的也有原生方法getElementsByTagName()函數支持。如：$("p");（$("element");）

【全選擇器】

通配符*意味着給全部的元素設置默認的邊距。jQuery中咱們也能夠經過傳遞*選擇器來選中文檔頁面中的元素，拋開jQuery，若是要獲取文檔中全部的元素，經過document.getElementsByTagName()中傳遞"*"一樣能夠獲取到。可是有時候咱們選喲考慮兼容性的我問題。他的描述：$("*");

【層級選擇器】

文檔中的全部的節點之間都是有這樣或者那樣的關係。咱們能夠把節點之間的關係能夠用傳統的家族關係來描述，能夠把文檔樹看成一個家譜，那麼節點與節點直接就會存在父子，兄弟，祖孫的關係了。

選擇器中的層級選擇器就是用來處理這種關係。（子元素後代元素兄弟元素相鄰元素）層級選擇器有如下幾種表示：

（匹配過濾選擇器的用法：

<script type="text/javascript">
        //:not 選擇全部元素去除不匹配給定的選擇器的元素
        //選中全部緊接着沒有checked屬性的input元素後的p元素，賦予顏色
        $("input:not(:checked)+p").css("background-color", "#CD00CD");
</script>

）

選擇器之間的類似與不一樣：

一、層級選擇器都有一個參考節點

二、後代選擇器包含子選擇器的選擇的內容

三、通常兄弟選擇器包含相鄰兄弟選擇的內容

四、相鄰兄弟選擇器和通常兄弟選擇器所選擇到的元素，必須在同一個父元素下

【基本篩選選擇器】

爲了方便能直接找到所需的DOM節點元素，jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。

篩選選擇器的用法與CSS中的僞元素類似，選擇器用冒號「：」開頭，經過一個列表，看看基本篩選器的描述：

【內容篩選選擇器】

基本篩選選擇器針對的都是元素DOM節點，若是咱們要經過內容來過濾，jQuery也提供了一組內容篩選選擇器。幾種方式描述：

【可見性篩選選擇器】

元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴展了可見性篩選選擇器:visible與:hidden。描述：

若是元素中佔據文檔中必定的空間,元素被認爲是可見的。

咱們有幾種方式能夠隱藏一個元素：

1寬度和高度都顯式設置爲0。二、CSS visibility的值是hidden,display的值是none。3type="hidden"的表單元素。

【總結】

這裏這是jquery的部分選擇器，可是看起來都不少了，對於記憶性的東西原本就很枯燥，除了機械記憶外，還應該在不斷地練習中掌握它的原理及用法，還有遇到一些簡稱的代碼，最好去查一下他的全稱，記憶會更牢固。例如：基本篩選選擇器中，eq全稱是equal(意思是「等於」)；gt全稱是greater than(意思是大於)；lt全稱是less than(意思是小於)。

手已經申請休假了~~~~~~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。