<!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: #0092E7;

    	}

    	.subDivCls {

    		width:60px;

    		height:60px;

    		color:white;

    		border: solid 1px white;

    		font-size: 12px;

    		margin: 5px;

    		float: right;

    		background-color: #FF4500;

    	}

    	.spanCls{

    		color:white;

    		border: solid 1px white;

    		margin: 5px;

    		float: left;

    		height: 50px;

    		background-color: #DCA112;

    	}

    	div span{

    		border: solid 1px white;

    		font-size: 12px;

    		margin:5;

    		background-color: #DCA112;

    	}

    	.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() {

    		// <input type="button" id="btn1" value=":contains()选取元素内容包含mzy的div元素">

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

				// 注意是contains，并不是contain！

    			$("div:contains('mzy')").addClass("cBlack");

			});

			// <input type="button" id="btn2" value=":empty选取不包含子元素或文本的div元素">

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

    			$("div:empty").addClass("cBlack");

			});

    	    // <input type="button" id="btn3" value=":has()选取含有span元素的div元素">

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

    			$("div:has('span')").addClass("cBlack");

			});

    	    // <input type="button" id="btn4" value=":parent选取含有子元素或文本的div元素">

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

    			$("div:parent").addClass("cBlack");

			});

    	    // <input type="button" id="btn5" value=":hidden弹出隐藏input元素的值">

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

    	    	alert($("input:hidden").val());

			});

    	    // <input type="button" id="btn6" value=":visible选取所有的可见input元素">

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

    	    	$("input:visible").addClass("cBlack");

			});

		});

    </script>

    </head>

    <body>

      <div id="div1" class="divCls">id 为div1 的div<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<br>

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

      	</div>

      </div>

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

      id 为div3 的div，title为mzy，包含隐藏输入框，输入框的值为hello

  		<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;">class为subDivCls的div</div>

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

      </div>

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

      <br>

      <hr>

      <input type="button" id="btn1" value=":contains()选取元素内容包含mzy的div元素">

      <input type="button" id="btn2" value=":empty选取不包含子元素或文本的div元素">

      <input type="button" id="btn3" value=":has()选取含有span元素的div元素">

      <input type="button" id="btn4" value=":parent选取含有子元素或文本的div元素">

      <input type="button" id="btn5" value=":hidden弹出隐藏input元素的值">

      <input type="button" id="btn6" value=":visible选取所有的可见input元素">

    </body>

  </html>

jQuery中的内容、可见性过滤选择器（四、四）：:contains()、:empty、:has()、:parent、:hidden、:visible的更多相关文章

  1. jQuery中的表单过滤选择器（四、七）：:input、:text、:password、:radio、:checkbox、:file等

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

  2. jQuery学习笔记之可见性过滤选择器

    可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素. 显示隐藏的例子: <!DOCTYPE html> <html> <head> <script ...

  3. jQuery选择器之可见性过滤选择器Demo

    测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. JQuery 可见性过滤选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

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

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

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

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

  7. jQuery中的子（后代）元素过滤选择器（四、六）：nth-child()、first-child、last-child、only-child

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

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

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

  9. jQuery选择器之子元素过滤选择器Demo

    测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

随机推荐

  1. 【学习笔记】Github的使用

    在github上上传项目代码 在github官网上新建自己的仓库,需要写好标题和说明文件,然后复制自己的仓库地址 在要上传到的本地project中右键, Git bash here,接着输入 git ...

  2. Spring自动装配（二）

    为什么Spring要支持Autowire(自动装配) 先写几个类,首先定义一个Animal接口表示动物: 1 public interface Animal { 2 3 public void eat ...

  3. Python基础之读取ini文件

    基本使用方法 第一步:准备一份INI文件.如test1.ini [ITEMS] item1=1 item2=2 item3=3 item4=4 [ITEM1] test1=aaa [ITEM2] te ...

  4. phpcms开发使用

    二次开发入口文件: 1.dirname(__FILE___) 函数返回的是脚本所在在的路径 2.__FILE__ 当前运行文件的完整路径和文件名.如果用在被包含文件中,则返回被包含的文件名. 3.DI ...

  5. LeetCode通关：求次数有妙招，位运算三连

    分门别类刷算法,坚持,进步! 刷题路线参考: https://github.com/chefyuan/algorithm-base 大家好,我是刷题困难户老三,这一节我们来刷几道很有意思的求次数问题, ...

  6. 记一次 .NET 某智慧水厂API 非托管内存泄漏分析

    一:背景 1. 讲故事 七月底的时候有位朋友在wx上找到我,说他的程序内存占用8G,托管才占用1.5G,询问剩下的内存哪里去了?截图如下: 从求助内容看,这位朋友真的太客气了,动不动就谈钱,真伤感情, ...

  7. jmeter之json提取器详解

    Json提取器详解 *Apply to:参照正则表达式提取器 *Names of created:自定义变量名. 变量名可以填写多个,变量名之间使用分号进行分隔. 一旦变量名有多个,则下方的json ...

  8. 【Android面试查漏补缺】之Handler详解，带你全面理解Handler消息机制

    在安卓面试中,关于 Handler 的问题是必备的,但是这些关于 Handler 的知识点你都知道吗? 一.题目层次 Handler 的基本原理 子线程中怎么使用 Handler MessageQue ...

  9. CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003

    Title/ CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003 序 : 写完这篇文章后,我准备一直做下去了,包括flight的各个分区,也看到前方的路. ...

  10. Build a ZenTao Server on Linux

    Download xampp for linux on Apache Friends, file name: xampp-linux-1.8.3-2-installer.run; Intallatio ...