jQuery中選擇查找自定義屬性具有特定值的所有元素
傳統(tǒng)的HTML中如果想要實現(xiàn)某種樣式,可以在標簽上添加id、class、或者在標簽上添加固有屬性,通過CSS中的類選擇器、id選擇器、屬性選擇器來實現(xiàn),在許多UI框架中,例如:bootstrap,可以通過data-[ ]自定義屬性,不用寫一行js代碼,方便了很多。同樣在HTML5可以通過data-自定義屬性名來給元素添加自定義的屬性名。一旦添加完成之后。通過JS可以獲取以及設(shè)置自定義屬性。
自定義屬性目的:是為了保存并使用數(shù)據(jù)。有些數(shù)據(jù)可以保存到頁面中而不保存到數(shù)據(jù)庫中。
自定義屬性獲得是通過getAttribute('屬性')獲得,但有些自定義屬性很容易引起歧義,不容易判斷是元素的內(nèi)置屬性還是自定義屬性。
一、自定義屬性(html5標準)data-屬性名稱="屬性值"
自定義屬性的名稱駝峰式命名規(guī)則需要用-隔開
自定義屬性名稱如果連在一起寫,大寫會自動轉(zhuǎn)為小寫
data-user="eric"======>屬性名稱是user data-user-name="eric"===>屬性名稱是userName data-userName="eric"=====>屬性名稱是username
二、jquery自定義屬性常用操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>實例</title> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ var t1=$('.test').data();//獲取該元素全部自定義屬性 var t2=$('.test').data('age');//獲取指定自定義屬性 console.log(t1);//{age:18,user:"li"} console.log(t2);//18 $('.test').data('age',20);//改變自定義屬性 console.log(t1);//{age:20,user:"li"} $('.test').data('weight','60kg');//設(shè)置新自定義屬性 console.log(t1);//{age:20,user:"li",weight:"60kg"} }); </script> </head> <body> <div class="test" data-user="li" data-age="18"> </div> </body> </html>
三、jQuery中選擇查找自定義屬性具有特定值的所有元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>實例</title> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $('a[data-url="1.html"]').html('<span style="color:red">5.html</span>'); $('a[data-url="2.html"]').html('<span style="color:yellow">6.html</span>'); }); </script> </head> <body> <div class="test" data-user="li" data-age="18"> <a href="javascript:void(0);" data-url="1.html">1.html</a> <a href="javascript:void(0);" data-url="1.html">1.html</a> <a href="javascript:void(0);" data-url="2.html">2.html</a> <a href="javascript:void(0);" data-url="3.html">3.html</a> <a href="javascript:void(0);" data-url="4.html">4.html</a> </div> </body> </html>
到此這篇關(guān)于jQuery中選擇查找自定義屬性具有特定值的所有元素的文章就介紹到這了,更多相關(guān)jquery獲取指定屬性值的元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于javascript實現(xiàn)數(shù)字英文驗證碼
這篇文章主要為大家詳細介紹了javascript實現(xiàn)數(shù)字英文驗證碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01JS兼容瀏覽器的導(dǎo)出Excel(CSV)文件的方法
項目中經(jīng)常需要導(dǎo)出Excel文件,不在服務(wù)器端處理而是富客戶端采用Javascript腳本處理數(shù)據(jù)并導(dǎo)出文件2014-05-05ajaxfileupload.js實現(xiàn)上傳文件功能
這篇文章主要為大家詳細介紹了ajaxfileupload.js實現(xiàn)上傳文件功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-04-04console.log()與console.dir()的區(qū)別及說明
這篇文章主要介紹了console.log()與console.dir()的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01讓JavaScript擁有類似Lambda表達式編程能力的方法
在前幾天的博文中我發(fā)布了一個可以自定義頁碼呈現(xiàn)方式的組件,有C#和JavaScript兩個版本。2010-09-09js監(jiān)聽元素是否出現(xiàn)在可視區(qū)域詳解(IntersectionObserver)
這篇文章主要給大家介紹了關(guān)于js監(jiān)聽元素是否出現(xiàn)在可視區(qū)域(IntersectionObserver)的相關(guān)資料, IntersectionObserver是一個JavaScript API,用于監(jiān)測一個元素與其父元素或視窗的交叉狀態(tài),需要的朋友可以參考下2024-06-06解決layui前端框架 form表單,table表等內(nèi)置控件不顯示的問題
今天小編就為大家分享一篇解決layui前端框架 form表單,table表等內(nèi)置控件不顯示的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08