jQuery中的属性过滤选择器（四、五）：[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等

时间：2023-02-28 07:46:54
<!DOCTYPE html>

<html>

<head>

<title>属性过滤选择器</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="js/jquery-1.11.3.js"></script>

<style type="text/css">

body {

	font-family: "Microsoft YaHei"

}

.divCls {

	width: 180px;

	height: 180px;

	color: white;

	border: solid 1px white;

	margin-left: 10px;

	float: left;

	background-color: #792F7C;

}

.subDivCls {

	width: 60px;

	height: 60px;

	color: white;

	border: solid 1px white;

	font-size: 12px;

	margin: 5px;

	float: right;

	background-color: #01A6A2;

}

.spanCls {

	color: white;

	border: solid 1px white;

	margin: 5px;

	float: left;

	height: 50px;

	background-color: #ED4A9F;

}

div span {

	border: solid 1px white;

	font-size: 12px;

	margin: 5;

	background-color: #ED4A9F;

}

.cGreen {

	background-color: #4CA902

}

.cPink {

	background-color: #ED4A9F

}

.cBlue {

	background-color: #0092E7

}

.cCyan {

	background-color: #01A6A2

}

.cYellow {

	background-color: #DCA112

}

.cRed {

	background-color: #B7103B

}

.cPurple {

	background-color: #792F7C

}

.cBlack {

	background-color: #110F10

}

.cOrange {

	background-color: #FF4500

}

.cGray {

	background-color: #A9A9A9

}

.hide {

	display: none;

}

</style>

<script type="text/javascript">

	$(document).ready(function() {

		/*

		选取有id属性的div元素，这里的属性就要用中括号表示了

		*/

		// <input type="button" id="btn1" value="选取所有含有id属性的div元素">

		$("#btn1").click(function() {

			$("div[id]").addClass("cBlack"); // 含有id属性的div

		});

		// <input type="button" id="btn2" value="选取title属性值等于mzy的div元素">

		$("#btn2").click(function() {

			$("div[title='mzy']").addClass("cBlack"); // id属性为mzy的的div

		});

		// <input type="button" id="btn3" value="选取不含有title属性或title属性值不等于mzy的div元素">

		$("#btn3").click(function() {

			/*

			注意这里的不等于并不是真正意义上的title不为mzy，

			也包含了不存在title属性的div：

			这个是指所有不包含title属性的div，以及title属性不为mzy的div。

			*/

			$("div[title!='mzy']").addClass("cBlack");

		});

		// <input type="button" id="btn4" value="选取title属性值是以m开头的div元素">

		$("#btn4").click(function() {

			/*

			属性选择器中，^代表开头。

			*/

			$("div[title^='m']").addClass("cBlack");

		});		

		// <input type="button" id="btn5" value="选取title属性值是以zy结尾的div元素">

		$("#btn5").click(function() {

			/*

			属性选择器中，$代表结尾。

			*/

			$("div[title$='zy']").addClass("cBlack");

		});

		/*

		在我误写，给一个btn注册了两个click

		事件之后，发现不会报错，但是也不会产生效果；

		注意不要给一个btn注册两个click事件。

		*/

		// <input type="button" id="btn6" value="选取title属性值包含有z的div元素">

		$("#btn6").click(function() {

			/*

			属性选择器中，*代表任意位置包含。

			*/

			$("div[title*='z']").addClass("cBlack");

		});	

		/*

		关于对单个元素标签，做多次属性选择的时候

		我们通常将属性并列起来，例如：

		div[][][]...，这样就可以对单个元素标签

		进行多条件选择了！

		*/

		// <input type="button" id="btn7" value="选取含有id属性并且title属性值包含有z的div元素">

		$("#btn7").click(function() {

			// 加空格也是可以的，但是害怕了最好不要乱加

			// 因为有层次选择器中子代元素的前例。

			// $("div[id][title *= z]").addClass("cBlack");

			$("div[id][title*=z]").addClass("cBlack");

		});

	});

</script>

</head>

<body>

	<div id="div1" class="divCls" title="test">

		id 为div1 的div，title为test<br>

		<br>

		<div class="subDivCls">class为subDivCls的div</div>

	</div>

	<div id="div2" class="divCls">

		id 为div2 的div <br>

		<br> <span id="span1">div2里面的span,id为span1</span> <br>

		<br>

		<div class="subDivCls" style="float: left;">class为subDivCls的div</div>

		<div class="subDivCls">

			subDivCls <span id="span2">span2</span>

		</div>

	</div>

	<div id="div3" class="divCls" title="mzy">

		id 为div3 的div，title为mzy，包含隐藏输入框 <input type="hidden" value="hello">

	</div>

	<span class="spanCls">div3的兄弟元素span</span>

	<div id="div4" class="divCls">

		id 为div4 的div<br>

		<div class="subDivCls" style="float: left;">

			subDivCls<br> <span id="span2">span4</span>

		</div>

		<div class="subDivCls" title="mzy">title为mzy</div>

		<div class="subDivCls" style="float: left;" title="test">title为test</div>

		<div class="subDivCls"></div>

	</div>

	<p style="clear: both;"></p>

	<br>

	<hr>

	<input type="button" id="btn1" value="选取所有含有id属性的div元素">

	<input type="button" id="btn2" value="选取title属性值等于mzy的div元素">

	<input type="button" id="btn3" value="选取不含有title属性或title属性值不等于mzy的div元素">

	<input type="button" id="btn4" value="选取title属性值是以m开头的div元素">

	<input type="button" id="btn5" value="选取title属性值是以zy结尾的div元素">

	<input type="button" id="btn6" value="选取title属性值包含有z的div元素">

	<input type="button" id="btn7" value="选取含有id属性并且title属性值包含有z的div元素">

</body>

</html>

jQuery中的属性过滤选择器（四、五）：[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等的更多相关文章

  1. jQuery表单对象属性过滤选择器

    jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...

  2. Jquery &vert; 基础 &vert; jQuery表单对象属性过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...

  3. jQuery中的基本过滤选择器（四、三）：&colon;first、&colon;last、&colon;not&lpar;&rpar; &period;&period;&period; &period;&period;&period;

    <!DOCTYPE html> <html> <head> <title>基本过滤选择器</title> <meta http-equ ...

  4. jquery选择器之属性过滤选择器

    <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...

  5. jquery选择器之属性过滤选择器详解

    代码如下: <style type="text/css">  /*高亮显示*/  .highlight{       } </style> 复制代码代码如下 ...

  6. jQuery中的表单对象属性过滤选择器（四、八）：&colon;enabled、&colon;disabled、&colon;checked、&colon;selected

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. jQuery之属性过滤选择器

    转自:http://blog.csdn.net/woshisap/article/details/7341136 在HTML文档中,元素的开始标记中通常包含有多个属性(attribute), 在jQu ...

  8. 黑马day16 jquery&amp&semi;amp&semi;属性过滤选择器

    属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素 .[attribute] 使用方法: $("div[id]") ;  返回值  集合元素 说明:匹配包括给定属性的元素.样 ...

  9. Jquery &vert; 基础 &vert; 属性过滤选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. leetcode bugfree note

    463. Island Perimeterhttps://leetcode.com/problems/island-perimeter/就是逐一遍历所有的cell,用分离的cell总的的边数减去重叠的 ...

  2. hdu 3999 The order of a Tree &lpar;二叉搜索树&rpar;

    /****************************************************************** 题目: The order of a Tree(hdu 3999 ...

  3. 真实世界：使用WCF扩展记录服务调用时间

    WCF 可扩展性 WCF 提供了许多扩展点供开发人员自定义运行时行为. WCF 在 Channel Layer 之上还提供了一个高级运行时,主要是针对应用程序开发人员.在 WCF 文档中,它常被称为服 ...

  4. &lbrack;Node&period;js&rsqb; Using npm link to use node modules that are &quot&semi;in progress&quot&semi;

    It is some times convenient, even necessary, to make use of a module that you are working on before ...

  5. bzoj3351：&lbrack;ioi2009&rsqb;Regions

    思路:首先如果颜色相同直接利用以前的答案即可,可以离线排序或是在线hash,然后考虑怎么快速统计答案. 首先如果点a是点b的祖先,那么一定有点b在以点a为根的子树的dfs序区间内的,于是先搞出dfs序 ...

  6. Android&colon;TextView跑马灯-详解

    Android:TextView跑马灯_详解 引言: TextView之所以需要跑马灯,是由于文字太长,或者是吸引眼球. 关键代码如下: android:singleLine="true&q ...

  7. java concurrency&colon; daemon线程

    daemon线程的概念 在学习操作系统概念的时候,我们就曾听说过daemon的概念.daemon本身指的是在后台运行的进程或者线程,一般用来提供某些不需要与用户直接交互的服务,有点像我们见到的一些系统 ...

  8. jmeter对http协议中post请求接口测试

     现在有很多的工具用于工作上的使用,在jmeter的开源工具当中的,提供了一个可以对http协议的post的请求上接口测试,用于实现接口测试的自动化测试,当然也可以使用自己写的工具. 进行打开jmet ...

  9. bzoj 2440 （莫比乌斯函数）

    bzoj 2440 完全平方数 题意:找出第k个不是完全平方数的正整数倍的数. 例如 4  9  16  25 36什么的 通过容斥原理,我们减去所有完全数  4有n/4个,但是36这种会被重复减去, ...

  10. 几个常用的vscode插件

    1.Vetur 可以对.vue文件格式做语法高亮,开发基于Vue项目的标配插件 2.Power Mode 在写代码时出现如烟花.粒子.火焰之类的效果,增加写代码的乐趣 3.Chinese (simpl ...

相关文章