本文為大家總結了jQuery的四種選擇器的使用方法以及範例，非常的簡單實用，希望對大家學習jquery能夠有所幫助。
jQuery 元素選擇器
# jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取
元素。
$("p.intro") 選取所有 class="intro" 的
元素。
$("p#demo") 選取所有 id="demo" 的
元素。
範例程式碼：
jquery 部分
$(document).ready(function(){//页面加载完成后执行
tagName();
// idName();
// className();
});
function tagName(){
$('p').addClass('heighlight');
}
function idName(){
$('#p').addClass('heighlight2');
}
function className(){
$('p.pClass').addClass('heighlight2');
}html部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/select.js" ></script> <link rel="stylesheet" href="css/select.css" /> </head> <body> <p id="p"> <p>this is my name!!</p> <p class="pClass">class is import!</p> <a href="#">you cai!!</a> </p> </body> </html>
css部分
.heighlight {
background-color: blue;
}
.heighlight2 {
background-color: red;
}
.alt{
background-color:#ccc;
}jQuery 屬性選擇器
Query 使用XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
jquery部分，其他部分同上。
$(document).ready(function(){
attribute();
});
function attribute(){
$('[href="#"]').addClass('heighlight');
}jQuery CSS 選擇器
.addClass()或是.css()
$(document).ready(function(){
cssName();
});
function cssName(){
$('p').css("background-color","pink");
}jQuery 自訂選擇符
$(document).ready(function(){
custom();
});
function custom(){
$('tr:odd').addClass('alt');
}附表
| 選擇器 | 實例 | 選取 |
|---|---|---|
| * | $(" *") | 所有元素 |
| #id | $("#lastname") | # id="lastname" 的元素 |
| .class | $(".intro") | 所有class="intro" 的元素 |
| element | $("p") | 所有 元素 |
| class.class | $(".intro.demo")所有class="intro" 且class="demo" 的元素 | |
| # | ||
| :first | $("p:first") | #第一個 元素 |
| :last | $("p:last") | 最後一個 元素 |
| :even | $(" tr:even") | 所有偶數 |
| #:odd | ##$("tr:odd")#所有奇數 | |
| #:eq(index) | ##$(" ul li:eq(3)")清單中的第四個元素（index 從0 開始） | |
| no ) | $("ul li:gt(3)")列出index 大於3 的元素 | |
| no) | $("ul li:lt(3)")列出index 小於3 的元素 | |
| :not(selector) | $("input:not(:empty)") | 所有不為空的input 元素 |
| :header | $(":header") | 所有標題元素- |
| #:animated | 所有動畫元素 | |
| #:contains(text) | $(" :contains('W3School')") | 包含指定字串的所有元素 |
| :empty | ##$(":empty")無子（元素）節點的所有元素 | |
| $("p:hidden") | 所有隱藏的 | # |
| :visible | $("table:visible") | 所有可見的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有帶有匹配選擇的元素 |
| # | # | |
| [attribute] | $("[href]") | 所有帶有href 屬性的元素 |
| [attribute=value] | #$("[href='#']") | 所有href 屬性的值等於"#" 的元素 |
| [attribute!=value] | $("[href!=' #']") | 所有href 屬性的值不等於"#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有href 屬性的值包含以".jpg" 結尾的元素 |
| #:input | ##$(":input")||
| :radio | $(":radio") | 所有type="radio" 的 元素 |
| :button | $(":button") | 所有type="button" 的 元素 |
| :enabled | $(":enabled") | 所有啟動的input 元素 |
| :disabled | #$(":disabled") | 所有已停用的input 元素 |
| #:selected | ##$(":selected")所有被選取的input 元素 | |
| $(":checked") | 所有被選取的input 元素 |
以上是jQuery四種選擇器使用及範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
