溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下jquery中如何選擇元素，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
1、網頁中元素介紹
1.1理解DOM
-- JQUERY最大的特性之一就是它能夠簡化在DOM中選擇元素的任務，
DOM 充當網頁和javascript之間的接口，它以對象網絡而非純文本的形式來表現html的代碼
<html>是網頁中的祖先元素；
搞清楚子元素，父元素，同輩元素之間的關系
2、如何通過CSS選擇符在頁面中查找元素
2.1使用$()函數
-- jquery的各種選擇符和方法取得的結果集合會被包裝在jquery對象中；
創建jquery對象就需要$()函數；
-- 這個對象能接受CSS選擇符作為參數，充當一個工廠，返回包含頁面中對應元素的jquery
對象
所有能在樣式表中使用的選擇符都可以傳給這個函數，隨后我們可以對匹配的元素集合應用
jquery方法
2.2三種基本選擇符
-- 標簽名選擇符、ID選擇符、類選擇符
-- 將方法連綴到$()工廠函數后面時，包裝在jquery對象中的元素會被自動、隱式的循環
遍歷。換句話說，這樣就避免了使用for循環之類的顯示迭代(這種迭代在dom腳本編程中
很常見)
2.3CSS選擇符
-- jquery支持支持CSS規范1到CSS規范3的幾乎所有選擇符，所以，不必為那種瀏覽器不理
解某種不太常用的選擇符而擔心，只要該瀏覽器啟用了javascript就沒有問題
2.3.1基于列表項的級別添加樣式
$(document).ready(function(){
$('#selected-plays > li').addClass('horizontal');
});
$()函數中的選擇符的含義是，查找ID為selected-plays的元素(#selected-plays)的子元
素(>)中所有的列表項(li)
$(document).ready(function(){
$('#selected-plays > li').addClass('horizontal');
$('#selected-plays > li:not('horizontal')').addClass('sub-lev');
});要為其他項（非頂級的項）添加樣式，有很多種方式。因為已經為頂級項添加了horizontal
類，所以取得全部非頂級項的一種方式，就是使用否定式偽類選擇符來識別沒有horizontal
類的所有列表項。
2.4屬性選擇符
-- 屬性選擇符是CSS選擇符中特別有用的一種選擇符，屬性選擇符通過HTML元素的屬性選
擇元素
屬性選擇符使用一種從正則表達式中借鑒來的語法
^ 表示值在字符串的開始
$ 表示值在字符串的結尾
* 表示值在字符串的任意位置
2.4.1為鏈接添加樣式
$(document).ready(function(){
$('a[href^="mailto"]').addClass('mailto');
});選擇A標簽的href屬性的值以mailto開頭的元素
$(document).ready(function(){
$('a[href$=".pdf"]').addClass('mailto');
});選擇A標簽的href屬性的值以.pdf結尾的元素
$(document).ready(function(){
$('a[href^="http"][href*="henry"]').addClass('mailto');
});選擇A標簽的href屬性的值以http開頭，并且在任意位置出現henry的元素
2.5自定義選擇符（此處的自定義選擇符是指jquery定義的選擇符）
-- 這類選擇符通常跟在CSS選擇符后面，基于已經選擇的元素集的位置來選擇元素
$('div.horizontal:eq(1))';選擇帶有horizontal類樣式的<div>集合中的第二項
$(document).ready(function(){
$('tr:even').addClass('alt');
});給dom中所有的奇數<tr>添加樣式類alt，偶數使用odd
:nth-child 這個選擇符相對于元素的父元素來進行計算，可以結束數字,odd,even作為參數
是jquery中唯一一個從1開始計數的選擇符
$(document).ready(function(){
$('td:contains(Henry)').addClass('highlight');
});選擇任何一個單元格的內容中包含Henry的元素，添加highlight樣式類 :contains() 區分大小寫
表單選擇符
:input 輸入類的元素
:button 按鈕元素或type為button的元素
:enabled 啟用的表單元素
:disabled 禁用的表單元素
:checked 勾選的單選按鈕或復選框
:selected 選擇的選項元素
2.6DOM遍歷方法
.filter()方法會迭代所有匹配的元素，對每個元素都調用傳入的函數兵進行測試函
數的返回值,true則保留，false則從匹配集合中刪除相應元素
$('tr').filter(':even').addClass('alt');.next 選擇匹配元素的后一個元素
$(document).ready(function(){
$('td:contains(Henry)').next().addClass('highlight');
});.nextAll 選擇匹配元素的后面所有元素
$(document).ready(function(){
$('td:contains(Henry)').nextAll().addClass('highlight');
});.prev 選擇匹配元素的錢一個元素
$(document).ready(function(){
$('td:contains(Henry)').prev().addClass('highlight');
});.prevAll 選擇匹配元素的前面所有元素
$(document).ready(function(){
$('td:contains(Henry)').prevAll().addClass('highlight');
});
.sliblings 選擇處于相同DOM層次的所有其他元素
$(document).ready(function(){
$('td:contains(Henry)').sliblings().addClass('highlight');
}); $(document).ready(function(){
$('td:contains(Henry)').nextAll().addBack().addClass('highlight');
});.addBack() 在選擇的元素中再包含原來的元素
$(document).ready(function(){
$('td:contains(Henry)').parent().children().addClass('highlight');
}); 通過.parent()在DOM中追溯到上一層到達<tr>,然后再通過.children()選擇該行的
所有單元格
2.7訪問DOM元素
為什么要訪問DOM:所有選擇符表達式和多數jquery方法都返回一個jquery對象，而這通常是
我們所期望的因為jquery對象能夠提供隱式迭代能力；但是有時候我們還是可能需要再代碼
中直接訪問DOM元素，
var myTag = $('#my-element').get(0).tagName;
簡寫：var myTag = $('#my-element')[0].tagName;選擇id為my-element的元素的標簽名
以上是“jquery中如何選擇元素”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
