最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

jquery选择器中的空格与大于号>、加号+与波浪号~的区别

来源:懂视网 责编:小采 时间:2020-11-27 20:24:33
文档

jquery选择器中的空格与大于号>、加号+与波浪号~的区别

jquery选择器中的空格与大于号>、加号+与波浪号~的区别:概念空格:$('parent childchild')表示获取parent下的所有的childchild节点大于号:$('parent > childchild')表示获取parent下的所有下一级childchild加号:$('pre + nextbrother')表示获
推荐度:
导读jquery选择器中的空格与大于号>、加号+与波浪号~的区别:概念空格:$('parent childchild')表示获取parent下的所有的childchild节点大于号:$('parent > childchild')表示获取parent下的所有下一级childchild加号:$('pre + nextbrother')表示获

概念

空格:$('parent childchild')表示获取parent下的所有的childchild节点

大于号:$('parent > childchild')表示获取parent下的所有下一级childchild

加号:$('pre + nextbrother')表示获得pre节点的下一个兄弟节点,相当于next()方法

波浪号:$('pre ~ brother')表示获取pre节点的后面的所有兄弟节点,相当于nextAll()方法

详解描述

现有代码如下

<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<p id="imgs_box">
	<ul class="play_imgs_width imgs_source">
	<li><a href="javascript:;"><img src="./images/banner1.jpg" idth="610" height="390"/></a></li>
	<li><a href="javascript:;"><img src="./images/banner1.jpg" idth="610" height="390"/></a></li>
	<li><a href="javascript:;"><img src="./images/banner1.jpg" idth="610" height="390"/></a></li>
	</ul>
	<ul class="imgs_buttons play_imgs_width">
	<li><a href="" class="buttons_ahover">1</a></li>
	<li><a href="" class="buttons_default">2</a></li>
	<li><a href="" class="buttons_default">3</a></li>
	</ul>	
	<ul class="test">
	<li>
	<ul class="test_first_child">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	</ul>
	</li>
	</ul> 
</p>

空格的使用

如果要获取imgs_box中的所有a标签,可以使用空格,代码如下

//获取imgs_box下的所有元素
$(function(){
	$('#imgs_box a').each(function(){
	console.log(this);
	});
});

效果如下图,可以看到,获取了所有元素

大于号的使用

如果要imgs_box中下一级的所有ul元素,不包含类为test_first_child的元素,可以使用如下代码

$(function(){
	$('#imgs_box > ul').each(function(){
	console.log(this);
	});
});

加号的使用

如果想获取类为imgs_source元素的相邻的下一个元素,可以使用加号。代码如下

$(function(){
	$('.imgs_source + ul').each(function(){
	console.log(this);
	});
});


波浪号的使用

如果想获取类为imgs_source元素所有的同级元素,可以使用波浪号~。代码如下

$(function(){
	$('.imgs_source ~ ul').each(function(){
	console.log(this);
	});
});

文档

jquery选择器中的空格与大于号>、加号+与波浪号~的区别

jquery选择器中的空格与大于号>、加号+与波浪号~的区别:概念空格:$('parent childchild')表示获取parent下的所有的childchild节点大于号:$('parent > childchild')表示获取parent下的所有下一级childchild加号:$('pre + nextbrother')表示获
推荐度:
标签: 中的 大于号 空格
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top