jQuery中选择查找自定义属性具有特定值的所有元素

jquery获取指定属性值的元素 jquery查找自定义属性具有特定值的元素 2023-02-25 14:02:42 234人浏览独家记忆

摘要

目录一、自定义属性（HTML5标准）data-属性名称="属性值"二、Jquery自定义属性常用操作三、jQuery中选择查找自定义属性具有特定值的所有元素传统的

传统的html中如果想要实现某种样式，可以在标签上添加id、class、或者在标签上添加固有属性，通过CSS中的类选择器、id选择器、属性选择器来实现，在许多UI框架中，例如：bootstrap，可以通过data-[ ]自定义属性，不用写一行js代码，方便了很多。同样在HTML5可以通过data-自定义属性名来给元素添加自定义的属性名。一旦添加完成之后。通过JS可以获取以及设置自定义属性。

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不保存到数据库中。

自定义属性获得是通过getAttribute('属性')获得，但有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

一、自定义属性（html5标准）data-属性名称="属性值"

自定义属性的名称驼峰式命名规则需要用-隔开

自定义属性名称如果连在一起写，大写会自动转为小写

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);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  data-url="1.html">1.html</a>
		<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  data-url="1.html">1.html</a>
		<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  data-url="2.html">2.html</a>
		<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  data-url="3.html">3.html</a>
		<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  data-url="4.html">4.html</a>
	</div>
</body>
</html>

到此这篇关于jQuery中选择查找自定义属性具有特定值的所有元素的文章就介绍到这了,更多相关jquery获取指定属性值的元素内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jQuery中选择查找自定义属性具有特定值的所有元素

本文链接: https://www.lsjlt.com/news/197540.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341