jQuery基础教程之强大的选择器(层次选择器)

转载 2012年03月31日 13:52:41

无论何时,我们都要记住的一点就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。
而JQuery选择器又具有这样的特点:
隐式迭代
$(“选择器”).css(“background-color”,”red”)则是为这组元素中每个元素的样式都加上红色背景。jQuery会自动迭代每个元素,这就免去了我们编写代码遍历每个元素对象的操作。

无需判断对象是否存在
如果页面上不存在id为test的DOM 元素,$(“#test”).css(“background-color”,”red”)不会产生任何异常,而document.getElementById(“test”).style.backgroundColor=’red’就会产生未找到对象的异常。
虽然jQuery这样操作不会产生异常,但是我们在开发jQuery插件的时候,是有必要判断jQuery选择器有没有获取到元素的,这样可以在插件未正常获取到元素的时候,可以立即停止插件的运行,可以提高性能而且减少意外情况的发生。如何获取呢?可以这样

1 if ($("选择器").length > 0){
2     //说明获取到元素了
3 }else{
4     //未获取到元素
5 }

上面一段文字貌似和今天要说的jQuery层次选择器好像没多大关系呢,呵呵~~的确,上面的东西是我临时想起来的,感觉比较实用,所以就在这里和大家说一下,也好让对此没有多少了解的人解决一下疑惑。
那接下来我们来说一下这个jQuery层次选择器的用法,其实jQuery层次选择器只有两种用法:

  1. $(“ancestor descendant”):选取parent元素后所有的child元素
    ancestor的中文意思是“祖先”,descendant的中文意思是“后代”

    $(“body div”) 选取body元素下所有的div元素。
    $(“ul li”) 选取ul元素下所有的li元素。
    $(“#test div”) 选取id为“test”的元素所包含的所有的div子元素
    $(“div#test div”) 选取id为“test”的div所包含的所有的div子元素
    $(“.test div”) 选取class为“test”的元素所包含的所有的div子元素
    $(“div.test span”) 选取class为“test”的div所包含的所有的span子元素
    $(“span.test .demo”) 选取class为“test”的span所包含的所有的class为demo的元素
    $(“.test .demo”) 选取class为“test”的元素所包含的所有的class为demo的元素
  2. $(“parent > child”):选取parent元素后所有的直属child元素,何谓“直属”,也就是第一级的意思了
    $(“body > div”) 选取body元素下所有的第一级div元素。
    $(“ul > li”) 选取ul元素下所有的第一级li元素。
    $(“#test > div”) 选取id为“test”的元素所包含的所有的第一级div子元素
    $(“div#test > div”) 选取id为“test”的div所包含的所有的第一级div子元素
    $(“.test > div”) 选取class为“test”的元素所包含的所有的第一级div子元素
    $(“div.test > span”) 选取class为“test”的div所包含的所有的第一级span子元素
    $(“span.test > .demo”) 选取class为“test”的span所包含的所有的第一级class为demo的元素
    $(“.test > .demo”) 选取class为“test”的元素所包含的所有的第一级class为demo的元素
  3. $(“prev + next”):prev和next是两个同级别的元素. 选中在prev元素后面的next元素.
    $(“#demo+img”)选在id为demo元素后面的img对象.如果id为demo元素后面没有同级的img对象,那么这个$(“#demo+img”).length=0
  4. $(“prev ~ siblings”):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器
    $(“#demo~[title]“)选择id为demo的元素后面所有带有title属性的元素,同样如果id为demo的元素后面没有一个带有title属性的元素,那么$(“#demo~[title]“).length = 0

jQuery选择器之层级选择器

背景:我们可以把文档中的所有的节点节点之间的关系,用传统的家族关系来描述,可以把文档树当作一个家谱,那么节点与节点直接就会存在父子,兄弟,祖孙的关系了。 >(大于号)紧跟父子关系 如$("div >...
  • ljp1919
  • ljp1919
  • 2017年03月24日 09:55
  • 639

jquery 联合选择器,相对选择和层级选择器__多类交集选择器,多属性选择器

1、多条件选择器 用途:使用多个条件同时选择多个标签 用法:$(“条件1,条件2,条件3,……,条件n “); 特征:多个条件在“”内用逗号隔开; 用例:$(“div#id,span.tip,...
  • h330531987
  • h330531987
  • 2017年10月26日 10:26
  • 183

jQuery 层次选择器,属性选择器

jQuery层次选择器 jquery属性选择器 jq根据是否有某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div")...
  • tangdou5682
  • tangdou5682
  • 2016年12月01日 10:40
  • 645

jQuery层次选择器

后代选择器 //选择 body内的所有div元素. $('#btn1').click(function(){ $('body div').css("back...
  • csujiangyu
  • csujiangyu
  • 2015年08月18日 10:42
  • 1133

一步一步学习 JQuery (二) 选择器: 基本选择器 && 层次选择器

JQuery选择器:
  • u013497151
  • u013497151
  • 2015年02月21日 18:34
  • 1951

css3选择器--基本选择器,层次选择器,属性选择器

在大篇CSS代码中,并没有说明什么样式服务于什么元素,只是在元素中使用了class属性。而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性,并没把样式和元素绑定起来,一个CSS类选...
  • Ljs_cn
  • Ljs_cn
  • 2016年12月05日 23:35
  • 2339

jquery层级选择器, 选取td

$("div span") 选取里的所有元素  (测试环境: W3School 网页测试) $("div > span") 选取元素下元素名是的子元素   不包括子元素的子元素例如:       ...
  • fyhjuyol
  • fyhjuyol
  • 2015年04月03日 14:58
  • 735

jQuery 选择器(基本选择器/层级选择器/过滤选择器/筛选选择器)

jQuery选择器 1. JS中选择DOM元素的方法 考虑兼容性的话,js里面提供的选择DOM的方法只有两个: JavaScript选择元素的方法 ...
  • carriehaohao
  • carriehaohao
  • 2017年03月04日 15:38
  • 794

CSS3选择器——2、层次选择器

CSS3选择器——2、层次选择器 *{ margin: 0px; padding: 0px; } body{ width: 300px; mar...
  • yezis
  • yezis
  • 2015年02月14日 17:49
  • 5068

css3选择器--层次选择器

层次选择器:通过html的dom元素间的层次关系获取元素,主要层次关系有 后代、父子、相邻兄弟和通用兄弟。 1. 后代选择器: E  F, 作用的是选择元素的后代元素。包括子元素、孙辈元素等。(常用...
  • guoyangyang123456
  • guoyangyang123456
  • 2017年06月01日 16:29
  • 433
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery基础教程之强大的选择器(层次选择器)
举报原因:
原因补充:

(最多只允许输入30个字)