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 相关文章推荐
$.format,jquery.format 使用说明
Jul 13 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 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
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
python采集百度百科的方法
2015/06/05 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
python面向对象法实现图书管理系统
2019/04/19 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
用Python写一个for循环的例子
2016/07/19 面试题
办公室助理岗位职责
2013/12/25 职场文书
班级聚会策划书
2014/01/16 职场文书
女子职高个人自荐书
2014/02/01 职场文书
五好党支部事迹材料
2014/02/06 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
安全守法证明
2015/06/23 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
JS代码编译器Monaco使用方法
2021/06/11 Javascript
Python基本的内置数据类型及使用方法
2022/04/13 Python