小編給大家分享一下jquery中如何選擇元素,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
1、網頁中元素介紹
1.1理解DOM
-- JQUERY大的特性之一就是它能夠簡化在DOM中選擇元素的任務,
DOM 充當網頁和javascript之間的接口,它以對象網絡而非純文本的形式來表現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類樣式的 給dom中所有的奇數 :nth-child 這個選擇符相對于元素的父元素來進行計算,可以結束數字,odd,even作為參數 是jquery中唯一一個從1開始計數的選擇符 選擇任何一個單元格的內容中包含Henry的元素,添加highlight樣式類 :contains() 區分大小寫 表單選擇符 :input 輸入類的元素 :button 按鈕元素或type為button的元素 :enabled 啟用的表單元素 :disabled 禁用的表單元素 :checked 勾選的單選按鈕或復選框 :selected 選擇的選項元素 2.6DOM遍歷方法 .filter()方法會迭代所有匹配的元素,對每個元素都調用傳入的函數兵進行測試函 數的返回值,true則保留,false則從匹配集合中刪除相應元素 .next 選擇匹配元素的后一個元素 .nextAll 選擇匹配元素的后面所有元素 .prev 選擇匹配元素的錢一個元素 .prevAll 選擇匹配元素的前面所有元素 .sliblings 選擇處于相同DOM層次的所有其他元素 .addBack() 在選擇的元素中再包含原來的元素 通過.parent()在DOM中追溯到上一層到達 2.7訪問DOM元素 為什么要訪問DOM:所有選擇符表達式和多數jquery方法都返回一個jquery對象,而這通常是 我們所期望的因為jquery對象能夠提供隱式迭代能力;但是有時候我們還是可能需要再代碼 中直接訪問DOM元素, 選擇id為my-element的元素的標簽名 以上是“jquery中如何選擇元素”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創新互聯行業資訊頻道! 另外有需要云服務器可以了解下創新互聯scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。 $(document).ready(function(){
$('tr:even').addClass('alt');
});
添加樣式類alt,偶數使用odd $(document).ready(function(){
$('td:contains(Henry)').addClass('highlight');
});
$('tr').filter(':even').addClass('alt');
$(document).ready(function(){
$('td:contains(Henry)').next().addClass('highlight');
});
$(document).ready(function(){
$('td:contains(Henry)').nextAll().addClass('highlight');
});
$(document).ready(function(){
$('td:contains(Henry)').prev().addClass('highlight');
});
$(document).ready(function(){
$('td:contains(Henry)').prevAll().addClass('highlight');
});
$(document).ready(function(){
$('td:contains(Henry)').sliblings().addClass('highlight');
});
$(document).ready(function(){
$('td:contains(Henry)').nextAll().addBack().addClass('highlight');
});
$(document).ready(function(){
$('td:contains(Henry)').parent().children().addClass('highlight');
});
,然后再通過.children()選擇該行的
所有單元格 var myTag = $('#my-element').get(0).tagName;
簡寫:var myTag = $('#my-element')[0].tagName;
當前名稱:jquery中如何選擇元素-創新互聯
當前網址:http://m.jcarcd.cn/article/dcjjej.html
其他資訊