任务1 jQuery开发基础知识-2 jQuery选择器及元素的查找方法

$('#myDiv').css('border', '1px solid black');
jQuery选择器简介
注意
使用jQuery选择器获取元素后，由于返回的是jQuery对象，所以不仅 能为元素添加样式，还支持为元素添加行为。例如，为元素绑定事件、 操作元素属性等操作，此处只要了解jQuery选择器的使用即可。
过滤器eq()和伪类选择器:eq()
• 使用jQuery选择器获取的结果都是以伪数组的方式存在的，如果需要精准 找到其中的一个DOM元素，则需要使用过滤器eq()方法或者伪类选择 器:eq()
• 用法：
• $(selector).eq(index) • $(" selector:eq(index)") • 两者作用相同
1.3.2 基本选择器
• id选择器
id选择器：只能获取一个元素。
id选择器
$('#byId').css('background', 'pink');
1.3.2 基本选择器
• 类选择器
类选择器：设置同名class值，实现不同元素的相同样式或行为。
类选择器
$('.byClass').css('background', '#a0edbc');
设置多个css样式 $("p").css({"background-color":"yellow","font-size":"200%"});
1.3.3 层次选择器
• 层次选择器中的“层次”是指DOM元素的层次关系。
选择器 parent>child selector selector1
pre+next pre~siblings
1.3.2 基本选择器
• 组选择器
为class值为byClass和id值为byId的元素设置背景色。
$(byClass,byId...)
$('.byClass,#byId').css('background', 'yellow');
1.3.2 基本选择器
注意
虽然通配符选择器可匹配所有的元素，但会影响网页渲染的时间。因此， 实际开发中应尽量避免使用通配符选择器。取而代之的是，在需要时， 可在jQuery的$()中使用逗号，即可同时获取多个元素。
• 向下查找兄弟元素
• 查找下一个相邻的兄弟元素next()方法，$(selector).next(filter) • 查找后面所有的兄弟元素nextAll()方法，$(selector). nextAll(filter)
• 查找兄弟元素-siblings()方法
• $(selector).siblings(filter)
1.3.1jQuery选择器简介
实现步骤：
① 准备页面结构；
② 通过CSS添加样式；
#myDiv { border: 1px solid black;
} ……. <div id="myDiv">我是一个div</div>
默认页面
jQuery选择器简介
③ 通过jQuery添加样式；
jQuery添加
jQuery
XXX专业
授课人：XXX
任务1 jQuery开发基础知识-2
目录
ቤተ መጻሕፍቲ ባይዱ
• 1.3 jQuery选择器 • 1.4 jQuery中元素的查找操作 • 1.5 jQuery中操作DOM元素的几个基本方法 • 1.6 jQuery中的事件机制 • 1.7 实例开发-实现输入框外围的阴影
1.3 jQuery选择器
综合案例——折叠式菜单
• 案例演示
折叠式菜单：实现简洁的导航菜单功能提升用户体验。
单击
显示
$().show() $().hide()
折叠式菜单
• 案例分析
分析过程： ① HTML结构； ② jQuery特效；
p
a
a
div
a ...
li
li ...
ul
折叠式菜单
• 案例实现
实现步骤：
① 设计HTML结构和样式；
<p>这是div后面的第2个p元素</p>
<p>这是div后面的第3个p元素</p>
1.3.3 层次选择器
• 子元素选择器
子元素选择器：通过父元素（parent）获取其下的指定子元素（child）。
子元素选择器
$('#box > p').css('backgroundColor', 'red');
next()：可获取指定元素紧邻的下一个兄弟元素； nextAll()：可获取指定元素后的所有兄弟元素； siblings()：则可获取指定元素的所有兄弟元素。排他
1.3.3 层次选择器
• siblings()用法
$('#box').siblings('p').css('backgroundColor', 'red');
过滤器eq()和伪类选择器:eq()
举例：获取DOM中的第一个p元素。
$('p:eq(0)'); $('p:first'); $('p').eq(0);
0代表索引值，第一个p元素的索引值为0。 “:first”选择器获取第一个元素。
应用parents
• 页面元素结构如下图所示
• $("img").parents().length的结果是几？都包含哪些元素节点？
1.4 jQuery中的元素查找操作
• 查找操作，是指根据某个选择器选定的一组元素，去获取页面中的另一组元 素。基于DOM树形结构，可以从一个节点轻松的找到其余的节点，常用的 方法有查找后代元素、查找祖先元素、查找兄弟元素等等。
• 【注意】
• 所有的查找方法都可以使用参数缩小查找结果的范围，参数可以是基本 选择器或者带过滤器的选择器，但是不能使用层级选择器。
1. 使用nodeName获取节点名 称观察
2. 如果对$("img").eq(1)操作， 结果如何？
查找兄弟元素
• 向上查找兄弟元素
• 查找上一个相邻的兄弟元素prev()方法，$(selector).prev(filter) • 查找前面所有的兄弟元素prevAll()方法，$(selector).prevAll(filter)
查找方法应用举例
要求：从body下面第一个段落元素的子元素span开始找到body中第二个段
落元素的子元素a
• 使用向上查找父元素和向下查找子元素实现
$("span").parent().parent().children("p:eq(1)").
children("a")
• 使用向上查找祖先元素和向下查找后代元素实现
1.3.2 基本选择器
• 元素选择器
元素选择器：为页面中的所有匹配元素添加样式或行为。
$('p').css('font-size', '10px');
元素选择器
1.3.2 基本选择器
• 通配符选择器
通配符选择器：为页面上的所有元素添加相同的样式或者行为。
通配符选择器
$('*').css('background', 'yellow');
向下查找后代元素
• 直接查找子元素children()
• 格式：$(selector).children(filter)。 • 方法返回被选元素的所有直接子元素，可以使用filter指定需要的具体的
子元素（类名、id、标记名都可）
• 查找后代元素find()
• 格式：$(selector).find(filter)。 • find()方法返回被选元素中指定的后代元素，该方法沿着DOM元素的后
1.3.3 层次选择器
多 学 一 招 children()方法
在jQuery中，还可以使用children()方法代替子元素选择器，获取
指定元素的子元素。
示例
$('#box > p'); $('#box').children('p');
// 使用子元素选择器获取 // 使用children()方法获取
相对于该div元素进行操作。
<div id="box">
默认页面
<p>这是div中的第1个p元素</p>
<ul>
<li>这是第1个li元素</li>
<li><p>这是第2个li中的p元素</p></li>
</ul>
<p>这是div中的第2个p元素</p>
</div>
<p>这是div后面的第1个p元素</p>
1.3.2 基本选择器
• jQuery中基本选择器是最简单直观的选择器，包括id选择器、类选 择器、元素选择器和通配符选择器、组选择器。
选择器 #id .class
Element *
Selector1,...
描述 id选择器 类选择器 元素选择器 通配符选择器 同时获取多个元素
返回值 单个元素 元素集合 元素集合 元素集合 元素集合
代向下遍历，直至最后一个后代的所有路径。
向上查找祖先元素
• 查找直接父元素parent()方法
• 格式：$(selector).parent(filter)。 • 获取每个匹配元素的直接父元素，获取的结果不论有几个元素，都是以组的方式存在。 • 例如：$("span").parent("p")，查找的是span元素的父元素p，如果span元素的父元素不是
• jQuery选择器：通过选择器便可以获取元素并对元素进行操作；
• 语法：$(selector)；
• 特性：方式更加多样化，还可以为元素添加行为；
• 返回：返回一个jQuery对象。 • 基本选择器：
• ID选择器、标记名选择器、类选择器、通用选择器、组选择器 • 层级选择器：
• 包含选择器、子对象选择器、相邻选择器和兄弟选择器
单击
显示
② 添加折叠特效；
练习
任务1： • 使用id选择器获取右图中id为list_1的元素，在控制台中输出获取到元素
的个数和元素的文本内容 • 观察运行结果，说明问题
练习
• 任务2
• 使用标记名选择器获取页面中的li元素，输出元素的个数和元素的内容 • 使用text()方法有什么特点？
• 任务3
• 使用jQuery代码为所有li设置上下边距10像素，背景色为黄色。
描述 子元素选择器
后代选择器 兄弟选择器 兄弟选择器
返回值 元素集合 元素集合 元素集合 元素集合
1.3.3 层次选择器
• jQuery层次选择器可以快速的定位与指定元素具有层次关系的元素。 • 包括：
子元素选择器； 后代选择器； 兄弟选择器；
1.3.3 层次选择器
• 将最外层的div元素当做默认的元素，子元素、后代元素以及兄弟元素都是
$("span").parents("body").find("a")
• 使用查找兄弟元素的方法实现
$("span").parent().next().children("a")
练习
• 以上菜单中，鼠标点击任一个菜单项，当前菜单项背景色改变， 其余的菜单项背景色还原，如何实现？使用jquery完成。
$('#box p'); $('#box').find('p');
示例
// 使用后代选择器获取 // 使用find()方法获取
1.3.3 层次选择器
• 兄弟选择器
兄弟选择器：获取指定元素的下一个相邻兄弟元素。
使用方式：通过“+”符号。
紧邻兄弟
$('#box + p').css('backgroundColor', 'red');
段落，则查找不会返回，如果段落不是span元素的父元素，则查找也不会返回。
• 查找祖先元素parents()方法
• 格式：$(selector).parents(filter)。 • 该方法沿着DOM树向上遍历每个层级，直至文档根元素的所有路径，默认情况下最后一个找
到的一定是根元素html。 • 返回被选元素的所有祖先元素。父、祖父、曾祖父，依此类推。
1.3.3 层次选择器
• 兄弟选择器
兄弟选择器：获取指定元素后的所有兄弟元素。 使用方式：通过“~”符号。若是~后省略，则选择指定元素后面的所有兄弟元素。
所有兄弟
$('#dv ~ p').css('backgroundColor', 'red');
1.3.3 层次选择器
多 学 一 招 next()、nextAll()和siblings方法的使用
1.3.3 层次选择器
• 后代选择器
后代选择器：子元素以及子元素下的所有其他元素。
后代选择器
$('#box p').css('backgroundColor', 'red');
1.3.3 层次选择器
多 学 一 招 find()方法 在jQuery中，还可以使用find ()方法获取指定元素的后代元素。