jQuery选择器之层次选择器

最新推荐文章于 2020-07-13 20:39:39 发布
最新推荐文章于 2020-07-13 20:39:39 发布
阅读量881 收藏
点赞数
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/world_java/article/details/9618771
版权

层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器。


1 、ancestor descendant
用法: $(”form input”) ;   返回值  集合元素

说明: 在给定的祖先元素下匹配所有后代元素.这个要和下面讲的”parent > child”区分开. 这个是匹配所有子孙


2、parent > child

用法: $(”form > input”) ;    返回值  集合元素
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素  这个只匹配子元素


3、prev + next

用法: $(”label + input”) ;   返回值  集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素   匹配的是下一个，只是一个


4、prev ~ siblings
用法: $(”form ~ input”) ;    返回值  集合元素
说明: 匹配 prev 元素之后的所有 同级元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.


注意:  (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取




练习：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.10.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033"  id="b2"/>
		 <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"  id="b3"/>
		 <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF"  id="b4"/>
		 <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF"  id="b5"/>
		
 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one  
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one">
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		<span class="spanone">    span
		</span>
		
	</body>
<script language="JavaScript">
//<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF"  id="b1"/>
	
//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033"  id="b2"/>


//<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"  id="b3"/>


//<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF"  id="b4"/>

//<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF"  id="b5"/>
 
</script>
   
</html>




答案：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.10.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF"  id="b1"/>
		 <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033"  id="b2"/>
		 <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"  id="b3"/>
		 <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF"  id="b4"/>
		 <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF"  id="b5"/>
		
 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one  
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one">
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		<span class="spanone">    span
		</span>
		
	</body>
<script language="JavaScript">
//<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF"  id="b1"/>
	$("#b1").click(function(){
		$("body div").css("background","#0000FF");
	});
//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033"  id="b2"/>
	$("#b2").click(function(){
		$("body>div").css("background","#0000FF");
	});

//<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"  id="b3"/>紧接着下一个,只有一个
	$("#b3").click(function(){
		$("#one + div").css("background","#0000FF");
	});

//<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF"  id="b4"/>只包含兄弟元素,不包含兄弟元素的子元素
	$("#b4").click(function(){
		$("#two ~ div").css("background","#0000FF");
	});
//<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF"  id="b5"/>
 	$("#b5").click(function(){
		$("#two").siblings("div").css("background","#0000FF");
	});
</script>
   
</html>


我叫阿狸猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery选择器之层次选择器用法实例分析
10-17
主要介绍了jQuery选择器之层次选择器用法,结合实例形式分析了jQuery后代元素选择器、子元素选择器、相邻元素选择器、兄弟元素选择器等相关使用技巧,需要的朋友可以参考下
jQuery选择器——层次选择器
十一的博客
06-18 545
parent &gt; child描述:匹配表单中所有的子级input元素。HTML 代码:&lt;form&gt; &lt;label&gt;Name:&lt;/label&gt; &lt;input name="name" /&gt; &lt;fieldset&gt; &lt;label&gt;Newsletter:&lt;/label&gt
jquery层次选择器
郝啊的博客
07-13 742
jquery层次选择器 按照我个人的习惯，还是先放上总的内容，然后再开始一个一个攻克。 常用的几种(概述)： 1.派生选择器(后代元素选择器) $("div span") 2.父子选择器(子元素选择器) $("div>span") 3.兄弟选择器(相邻元素选择器) $("div+span") 4.兄弟选择器 $("div~span") 5.并且选择器(过滤选择器) :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(
Jquery---层次选择器
flybird的博客
09-23 800
1： $("ancestor descentdant") :选取的是ancestor 后代的所有元素 2： $("parent>child") 选取的是 parent 的孩子 child  仅仅只是parent的下一代,不能是孙子 3： $("pre + next")  选取的是紧接per 的下一个next元素，next 和pre 具有同一个父辈 4： $("
jQuery入门之层次选择器实例简析
10-23
主要介绍了jQuery入门之层次选择器用法,以简单实例形式分析了jQuery层次选择器中ancestor descendant与parent>child的区别,需要的朋友可以参考下
jQuery选择器之基本选择器与层次选择器
10-24
本文主要是通过表格向大家展示了jQuery选择器之基本选择器与层次选择器，方便大家对比学习，有需要的小伙伴参考下。
详解强大的jQuery选择器之基本选择器、层次选择器
12-10
jQuery允许开发者使用从CSS1到CSS3... jQuery选择器类型 jQuery选择器主要分为四类： 1、基本选择器 2、层次选择器 3、过滤选择器 4、表单选择器 由于过滤选择器内容比较多，因此本文仅介绍前两种，下篇文章将介绍后两
Jquery选择器的层次选择器
苏打水解渴的博客
10-31 974
上一篇主要学习了一些，简单的Jquery选择器，但是都是开发中比较常用的，这篇主要学习了一些，层次选择器，也是比较简单常用的选择器。 我们来看下，层次选择器都有哪些： jQuery( "parent > child" ) jQuery( "ancestor descendant" ) jQuery( "prev + next" ) jQuery( "prev ~ siblings" ) 1.jQu
jQuery层次选择器
专注
01-01 528
Child Selector (“parent > child”) 选择所有”parent“元素的所有直接的称为''child"的子元素 作为CSS选择器，孩子选择器可以被所有现在的web浏览器所支持，如（Safari, Firefox, Opera, Chrome, and Internet Explorer 7+），但是IE6和以下版本尤其不能支持。然而在jQuery中，这个选择器（包括其
Jquery基本选择器与层次选择器
IUNIQUE技术册
03-19 575
一、什么是jquery选择器？ 就是允许通过标签名、属性或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的景区呃呃呃定位，才能完成元素属性和行为的处理。二、下面是一个使用jQuery选择器实现隔行变色的实例<html> <head></head> <meta/> <style type="text/css">
jQuery中的层次选择器
Mr_PH的博客
12-12 370
用于通过DOM元素之间的层次关系来获取特定元素，如后代元素、子元素、相邻元素和兄弟元素等 $("ancestor,descendant") 获取ancestor元素中所有descendant（后代）元素，返回一个集合元素。 $("div span") //选取里所有元素 $("parent,child") 获取parent元素下child（子）元素，返回一个集合元素 $(
jQuery的获取焦点和失去焦点事件
07-31 2079
.myClass{ color:#c0c0c0 } 用户名 //为input元素添加样式 $("input").first().addClass("myClass"); //为input元素添加获取焦点事件 $("input").first().focus(function(){ if ($(t
jQuery选中多选框和单选框和下拉框
07-30 1872
Untitled Document 1号 2号 3号 1号 2号 3号 4号 5号 6号 复选1 复选2 复选3 复选4 单选1 单选2 单选3 // $("inp
jQuery的validate验证插件使用方法
08-15 1557
1.导入validate.js文件 注意： *validate.js必须在jQuery.js文件之后导入,因为验证框架里需要用到jQuery.js中定义的方法 *如果先导入jQuery.js再导入validate.js   再次导入jQuery.js也不行。因为验证框架里会将某些方法进行扩展，而后又一次导入jQuery.js会将扩展的方法覆盖。 2.指定要验证的组件 注意：
jquery获取复选框是否勾选
11-19 1470
$("#test2").unbind("click"); $("#test2").bind("click",function(){ alert($("#check").is(":checked")); }); (":chceked")是表单对象的属性过滤器 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).
jQuery内核,以及自定义each和size方法
10-17 1462
jQuery的内核;   (function( window, undefined ) {        //这就是jQuery的原型        var jQuery = function( selector, context ) {            return new jQuery.fn.init( selector, context );        }

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值