<!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. Maven多模块Spring的注入

    第一次做多模块项目,Unit Test的时候发现Biz模块没法注入Dal模块的Mappper,提示找不到Bean. POM文件是正确引入了dependency的,扫描的package也没错,所以卡了好 ...

  2. YARN学习总结之环境搭建

    Yarn环境搭建(基于hadoop-2.6.0-cdh5.7.0 伪分布) 1)配置文件 etc/hadoop/mapred-site.xml: <configuration> <p ...

  3. apt-key Debian packages密钥管理命令

    adv子命令 Pass advanced options to gpg. With adv --recv-key you can e.g. download key from keyservers  ...

  4. vue（23）Vuex的5个核心概念

    Vuex的核心概念 Vuex有5个核心概念,分别是State,Getters,mutations,Actions,Modules. State   Vuex使用单一状态树,也就是说,用一个对象包含了所 ...

  5. Tbase读写分离与分库分表

    一.读写分离 1.1 what 读写分离 读写分离,基本的原理是让主数据库处理事务性增.改.删操作(INSERT.UPDATE.DELETE),而从数据库处理SELECT查询操作.数据库复制被用来把事 ...

  6. java内存模型——重排序

    线程安全问题概括来说表现为三个方面:原子性,可见性和有序性. 在多核处理器的环境下:编译器可能改变两个操作的先后顺序:处理器可能不是完全依照程序的目标代码所指定的顺序执行命令:一个处理器执行的多个操作 ...

  7. [考试总结]noip模拟15

    这次不咕了. 首先发现这套题目十分毒瘤, \(T1\) 就没有太大的思路. 结果最后也是暴力收场... 菜. \(T1\;60pts\) 暴力居然还是挺高的,\(T2\) 莽了一个随机化上去结果还是暴 ...

  8. 「Leetcode-算法_Easy461」通过「简单」题目学习位运算

    Easy 461.汉明距离 因为原题目翻译效果不佳,这里是笔者自己的理解. 输入两个二进制数 x.y, 输出将 y 变为 x 所需改变的二进制位数,成为汉明距离. 注意: 0 ≤ x, y < ...

  9. JavaScript实现,判断一个点是否在多边形内(简直nice，希望能帮到你）

    //定义点的结构体 function point(){ this.x=0; this.y=0; } //计算一个点是否在多边形里,参数:点,多边形数组 function PointInPoly(pt, ...

  10. Java面向对象10——方法重写

    方法重写 static :  ​ ​ package oop.demon01.demon05; ​ public class Application {     public static void ...