jQuery零基础入门——(三)层级选择器
2018-07-05 03:09
330 查看
《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。
除了基本的选择器外,jQuery的层级选择器更加灵活,也更强大。
因为DOM的结构就是树形结构,所以我们经常要根据层级关系进行选择。
要选出jQuery,可以用层级选择器:
因为
要选择所有的
这种层级选择器相比单个的选择器好处在于,它缩小了选择范围,因为首先要定位父节点,才能选择相应的子节点,这样避免了页面其他不相关的元素。
此外,jQuery还有很多有用的选择器,例如,选出可见的或隐藏的元素:
除了基本的选择器外,jQuery的层级选择器更加灵活,也更强大。
因为DOM的结构就是树形结构,所以我们经常要根据层级关系进行选择。
层级选择器(Descendant Selector)
如果两个DOM元素具有层级关系,就可以用$('上级 下级')来选择,层级之间用空格隔开。例如:
<div class="d1"> <ul class="lang"> <li class="lang-js">JavaScript</li> <li class="lang-jq">jQuery</li> <li class="lang-css">CSS</li> </ul> </div>
要选出jQuery,可以用层级选择器:
$("ul.lang li.lang-jq");//可以取到 $("div.d1 li.lang-jq");//可以取到
因为
<div>和
<ul>都是
<li>的祖先节点,所以上面两种方式都可以选出相应的
<li>节点。
要选择所有的
<li>节点,用:
$('ul.lang li');
这种层级选择器相比单个的选择器好处在于,它缩小了选择范围,因为首先要定位父节点,才能选择相应的子节点,这样避免了页面其他不相关的元素。
子选择器(Child Selector)
子选择器$('parent>child')类似层级选择器,但是限定了层级关系必须是父子关系,就是
<child>节点必须是
<parent>节点的直属子节点。还是以上面的例子:
$("ul.lang>li.lang-jq");//可以取到 $("div.d1>li.lang-jq");//无法取到,不是父子级关系
过滤器(Filter)
过滤器一般不单独使用,它通常附加在选择器上,帮助我们更精确地定位元素。观察过滤器的效果:$('ul.lang li:first-child'); // 仅选出JavaScript $('ul.lang li:last-child'); // 仅选出css
表单相关
.input:可以选择<input>,
<textarea>,
<select>和
<button>;
:file:可以选择
<input type="file">,和
input[type=file]一样;
:checkbox:可以选择复选框,和
input[type=checkbox]一样;
:focus:可以选择当前输入焦点的元素,例如把光标放到一个
<input>上,用
$('input:focus')就可以选出;
:radio:可以选择单选框,和
input[type=radio]一样;
:checked:选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如
$('input[type=radio]:checked');
:enabled:可以选择可以正常输入的
<input>、
<select>等,也就是没有灰掉的输入;
:disabled:和
:enabled正好相反,选择那些不能输入的。
此外,jQuery还有很多有用的选择器,例如,选出可见的或隐藏的元素:
$('div:visible'); // 所有可见的div $('div:hidden'); // 所有隐藏的div
相关文章推荐
- 网站前端_jQuery-基础入门.玩转jQuery基本/层次/过滤/表单选择器?
- jQuery快速入门基础教程之选择器(一)
- jQuery零基础入门——(二)Selector选择器
- JQuery基础 -- 选择器
- 33、实例 jQuery选择器之层级选择器之关系选择器
- jQuery基础教程之 基本选择器
- jQuery入门基础知识学习笔记
- jQuery选择器之层级选择器
- Web基础:jQuery 上篇:选择器
- jQuery入门-选择器-2.初识jQuery选择器
- Jquery入门和基础核心
- jQuery层级选择器
- jQuery基础教程之强大的选择器(过滤选择器-内容过滤选择器)
- jQuery层级选择器
- jquery基础教程七 选择器(selectors 的xpath语法应用)
- jQuery基础----02jQuery选择器和事件-选择器
- JQuery中基础过滤选择器用法实例分析
- jQuery基础学习8——层次选择器next()和prev()方法
- jQuery基础教程之强大的选择器(过滤选择器-可见性过滤选择器)
- jQuery层级选择器_动力节点节点Java学院整理