jQuery中選擇查找自定義屬性具有特定值的所有元素
更新時間：2023年02月25日 12:12:54 投稿：yin
同樣在HTML5可以通過data-自定義屬性名來給元素添加自定義的屬性名。一旦添加完成之后。通過JS可以獲取以及設置自定義屬性。這篇文章主要介紹了jQuery中選擇查找自定義屬性具有特定值的所有元素
傳統(tǒng)的HTML中如果想要實現(xiàn)某種樣式，可以在標簽上添加id、class、或者在標簽上添加固有屬性，通過CSS中的類選擇器、id選擇器、屬性選擇器來實現(xiàn)，在許多UI框架中，例如：bootstrap，可以通過data-[ ]自定義屬性，不用寫一行js代碼，方便了很多。同樣在HTML5可以通過data-自定義屬性名來給元素添加自定義的屬性名。一旦添加完成之后。通過JS可以獲取以及設置自定義屬性。
自定義屬性目的：是為了保存并使用數(shù)據(jù)。有些數(shù)據(jù)可以保存到頁面中而不保存到數(shù)據(jù)庫中。
自定義屬性獲得是通過getAttribute('屬性')獲得，但有些自定義屬性很容易引起歧義，不容易判斷是元素的內(nèi)置屬性還是自定義屬性。
一、自定義屬性（html5標準）data-屬性名稱="屬性值"
自定義屬性的名稱駝峰式命名規(guī)則需要用-隔開
自定義屬性名稱如果連在一起寫，大寫會自動轉為小寫
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');//設置新自定義屬性
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>到此這篇關于jQuery中選擇查找自定義屬性具有特定值的所有元素的文章就介紹到這了,更多相關jquery獲取指定屬性值的元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了JS實現(xiàn)黑色大氣的二級導航菜單效果,具有延遲響應鼠標事件顯示切換效果的功能,非常簡單實用,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了ES6之模版字符串的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
javascript查找字符串中出現(xiàn)最多的字符和次數(shù)的小例子
這篇文章介紹了javascript查找字符串中出現(xiàn)最多的字符和次數(shù)的小例子，有需要的朋友可以參考一下2013-10-10
這篇文章主要介紹了bootstrap表單樣式的使用，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
這篇文章主要給大家介紹了關于JavaScript判斷文件是否存在的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這個可以增加用戶驗證，不用js alert來作提示，而是在右邊提示，現(xiàn)在很多網(wǎng)站都這樣做，有需要的朋友可以參考一下2013-08-08
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
本篇文章給大家分享了JavaScript滿天星導航欄實現(xiàn)方法，以前也介紹過很多關于特效導航的制作方法，對此有興趣的朋友參考學習下。2018-03-03
今天小編就為大家分享一篇在Layui中實現(xiàn)開關按鈕的效果實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
如何在Mozilla Gecko 用Javascript加載XSL
如何在Mozilla Gecko 用Javascript加載XSL...2007-01-01