<!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 | 基础 | jQuery表单对象属性过滤选择器

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

  3. jQuery中的基本过滤选择器（四、三）：:first、:last、:not() ... ...

    <!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中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、: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;属性过滤选择器

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

  9. Jquery | 基础 | 属性过滤选择器

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

随机推荐

  1. Map集合笔记

    一.Map集合的特点 Map集合是一个双列集合 Map中的元素,key和value的数据类型可以相同,也可以不同. Map中的元素,key是允许重复的,value是可以重复的 Map中的元素,key和 ...

  2. [源码解析] 深度学习分布式训练框架 horovod (18) --- kubeflow tf-operator

    [源码解析] 深度学习分布式训练框架 horovod (18) --- kubeflow tf-operator 目录 [源码解析] 深度学习分布式训练框架 horovod (18) --- kube ...

  3. JAVA基础（代码）练习题61~90

    JAVA基础 61.设计一个方法打印数组{'a','r','g','s','e','r'}中下标为1和3的的元素 package Homework_90; /** * 设计一个方法打印数组{'a',' ...

  4. Linux开机以root账户自动登录

    最近我们的自动化测试平台需要支持中标麒麟系统,对于我们来说要让这个系统支持分布式自动化测试,最重要的一点就是虚拟机启动后自动以root账户登录系统,并且执行我们的环境配置脚本,那么如何能让它开启自动登 ...

  5. Adaptive AUTOSAR 学习笔记 10 - 执行管理

    本系列学习笔记基于 AUTOSAR Adaptive Platform 官方文档 R20-11 版本 AUTOSAR_EXP_PlatformDesign.pdf 缩写 EM:Execution Ma ...

  6. xmind2020 zen 10.2.1win/mac/linux安装教程

    xmind是一款优秀的思维导图软件,本文教大家如何安装xmind zen 2020 10.2.1版本,解锁使用全部功能,包括去掉xmind zen水印.上传图片等功能,支持windows/mac/li ...

  7. 自学vue第二天，从入门到放弃（生命周期的理解）

    生命周期的理解 beforeCreate 创建前 数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象 没有数据也没有方法 created 在创建后 数据和方法已经 data数据已经绑定好了 ...

  8. Java面向对象04——构造器

    类中的构造器也成为构造方法,是在进行创建对象的时候必须调用的.并且构造器有以下两个特点: 必须和类的名字相同 必须没有返回值,也不能写void  package oop.demon01.demon02 ...

  9. 前阿里技术总监手打：452页Android Framework 精编内核解析

    众所周知,Android是一个基于Linux实现的操作系统.但对于Linux内核来说,Android也仅仅只是一个运行在内核之上的应用程序,与其他运行在内核之上的应用程序没有任何区别. 所以Andro ...

  10. 能够进行多段文本匹配的NFA改良算法

    下面的代码基于NFA算法实现了在多段字符串中匹配正则表达式,对比NFA算法可以看到它将pc由局部变量提升为类成员,以保存中间匹配状态,另外在匹配成功后将pc恢复到null状态.实际使用中,此类还应该增 ...