因为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学院整理