jQuery的幾種選擇器及實(shí)例詳解
jQuery 選擇器允許您對 HTML 元素組或單個元素進(jìn)行操作。
jQuery 選擇器
jQuery 選擇器允許您對 HTML 元素組或單個元素進(jìn)行操作。
jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基于已經(jīng)存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。
jQuery 中所有選擇器都以美元符號開頭：$()。
元素選擇器
jQuery 元素選擇器基于元素名選取元素。
在頁面中選取所有 <p> 元素:
$("p")
實(shí)例
用戶點(diǎn)擊按鈕后，所有 <p> 元素都隱藏：
實(shí)例
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
#id 選擇器
jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
頁面中元素的 id 應(yīng)該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
通過 id 選取元素語法如下：
$("#test")
實(shí)例
當(dāng)用戶點(diǎn)擊按鈕后，有 id="test" 屬性的元素將被隱藏：
實(shí)例
$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
.class 選擇器
jQuery 類選擇器可以通過指定的 class 查找元素。
語法如下：
$(".test")
實(shí)例
用戶點(diǎn)擊按鈕后所有帶有 class="test" 屬性的元素都隱藏：
實(shí)例
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
更多實(shí)例
| 語法 | 描述 | 實(shí)例 |
| $("*") | 選取所有元素 | 在線實(shí)例 |
| $(this) | 選取當(dāng)前 HTML 元素 | 在線實(shí)例 |
| $("p.intro") | 選取 class 為 intro 的 <p> 元素 | 在線實(shí)例 |
| $("p:first") | 選取第一個 <p> 元素 | 在線實(shí)例 |
| $("ul li:first") | 選取第一個 <ul> 元素的第一個 <li> 元素 | 在線實(shí)例 |
| $("ul li:first-child") | 選取每個 <ul> 元素的第一個 <li> 元素 | 在線實(shí)例 |
| $("[href]") | 選取帶有 href 屬性的元素 | 在線實(shí)例 |
| $("a[target='_blank']") | 選取所有 target 屬性值等于 "_blank" 的 <a> 元素 | 在線實(shí)例 |
| $("a[target!='_blank']") | 選取所有 target 屬性值不等于 "_blank" 的 <a> 元素 | 在線實(shí)例 |
| $(":button") | 選取所有 type="button" 的 <input> 元素 和 <button> 元素 | 在線實(shí)例 |
| $("tr:even") | 選取偶數(shù)位置的 <tr> 元素 | 在線實(shí)例 |
| $("tr:odd") | 選取奇數(shù)位置的 <tr> 元素 | 在線實(shí)例 |
獨(dú)立文件中使用 jQuery 函數(shù)
如果您的網(wǎng)站包含許多頁面，并且您希望您的 jQuery 函數(shù)易于維護(hù)，那么請把您的 jQuery 函數(shù)放到獨(dú)立的 .js 文件中。
當(dāng)我們在教程中演示 jQuery 時，會將函數(shù)直接添加到 <head> 部分中。不過，把它們放到一個單獨(dú)的文件中會更好，就像這樣（通過 src 屬性來引用文件）：
實(shí)例
<head> <script src="//cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script> </head>
到此這篇關(guān)于jQuery的幾種選擇器詳解的文章就介紹到這了,更多相關(guān)jQuery選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
jquery的attr方法禁用表單元素禁用輸入內(nèi)容
這篇文章主要介紹了通過jquery的attr方法來禁用表單元素禁輸入內(nèi)容，示例如下，需要的朋友可以參考參考2014-06-06
滾動圖片效果 jquery實(shí)現(xiàn)回旋滾動效果
jquery滾動圖片效果,有些新手朋友可能不是很清楚，今天在網(wǎng)上找到一款回旋滾動效果，拿出來和大家一起分享，感興趣的朋友可以了解下哦2013-01-01
jquery表單驗(yàn)證插件formValidator使用方法
這篇文章主要為大家詳細(xì)介紹了Jquery表單驗(yàn)證插件formValidator的相關(guān)使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
jQuery實(shí)現(xiàn)提交按鈕點(diǎn)擊后變成正在處理字樣并禁止點(diǎn)擊的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)提交按鈕點(diǎn)擊后變成正在處理字樣并禁止點(diǎn)擊的方法,涉及jQuery中val與attr方法的使用技巧,需要的朋友可以參考下2015-03-03
jquery ajax 如何向jsp提交表單數(shù)據(jù)
ajax技術(shù)在做表單數(shù)據(jù)傳值非常棒，給用戶帶來很好的用戶體驗(yàn)度，同時，使用jquery可以簡化開發(fā)，提高效率。下面給大家介紹jquery ajax 如何向jsp提交表單數(shù)據(jù)，需要的朋友可以參考下2015-08-08
jquery驗(yàn)證手機(jī)號碼、郵箱格式是否正確示例代碼
本文為大家介紹下使用jquery驗(yàn)證郵箱、驗(yàn)證手機(jī)號碼，具體實(shí)現(xiàn)思路及代碼如下，感興趣的朋友可以學(xué)習(xí)下2013-07-07
基于jquery的button默認(rèn)enter事件(回車事件)。
這里我介紹一下，button按鈕默認(rèn)回車（enter）事件。如果大家可以用submit，就不用看以下代碼，因?yàn)閟ubmit可以直接默認(rèn)回車事件（enter）2011-05-05
jQuery實(shí)現(xiàn)動態(tài)添加和刪除一個div
我想做一個可以動態(tài)添加刪除div的功能。中間遇到一個問題，最后在網(wǎng)友的熱心幫助下解決了，使用到的jquery方法和思想就是：事件的綁定和銷毀(unbind)2015-08-08
jquery怎樣實(shí)現(xiàn)ajax聯(lián)動框(二)
ajax聯(lián)動框想必大家早有所耳聞，接下來將介紹jquery實(shí)現(xiàn)另一種形式的聯(lián)動框，右邊的聯(lián)動框用jquery生成，仿照上篇的js方法修改的，感興趣的你可以參考下希望可以幫助到你2013-03-03
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)戶籍地選擇下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06