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


Posted in Javascript onJune 24, 2016

概念

空格:$('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> 
<div 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>  
</div>

空格的使用

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

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

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

jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍

大于号的使用

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

jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍

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

加号的使用

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

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

jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍

波浪号的使用

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

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

jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍

以上所述是小编给大家介绍的jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
List Installed Software Features
Jun 11 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
基于vue.js实现购物车
Jan 15 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
jquery表单插件Autotab使用方法详解
Jun 24 #Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 #Javascript
jQuery下拉框的简单应用
Jun 24 #Javascript
浅谈json取值(对象和数组)
Jun 24 #Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 #Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 #Javascript
JS控制文本域只读或可写属性的方法
Jun 24 #Javascript
You might like
PHP脚本的10个技巧(6)
2006/10/09 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
javascript 数组排序函数
2009/08/20 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
js实现点击生成随机div
2020/01/16 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
浅谈Django的缓存机制
2018/08/23 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Python缓存技术实现过程详解
2019/09/25 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
python dict如何定义
2020/09/02 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
个人查摆问题整改措施
2014/10/04 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
销售内勤岗位职责
2015/02/10 职场文书
法定授权委托证明书
2015/06/18 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript