jQuery笔记之属性选择器

最新推荐文章于 2021-02-22 19:11:15 发布

ArryLuo123

最新推荐文章于 2021-02-22 19:11:15 发布

阅读量652

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/ArryLuo123/article/details/56354451

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

//验证以上理论

<!DOCTYPE html>
<html>
	<!--属性选择器-->

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script>
			$(function() {
				//改变含有title属性的<h2>元素的背景颜色，语法(选取包含给定属性的元素)实例$(" [href]" )选取含有href属性的元素
				$("h2[title]").css("background-color", "red");
				/**
				 * [attribute=value]
				 * 描述(选取等于给定属性是某个特定值的元素)
				 * 实例:$(" [href ='#']" )选取href属性值为“#”的元素
				 */
				//改变class属性的值为odds的元素的背景颜色
				$("[class=odds]").css("background-color", "aqua");
				/**
				 * 语法:[attribute !=value]
				 * 描述：选取不等于给定属性是某个特定值的元素
				 * 实例:$(" [href !='#']" )选取href属性值不为“#” 的元素
				 */
				//改变id属性的值不为box的元素的背景颜色
				$("[id!=box]").css("background-color", "red");
				/**
				 * [attribute^=value]
				 * 描述:选取给定属性是以某些特定值开始的元素
				 * 实例:$(" [href^='en']" )选取href属性值以en开头的元素
				 */
				//改变title属性的值中以h开头的元素的背景颜色
				$("[title^=h]").css("background-color", "yellow");
				/**
				 * 语法:[attribute$=value]
				 * 描述：选取给定属性是以某些特定值结尾的元素
				 * 实例:$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
				 */
				//改变title属性的值中以jp结尾的元素的背景颜色
				$("[title$=jp]").css("background-color", "hotpink");
				/**
				 * 语法[attribute*=value]
				 * 描述:选取给定属性是以包含某些值的元素
				 * 实例:$(" [href* ='txt']" )选取href属性值中含有txt的元素
				 */
				//改变title属性的值中含有s的元素的背景颜色
				$("[title*=s]").css("background-color", "green");
				/**
				 * 语法:[selector][selector2][selectorN]
				 * 描述:选取满足多个条件的复合属性的元素
				 * 实例:$("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的<li>元素
				 */
				//改变包含class属性，且title属性的值中含有y的<li>元素的背景颜色
				$("li[class][title*=y]").css("background-color","aquamarine");
				
			});
		</script>
	</head>
	<div id="box">
		<h2 class="odds" title="cartoonlist">动画列表</h2>
		<ul>
			<li class="odds" title="kn_jp">名侦探柯南</li>
			<li class="evens" title="hy_jp">火影忍者</li>
			<li class="odds" title="ss_jp">死神</li>
			<li class="evens" title="yj_jp">妖精的尾巴</li>
			<li class="odds" title="yh_jp">银魂</li>
			<li class="evens" title="hm_da">黑猫警长</li>
			<li class="odds" title="xl_ds">仙履奇缘</li>
		</ul>
	</div>

	<body>
	</body>

</html>

ArryLuo123

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery笔记之属性选择器

//验证以上理论 $(function() { //改变含有title属性的元素的背景颜色，语法(选取包含给定属性的元素)实例$(" [href]" )选取含有href属性的元素 $("h2[title]").css("background-color", "red"); /** * [attribute=value]
复制链接

扫一扫