<!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. UI作品评审总结：切忌过度设计，注意设计闭环

    本期,我们一起看看学长认证模块--UI同学的作品评审.   拿好小板凳,做好笔记,我们开始吧!     我们拿了两个典型的作品进行了一个讲解,做的特色都还不错,但是都有些小问题.   先来看一下第一位 ...

  2. js中 typeof 和 instanceof 的区别

    typeof 和 instanceof 都能判断数据类型,但是它们之间有什么区别呢,浅谈如下 typeof 用于判断数据类型,返回值为以下6种类型 1.string 2.boolean 3.numbe ...

  3. springMVC-5-视图解析器

    视图和视图解析器工作流程 第一步:获取到ModelAndView对象 请求处理方法执行完成后,无论返回是String,View 还是 ModeMap 类型,Spring MVC 也会在内部将它们装配成 ...

  4. PGSQL数据库里物化视图【materialized view】

    1.普通视图 数据库中的视图(view)是从一张或多张数据库表查询导出的虚拟表,反映基础表中数据的变化,且本身不存储数据. 2.物化视图[materialized view]     2.1.概念:  ...

  5. vscode源代码管理（vscode报错 未找到Git，请安装Git,或在"git.path" 设置中配置）

    vscode源代码管理(vscode报错 未找到Git,请安装Git,或在"git.path" 设置中配置) 直接上图,电脑上已经安装git,由于vscode没有找到git,所以v ...

  6. 学会这十招，轻松搜索github优质项目

    大家好,我是青空. 今天我想给大家分享一下使用 GitHub 的一些心得体会.之前我是在分享 GitHub上的一些开源项目,通过这段时间的收集工作,我积累了一些相关的经验在这里分享给大家. 我做了一个 ...

  7. 一键设置WPS_Office_2019专业版的定时自动备份的批处理文件

    一键设置WPS_Office_2019专业版的定时自动备份的批处理文件 rem ================================================ rem 一键设置WPS ...

  8. vulnhub-DC:7靶机渗透记录

    准备工作 在vulnhub官网下载DC:7靶机DC: 7 ~ VulnHub 导入到vmware,设置成NAT模式 打开kali准备进行渗透(ip:192.168.200.6) 信息收集 已经知道了靶 ...

  9. 一文彻底搞清 Gradle 依赖【转】

    来源:曾是放牛娃 www.jianshu.com/p/59fd653a54d2 转自:https://mp.weixin.qq.com/s?__biz=MzA3MDMyMjkzNg==&mid ...

  10. springboot自定义ObjectMapper序列化、配置序列化对LocalDateTime的支持

    背景 问题1:项目中使用默认自带的jackson进行前后端交互,实现数据对象的序列化和反序列化,默认的ObjectMapper采用小驼峰的格式,但是调用其他业务的http接口时,ObjectMappe ...