jQuery层级选择器_动力节点节点Java学院整理

  

因为DOM的结构就是层级结构,所以我们经常要根据层级关系进行选择。

  

<强>层级选择器(后代选择器)
  

  

如果两个DOM元素具有层级关系,就可以用来选择,层级之间用空格隔开。例如:
  

        & lt; !——HTML结构——比;   & lt; div类="测试"比;   & lt; ul类="郎"比;   & lt;李类=" lang-javascript "祝辞JavaScript   & lt;李类=" lang-python "祝辞Python   & lt;李类=" lang-lua "祝辞Lua   & lt;/ul>   & lt;/div>   之前      

要选出JavaScript,可以用层级选择器:
  

        $ (' ul。朗li.lang-javascript”);//[& lt;李class=" lang-javascript”祝辞JavaScript】   $ (" div。测试li.lang-javascript”);//[& lt;李class=" lang-javascript”祝辞JavaScript】   之前      

因为和都是的祖先节点,所以上面两种方式都可以选出相应的& lt; li>节点。
  要选择所有的节点,用:
  

        $ (' ul。朗李”);      

这种层级选择器相比单个的选择器好处在于,它缩小了选择范围,因为首先要定位父节点,才能选择相应的子节点,这样避免了页面其他不相关的元素。
  

  

例如:
  

        $('表单(name=上传)输入');   之前      

就把选择范围限定在属性为的表单里。如果页面有很多表单,其他表单的不会被选择。
  多层选择也是允许的:
  

        $('形式。测试输入的页);//在形式表单选择被& lt; p>包含的& lt; input>   之前      

<强>子选择器(子选择器)
  

  

子选择器类似层级选择器,但是限定了层级关系必须是父子关系,就是节点必须是节点的直属子节点。还是以上面的例子:
  

        $ (' ul.lang> li.lang-javascript ');//可以选出[& lt;李类=發ang-javascript祝辞JavaScript】   $ (' div.testing> li.lang-javascript ');//[],无法选出,因为& lt; div>和& lt; li>不构成父子关系   之前      

<>强过滤器(过滤器)
  

  

过滤器一般不单独使用,它通常附加在选择器上,帮助我们更精确地定位元素。观察过滤器的效果:
  

        $ (' ul。朗李”);//选出JavaScript、Python和Lua 3个节点      $ (' ul。朗李:第一个孩子');//仅选出JavaScript   $ (' ul。朗李:胎”);//仅选出Lua   $ (' ul。朗李:nth-child (2) ');//选出第N个元素,N从1开始   $ (' ul。朗李:nth-child(甚至)');//选出序号为偶数的元素   $ (' ul。朗李:nth-child(奇数)');//选出序号为奇数的元素      之前      

<强>表单相关
  

  

针对表单元素,jQuery还有一组特殊的选择器:
  

  

& # 61548;:输入:可以选择& lt; input> & lt; textarea>, & lt; select>和& lt; button>;
  & # 61548;:文件:可以选择& lt;输入类型=拔募弊4?和输入(type=文件)一样,
  & # 61548;:复选框:可以选择复选框,输入(type=复选框)和一样,
  & # 61548;:广播:可以选择单选框,输入(type=广播)和一样,
  & # 61548;:专注:可以选择当前输入焦点的元素,例如把光标放到一个& lt; input>上,用美元(“输入:焦点”)就可以选出;
  & # 61548;:检查:选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如美元(“输入(type=无线电):检查”);
  & # 61548;:启用:可以选择可以正常输入的& lt; input>, & lt; select>等,也就是没有灰掉的输入;
  & # 61548;:禁用:和:启用正好相反,选择那些不能输入的。
  

  

此外,jQuery还有很多有用的选择器,例如,选出可见的或隐藏的元素:
  

        $ (' div:可见');//所有可见的div   $ (' div:隐藏');//所有隐藏的div      

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

jQuery层级选择器_动力节点节点Java学院整理