JQuery简介选择器
生活随笔
收集整理的這篇文章主要介紹了
JQuery简介选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JQuery簡介&選擇器
文章目錄
- JQuery簡介&選擇器
- 一、jquery介紹
- 二、jquery加載
- 三、jquery選擇器
- 1、id選擇器
- 2、類選擇器
- 3、元素選擇器
- 4、全選擇器（*選擇器）
- 5、層級選擇器
- 6、基本篩選選擇器
- 7、內容篩選選擇器
- 8、可見性篩選選擇器
- 9、屬性篩選選擇器
- 10、子元素篩選選擇器
- 11、表單元素選擇器
- 12.例
- 13.選擇器列表
- 三、JQuery樣式
- 1.CSS(name，value)
- 3.Css（name）；
- 4.class操作：
一、jquery介紹
jQuery是目前使用最廣泛的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。
jQuery的版本分為1.x系列和2.x、3.x系列，1.x系列兼容低版本的瀏覽器，2.x、3.x系列放棄支持低版本瀏覽器，目前使用最多的是1.x系列的。
jquery是一個函數庫，一個js文件，頁面用script標簽引入這個js文件就可以使用。
jquery的口號和愿望 Write Less, Do More（寫得少，做得多）
1、官方網站
2、版本下載
二、jquery加載
將獲取元素的語句寫到頁面頭部，會因為元素還沒有加載而出錯，jquery提供了ready方法解決這個問題，它的速度比原生的 window.onload 更快。
- window.onload在頁面全部加載完畢（包括圖片下載）后才能執行；
- $(document).ready在頁面框架下載完畢后就執行；
- $是JQuery的簡寫形式。
可以簡寫為：
<script type="text/javascript">$(function(){......});</script>三、jquery選擇器
頁面的任何操作都需要節點的支撐，開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。jQuery提供了一系列的選擇器幫助開發者達到這一目的，讓開發者可以更少的處理復雜選擇過程與性能優化，更多專注業務邏輯的編寫。
1、id選擇器
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;}通配符*意味著給所有的元素設置默認的邊距。jQuery中我們也可以通過傳遞*選擇器來選中文檔頁面中的元素
$( "*" )- 拋開jQuery，如果要獲取文檔中所有的元素，通過document.getElementsByTagName()中傳遞"*"同樣可以獲取到
- 不難發現，id、class、tag都可以通過原生的方法獲取到對應的節點，但是我們還需要考慮一個兼容性的問題，我這里順便提及一下，比如:
- IE會將注釋節點實現為元素，所以在IE中調用getElementsByTagName里面會包含注釋節點，這個通常是不應該的
- getElementById的參數在IE8及較低的版本不區分大小寫
- IE7及較低的版本中，表單元素中，如果表單A的name屬性名用了另一個元素B的ID名并且A在B之前，那么getElementById會選中A
- IE8及較低的版本，瀏覽器不支持getElementsByClassName
5、層級選擇器
- 文檔中的所有的節點之間都是有這樣或者那樣的關系。我們可以把節點之間的關系可以用傳統的家族關系來描述，可以把文檔樹當作一個家譜，那么節點與節點直接就會存在父子，兄弟，祖孫的關系了。
- 選擇器中的層級選擇器就是用來處理這種關系：子元素、后代元素、兄弟元素、相鄰元素
通過一個列表，對比層級選擇器的區別：
仔細觀察層級選擇器之間還是有很多相似與不同點
- 層級選擇器都有一個參考節點
- 后代選擇器包含子選擇器的選擇的內容
- 一般兄弟選擇器包含相鄰兄弟選擇的內容
- 相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素，必須在同一個父元素下
6、基本篩選選擇器
- 很多時候我們不能直接通過基本選擇器與層級選擇器找到我們想要的元素，為此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。篩選選擇器很多都不是CSS的規范，而是jQuery自己為了開發者的便利延展出來的選擇器
- 篩選選擇器的用法與CSS中的偽元素相似，選擇器用冒號“：”開頭，通過一個列表，看看基本篩選器的描述：
注意事項：
- :eq(), :lt(), :gt(), :even, :odd用來篩選他們前面的匹配表達式的集合元素，根據之前匹配的元素在進一步篩選，注意jQuery合集都是從0開始索引
- gt是一個段落篩選，從指定索引的下一個開始，gt(1) 實際從2開始
7、內容篩選選擇器
- 基本篩選選擇器針對的都是元素DOM節點，如果我們要通過內容來過濾，jQuery也提供了一組內容篩選選擇器，當然其規則也會體現在它所包含的子元素或者文本內容上
- 內容過濾器描述如下表：
注意事項： - :contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
- 如果:contains匹配的文本包含在元素的子元素中，同樣認為是符合條件的。
- :parent與:empty是相反的，兩者所涉及的子元素
8、可見性篩選選擇器
- 元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴展了可見性篩選選擇器:visible與:hidden
描述如下：
- 這2個選擇器都是 jQuery 延伸出來的，看起來比較簡單，但是元素可見性依賴于適用的樣式
- :hidden選擇器，不僅僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等
- 我們有幾種方式可以隱藏一個元素：
- CSS display的值是none。
- type="hidden"的表單元素。
- 寬度和高度都顯式設置為0。
- 一個祖先元素是隱藏的，該元素是不會在頁面上顯示
- CSS visibility的值是hidden
- CSS opacity的指是0
- 如果元素中占據文檔中一定的空間,元素被認為是可見的。
- 可見元素的寬度或高度，是大于零。
- 元素的visibility: hidden 或 opacity: 0被認為是可見的，因為他們仍然占用空間布局。
9、屬性篩選選擇器
- 屬性選擇器讓你可以基于屬性來定位一個元素。可以只指定該元素的某個屬性，這樣所有使用該屬性而不管它的值，這個元素都將被定位，也可以更加明確并定位在這些屬性上使用特定值的元素，這就是屬性選擇器展示它們的威力的地方。
10、子元素篩選選擇器
子元素篩選選擇器不常使用，其篩選規則比起其它的選擇器稍微要復雜點
子元素篩選選擇器描述表：
注意事項：
- :first只匹配一個單獨的元素，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素。這相當于:nth-child(1)
- :last 只匹配一個單獨的元素， :last-child 選擇器可以匹配多個元素：即，為每個父級元素匹配最后一個子元素
- 如果子元素只有一個的話，:first-child與:last-child是同一個
- :only-child匹配某個元素是父元素中唯一的子元素，就是說當前子元素是父元素中唯一的元素，則匹配
- jQuery實現:nth-child(n)是嚴格來自CSS規范，所以n值是“索引”，也就是說，從1開始計數，:nth-child(index)從1開始的，而eq(index)是從0開始的
- nth-child(n) 與 :nth-last-child(n) 的區別前者是從前往后計算，后者從后往前計算
11、表單元素選擇器
無論是提交還是傳遞數據，表單元素在動態交互頁面的作用是非常重要的。jQuery中專門加入了表單選擇器，從而能夠極其方便地獲取到某個類型的表單元素
表單選擇器的具體方法描述：
注意事項：
- 除了input篩選選擇器，幾乎每個表單類別篩選器都對應一個input元素的type值。大部分表單類別篩選器可以使用屬性篩選器替換。比如$(’:password’) == $(’[type=password]’)。
12.例
//jquery選擇器可以快速地選擇元素，選擇規則和css樣式相同， //使用length屬性判斷是否選擇成功。$('#myId') //選擇id為myId的網頁元素 $('.myClass') // 選擇class為myClass的元素 $('li') //選擇所有的li元素 $('#ul1 li span') //選擇id為為ul1元素下的所有li下的span元素 $('input[name=first]') // 選擇name屬性等于first的input元素//對選擇集進行過濾 $('div').has('p'); // 選擇包含p元素的div元素 $('div').not('.myClass'); //選擇class不等于myClass的div元素 $('div').filter('.myClass'); //選擇class等于myClass的div元素 $('div').eq(5); //選擇第6個div元素//選擇集轉移 $('div').prev(); //選擇div元素前面緊挨的同輩元素 $('div').prevAll(); //選擇div元素之前所有的同輩元素 $('div').next(); //選擇div元素后面緊挨的同輩元素 $('div').nextAll(); //選擇div元素后面所有的同輩元素 $('div').parent(); //選擇div的父元素 $('div').children(); //選擇div的所有子元素 $('div').siblings(); //選擇div的同級元素 $('div').find('.myClass'); //選擇div內的class等于myClass的元素//判斷是否選擇到了元素 //jquery有容錯機制，即使沒有找到元素，也不會出錯， //可以用length屬性來判斷是否找到了元素,length等于0， //就是沒選擇到元素，length大于0，就是選擇到了元素。var $div1 = $('#div1'); var $div2 = $('#div2'); alert($div1.length); // 彈出1 alert($div2.length); // 彈出0 ...... <div id="div1">這是一個div</div>13.選擇器列表
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id=“lastname” 的元素 |
| .class | $(".intro") | 所有 class=“intro” 的元素 |
| element | $(“p”) | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class=“intro” 且 class=“demo” 的元素 |
| :first | $(“p:first”) | 第一個 <p> 元素 |
| :last | $(“p:last”) | 最后一個 <p> 元素 |
| :even | $(“tr:even”) | 所有偶數 <tr> 元素 |
| :odd | $(“tr:odd”) | 所有奇數 <tr> 元素 |
| :eq(index) | $(“ul li:eq(3)”) | 列表中的第四個元素（index 從 0 開始） |
| :gt(no) | $(“ul li:gt(3)”) | 列出 index 大于 3 的元素 |
| :lt(no) | $(“ul li:lt(3)”) | 列出 index 小于 3 的元素 |
| :not(selector) | $(“input:not(:empty)”) | 所有不為空的 input 元素 |
| :header | $(":header") | 所有標題元素 <h1> - <h6> |
| :animated | 所有動畫元素 | |
| :contains(text) | $(":contains(‘W3School’)") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 無子（元素）節點的所有元素 |
| :hidden | $(“p:hidden”) | 所有隱藏的 <p> 元素 |
| :visible | $(“table:visible”) | 所有可見的表格 |
| s1,s2,s3 | $(“th,td,.intro”) | 所有帶有匹配選擇的元素 |
| [attribute] | $("[href]") | 所有帶有 href 屬性的元素 |
| [attribute=value] | $("[href=’#’]") | 所有 href 屬性的值等于 “#” 的元素 |
| [attribute!=value] | $("[href!=’#’]") | 所有 href 屬性的值不等于 “#” 的元素 |
| [attribute$=value] | ("[href("[href("[href=’.jpg’]") | 所有 href 屬性的值包含以 “.jpg” 結尾的元素 |
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type=“text” 的 <input> 元素 |
| :password | $(":password") | 所有 type=“password” 的 <input> 元素 |
| :radio | $(":radio") | 所有 type=“radio” 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type=“checkbox” 的 <input> 元素 |
| :submit | $(":submit") | 所有 type=“submit” 的 <input> 元素 |
| :reset | $(":reset") | 所有 type=“reset” 的 <input> 元素 |
| :button | $(":button") | 所有 type=“button” 的 <input> 元素 |
| :image | $(":image") | 所有 type=“image” 的 <input> 元素 |
| :file | $(":file") | 所有 type=“file” 的 <input> 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被選取的 input 元素 |
| :checked | $(":checked") | 所有被選中的 input 元素 |
三、JQuery樣式
1.CSS(name，value)
修改單個樣式
$(function(){$(".divcontent").css("background","red"); //修改背景顏色為紅色});2.CSS（{}）；修改多個樣式
$(function(){$(".divcontent").css({//邊框 1像素實線 紅色border:"1px solid red",//背景顏色綠色background:"green"});});3.Css（name）；
獲取樣式
$(function(){//返回rgb(0,0,0);console.log($(".divcontent").css("background"));});- 獲取已設置的樣式或默認的樣式，如果是給多個“li”設置的樣式，則返回第一個li元素的樣式
- 隱士迭代：偷偷的for循環。
- 設置的時候：會給JQ內部所有的對象都設置相同的值
- 獲取的時候：只會返回第一個元素對應的值
4.class操作：
- 4.1添加類：addClass("類名"); //類型不需要加.
在原有的基礎上添加類，不覆蓋任何類 - 4.2移除類：removeClass("類名");
- 4.3判斷類：hasClass(“類名”);
- 4.4切換類：toggleClass("類名");
總結
以上是生活随笔為你收集整理的JQuery简介选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript基本语法(续)
- 下一篇： JQuery绑定及效果