<!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. C标准库学习

    前言 C标准库源码可通过下列两个网站进行查看:The GNU C Library.Welcome to uClibc-ng! - Embedded C library 以下学习记录也是以这两个网站提供 ...

  2. Java的标准日志

    虽然开源社区有很多优秀的日志框架,但我们学习标准的java日志框架是为了更好的理解其他框架啊(近期项目要用ELK) 看自己以前写的Log4J简直不忍直视啊啊啊啊,那时还感觉自我良好 1. 为什么要使用 ...

  3. windows安装Laravel框架经验心得（一）

    作为一个程序员,要活到老学到老.虽然自己水平很菜,但是也要继续往前走,所以打算利用一些空闲时间在学习一些新知识,比如Laravel框架. 看书费劲,好不容易找到了一些关于Laravel的教学视频.不过 ...

  4. python调用接口方式

    python中调用API的几种方式: - urllib2- requests 一.调用别人的接口 案例1.urllib2 import urllib2, urllib github_url ='htt ...

  5. python的web框架知识点

    一个完整的web应用:服务器收到来自浏览器的一个请求,服务器将请求内容的网页返回给浏览器,让浏览器显示出来.[而浏览器与服务器之前的传输协议是HTTP] HTTP是一个基于TCP/IP通信协议来传递数 ...

  6. PL SQL Developer 13连接Oracle数据库并导出数据

    下载 并安装 PL SQL Developer 13,默认支持中文语言 ============================= 注册码: product code: 4vkjwhfeh3ufnqn ...

  7. 第十八篇 -- 在C++中嵌入汇编语言

    基于C++宝典的学习 一.什么是汇编语言 汇编语言是一种功能很强的程序设计语言,也是利用了计算机所有硬件特性并能直接控制硬件的语言.在汇编语言中,用助记符(Memoni)代替操作码,用地址符号(Sym ...

  8. 解决proto文件转换时提示“Note that enum values use C++ scoping rules, meaning that enum values are siblings of their type, not children of it. ”

    前言: 想将.proto文件转换成.pb文件时一直报错,一开始以为是文件编码格式的问题,后来将文件改成windows下的utf-8格式后,又出现了新的报错(见下图).百度了很久,才找到解决方法. &q ...

  9. k8s系列文章第五篇（docker-compose）

    更多精彩内容,猛搓这里 目录 一.Docker Compose 1.前言 2.官方介绍 1.Compose 中有两个重要的概念 2.三步骤 3.Compose是Docker官方的开源项目,需要安装! ...

  10. CFS靶机

    nmap扫描 nmap -sV -p1-65535 192.168.1.135 thinkphp5.0版本 找到poc进行测试 http://192.168.1.135/index.php?s=ind ...