a毛 jquery 学习记 3 常规选择器(3)

最新推荐文章于 2016-08-01 09:30:24 发布

一平米

最新推荐文章于 2016-08-01 09:30:24 发布

阅读量578

点赞数

分类专栏： jquery学习

本文链接：https://blog.csdn.net/pymxb1991/article/details/51068016

版权

jquery学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jquery 学习三(3)

参考资料：李炎恢老师的视频、w3cschool 、锋利的jquery、

3 、高级选择器：

首先复制上次笔记所有文件到新建的文件夹‘3jquery常规选择器3’中,删除style.css中内容，dom.js中延迟加载中内容,indet.html中<body>中内容；

先了解一下如下表：

1、后代选择器

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
  <title>jquery 常规选择器</title>

	<script type="text/javascript" src="jquery-1.12.2.js"></script>
    <script type="text/javascript" src="dom.js"></script>
	<link rel="stylesheet" href="style.css" type="text/css">
 </head>
 <body>
	  <div id='box'> 
		<p> p </p>
		<p> p </p>
		<p> p </p>
			<div > 
				<p> p </p>
				<p> p </p>
				<p> p </p>
			 </div>
	  </div>
	
 </body>
</html>

把所有节点都变红 dom.js

$(function(){
   $('#box  p').css('color','blue');
});

jQuery 也提供了一个后代选择器的方法：find()

$(function(){
  //find()
  $('#box').find('p').css('color','blue');
});

都是可以实现的；
2、子选择器（只能是儿子的标签部分才能被选择到，孙子标签部分是选取不到的）

style.css

#box > p {
    color:red;            //注意 IE6不支持
}

dom.js

$(function(){
   $('#box  > p').css('color','blue');  
});

jQuery 也提供了一个子选择器的方法：children();

$(function(){
    $('#box').children('p').css('color','red');
});

3、next选择器下一个节点的选择器（同级的下一个节点）
修改一下index.html,如下

<body>
 
		<p> p1 </p>
		<p> p1 </p>
		<p> p1 </p>
	  <div id='box'>  div  </div>			
		<p> p2 </p>
		<p> p2</p>
		<p> p2 </p>

	
 </body>

style.css

#box + p  {
	color:blue;   //将div下面的p节点中元素变为红色  注意：IE6不支持此写法</span>
}

如果div 中修改如下，查看效果是否一样？

 <div id='box'>  div	<p> p2 div </p>  </div>

在试一下上面代码，查看结果发现第一个 " p2 "变成了蓝，所有说必须是：同级的下一个节点
jQuery中模拟 dom.js

      $(function(){
		$('#box + p').css('color','red');
      });

jQuery 也提供了一个next选择器的方法：next();

$(function(){
		$('#box').next('p').css('color','blue');
	});

同样也可以实现,但是如果在div标签下面增加一个Strong标签呢，如下：

 <body>
 
		<p> p1 </p>
		<p> p1 </p>
		<p> p1 </p>
	  <div id='box'>  div	<p> p2 div </p>  </div>	
		<strong> 同级strong </strong>
		<p> p2 </p>
		<p> p2</p>
		<p> p2 </p>

	
 </body>

运行一下查看效果发现，p2没有变化：所有说必须是：同级的下一个节点
3、nextAll选择器 (同级的子节点)

style.css

#box ~ p{
   color:red;   //IE6不支持此功能
}

dom.js

$(function(){
		$('#box ~ p').css('color','blue');
	});

jQuery 也提供了一个nextAll选择器的方法：nextAll();

$(function(){
		$('#box').nextAll('p').css('color','red');//同级下面的N个子节点
	});

层次选择器对节点的层次都是有要求的，比如子选择器，只有子节点才可以被选择到，孙子节点和重孙子节点都无法选择到。next 和 nextAll 选择器，必须是同一个层次的后一个和后 N 个，不在同一个层次就无法选取到了。

如果在 find()、next()、nextAll()和 children()这四个方法中，如果不传递参数，会怎么样，来做以下试验；

先来看next

$(function(){
		$('#box').next().css('color','red');  //next()等选择器不传参数就等于是传递了'*'
	});

结果发现 ID下个同级节点strong变为了红色，把<strong>跟<p>标签互换一下位置，发现 p标签变成了红色，所以说 next()等选择器不传参数就等于是传递了'*'

$(function(){
		$('#box').children().css('color','red');
	});

	$(function(){
		$('#box').nextAll().css('color','red');
	});

$(function(){
		$('#box').find().css('color','red');   //测试find不带参数发现没有任何反应，但视频上说都有效果，本人感觉	是视频的问题
});

find() 意为寻找，如果没有目标怎么找呢……所以我觉得是视频的问题

经查资料结果发现：find()方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。根据这意思看似可以不传参数但我实骓多次，没成功

上面这个问题先放起来，如果有哪位大神研究出来了，可以评论，给点提示，真心的感谢；

如果*在某个环境里有所浪费，建议尽量不要使用；

jQuery还提供了几如下方法

prev() //同一个等级的上一个节点

	$(function(){
		$('#box').prev('p').css('color','red');  //同一个等级的上一个节点变红
	});

prevAll() //同一个等级的上N个级点

	$(function(){
		$('#box').prevAll('p').css('color','red');
	});

如果要把div上下的都显示出来怎么办？看如下方法；

$(function(){
		$('#box').nextAll().css('color','red');
		$('#box').prevAll('p').css('color','red');
	});

这种写法有点麻烦还可以怎么写，看如下方法

$(function(){
        $('#box').prevAll('p').nextAll('p').css('color','red'); //试验发现这种方法的第一个是没有变颜色的；
    });

为什么会不变颜色呢？因为prevAll('p')返回的是已经上方所有指定元素，然后再 nextAll('p')选定下方所有指定元素，这样必然出现错误。

为了简便，jQuery也提供了如下方法来显示上下同级所有元素：siblings()

$(function(){
		$('#box').siblings('p').css('color','red');
	});

jQuery 还提供了更加丰富的方法来选择元素
nextUntil()和 prevUnitl()方法是选定同级的下面或上面的所有节点，选定非指定的所有元素，一旦遇到指定的元素就停止选定。

来做以下试验

index.html做如下修改

 <body>
	 <strong> strong  </strong>
	  <strong> strong  </strong>
	  <strong> strong  </strong>
		
		<p> p1 </p>
	  <strong> strong  </strong>
	  <strong> strong  </strong>
	  <strong> strong  </strong>
	  <div id='box'> div </div>	
	  <strong> strong  </strong>
	  <strong> strong  </strong>
	  <strong> strong  </strong>
		<p> p2 </p>
	
	  <strong> strong  </strong>
	  <strong> strong  </strong>
	  <strong> strong  </strong>
	
 </body>

dom.js

	$(function(){
		 $('#box').prevUntil('p').css('color','red');
		 $('#box').nextUntil('p').css('color','red');
	});

实验效果：div上下一行都显示为红色

一平米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
a毛 jquery 学习记 3 常规选择器(3)

jquery 学习三(2)参考资料：李炎恢老师的视频、w3cschool 、锋利的jquery、3 、高级选择器：首先复制上次笔记所有文件到新建的文件夹‘3jquery常规选择器3’中,删除style.css中内容，dom.js中延迟加载中内容,indet.html中中内容；先了解一下如下表： 1、后代选择器 index.html
复制链接

扫一扫

专栏目录