jQuery是一個非常流行的JavaScript庫,它可以極大地簡化JavaScript編程任務。其中,選擇器是jQuery的核心特性之一,可以幫助開發人員快速、精確地獲取和操作文檔元素。
本文介紹jQuery選擇器全集,讓你可以更加高效地使用jQuery的選擇器。
1. 基本選擇器
$(document) //選擇整個文檔對象 $("#myId") //選擇ID為myId的元素 $("div") //選擇所有<div>元素 $("div.myClass") //選擇所有class為myClass的<div>元素 $("input[name='name']") //選擇所有name屬性為name的<input>元素
2. 層次選擇器
$("body a") //選擇在<body>標簽中的所有<a>元素 $("ul#myList li:first-child") //選擇ID為myList的<ul>元素中的第一個<li>元素
3. 過濾選擇器
$("ul li:first") //選擇所有<ul>中第一個<li>元素 $("ul li:last") //選擇所有<ul>中最后一個<li>元素 $("ul li:even") //選擇所有<ul>中偶數位置的<li>元素 $("ul li:odd") //選擇所有<ul>中奇數位置的<li>元素 $("ul li:eq(2)") //選擇所有<ul>中第3個<li>元素 $("ul li:gt(2)") //選擇所有<ul>中第3個之后的<li>元素 $("ul li:lt(2)") //選擇所有<ul>中前2個<li>元素
4. 表單選擇器
$(":input") //選擇所有<input>、<textarea>、<select>和<button>元素 $(":text") //選擇所有type為text的<input>元素 $(":password") //選擇所有type為password的<input>元素 $(":radio") //選擇所有type為radio的<input>元素 $(":checkbox") //選擇所有type為checkbox的<input>元素 $(":submit") //選擇所有type為submit的<button>元素 $(":image") //選擇所有type為image的<input>元素 $(":reset") //選擇所有type為reset的<button>元素 $(":button") //選擇所有type為button的<button>元素 $(":file") //選擇所有type為file的<input>元素
5. 可見性選擇器
$(":visible") //選擇所有可見元素 $(":hidden") //選擇所有隱藏元素
6. 屬性選擇器
$("[title]") //選擇所有有title屬性的元素 $("[title='Hello']") //選擇所有title屬性為Hello的元素 $("[title!='Hello']") //選擇所有title屬性不為Hello的元素 $("[title^='He']") //選擇所有title屬性以He開頭的元素 $("[title$='lo']") //選擇所有title屬性以lo結尾的元素 $("[title*='ell']") //選擇所有title屬性中包含ell的元素
以上就是jQuery選擇器全集的詳細介紹。通過熟練使用這些選擇器,能夠讓你更快速、更準確地定位頁面元素,并對其進行有效地操作。