第2章 jQuery选择器ppt课件.ppt

《第2章 jQuery选择器ppt课件.ppt》由会员分享，可在线阅读，更多相关《第2章 jQuery选择器ppt课件.ppt（82页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题第2章 jQuery选择器第2章 jQuery选择器jQuery选择器简介案例折叠式菜单基本选择器过滤选择器层次选择器案例精品展示 学习目标了解掌握熟悉了解jQuery选择器的优势12掌握jQuery基本选择器层次选择器的使用熟悉jQuery过滤选择器的使用3 目录 基本选择器2.22.22.12.1层次选择器2.32.3点击查看本小节知识架构点击查看本小节知识架构案例折叠式菜单2.42.4点击查看本小节知识架构jQuery选择器简介点击查看本小节知识架构 目录2.52.5过滤选择器点击查看本小节知识架构2.62.6案例精品展示点击查看本小节知识架构 知识架构2.1 jQ

2、uery选择器简介选择器简介1什么是jQuery选择器2jQuery选择器的优势 知识架构2.2 基本选择器基本选择器1id选择器2 类选择器3元素选择器4 通配符选择器 知识架构2.3 层次选择器层次选择器1子元素选择器2后代选择器3兄弟选择器 知识架构2.4 案例折叠式菜单案例折叠式菜单1案例展示2案例分析3案例实现 知识架构2.5 过滤选择器过滤选择器1基本过滤选择器2可见性过滤选择器3内容过滤选择器4属性过滤选择器5子元素过滤选择器下一页下一页 2.5 过滤选择器过滤选择器6表单过滤选择器7表单对象属性过滤选择器上一页上一页知识架构 1案例展示2案例分析2.6 案例精品展示案例精品展示

3、3案例实现知识架构 2.1 jQuery选择器简介什么是jQuery选择器 jQuery选择器选择器：通过选择器便可以获取元素并对元素进行操作；语法语法：$(selector)；特性特性：方式更加多样化，还可以为元素添加行为；执行执行：返回一个jQuery对象。 2.1 jQuery选择器简介我是一个div#myDiv border: 1px solid black;默认页面什么是jQuery选择器 实现步骤实现步骤：准备页面结构； 通过CSS添加样式； 2.1 jQuery选择器简介$(#myDiv).css(border, 1px solid black);什么是jQuery选择器 实现步

4、骤实现步骤： 通过jQuery添加样式； 2.1 jQuery选择器简介注意注意使用jQuery选择器获取元素后，由于返回的是jQuery对象，所以不仅能为元素添加样式，还支持为元素添加行为。例如，为元素绑定事件、操作元素属性等操作，此处只要了解jQuery选择器的使用即可。什么是jQuery选择器 2.1 jQuery选择器简介jQuery选择器的优势 获取方式获取方式：更加简洁，获取方式更多；选择器选择器：支持从CSS1到CSS3及常用的选择器； 2.1 jQuery选择器简介document.getElementById(id的值); / 根据id值获取元素document.getEle

5、mentsByTagName(元素的名); / 根据元素的名称获取元素 $(#id的值); / 根据id值获取元素$(元素的名称); / 根据元素的名称获取元素 jQuery选择器的优势 2.2 基本选择器选择器选择器描述描述返回值返回值#idid选择器单个元素.class类选择器元素集合Element元素选择器元素集合*通配符选择器元素集合selector1.同时获取多个元素元素集合 jQuery中基本选择器是最简单直观的选择器，包括id选择器、类选择器、元素选择器和通配符选择器。 2.2 基本选择器div border: 1px solid black;默认页面 jQuery提供的同时获取

6、多个元素的选择器，是利用逗号（,）分割，将每一个选择器匹配到的元素合并后一起返回。 2.2 基本选择器$(#byId).css(background, pink);id选择器id选择器 id选择器选择器：只能获取一个元素。 2.2 基本选择器$(.byClass).css(background, #a0edbc);类选择器类选择器 类选择器类选择器：设置同名class值，实现不同元素的相同样式或行为。 2.2 基本选择器$(p).css(font-size, 10px);元素选择器元素选择器 元素选择器元素选择器：为页面中的所有匹配元素添加样式或行为。 2.2 基本选择器$(*).css(ba

7、ckground, yellow);通配符选择器通配符选择器 通配符选择器通配符选择器：为页面上的所有元素添加相同的样式或者行为。 2.2 基本选择器$(.byClass,#byId).css(background, yellow);$(byClass,byId.)通配符选择器 为class值为byClass和id值为byId的元素设置背景色。 2.2 基本选择器注意注意虽然通配符选择器可匹配所有的元素，但会影响网页渲染的时间。因此，实际开发中应尽量避免使用通配符选择器。取而代之的是，在需要时，可在jQuery的$()中使用逗号，即可同时获取多个元素。通配符选择器 2.3 层次选择器选择器选择

8、器描述描述返回值返回值parentchild子元素选择器元素集合selector selector1后代选择器元素集合pre+next兄弟选择器元素集合presiblings兄弟选择器元素集合层次选择器中的“层次”是指DOM元素的层次关系。 2.3 层次选择器jQuery层次选择器可以快速的定位与指定元素具有层次关系的元素。包括包括：p 子元素选择器；p 后代选择器；p 兄弟选择器； 2.3 层次选择器默认页面 这是div中的第1个p元素 这是第1个li元素 这是第2个li中的p元素 这是div中的第2个p元素这是div后面的第1个p元素 将最外层的div元素当做默认的元素，子元素、后代元素以

9、及兄弟元素都是相对于该div元素进行操作。 2.3 层次选择器$(#dv p).css(backgroundColor, red);子元素选择器子元素选择器 子元素选择器子元素选择器：通过父元素（parent）获取其下的指定子元素（child）。 2.3 层次选择器示例$(#dv p); / 使用子元素选择器获取$(#dv).children(p); / 使用children()方法获取多多学学一一招招children()方法在jQuery中，还可以使用children()方法代替子元素选择器，获取指定元素的子元素。 2.3 层次选择器$(#dv p).css(backgroundColor,

10、 red);后代选择器后代选择器 后代选择器后代选择器：子元素以及子元素下的所有其他元素。 2.3 层次选择器示例$(#dv p); / 使用后代选择器获取$(#dv).find(p); / 使用find()方法获取多多学学一一招招find()方法在jQuery中，还可以使用find ()方法获取指定元素的后代元素。 2.3 层次选择器$(#dv + p).css(backgroundColor, red);紧邻兄弟兄弟选择器 兄弟选择器兄弟选择器：获取指定元素的兄弟元素，包括同辈和同级元素。使用方式使用方式：通过“+”符号。 2.3 层次选择器$(#dv p).css(backgroundC

11、olor, red);所有兄弟兄弟选择器 兄弟选择器兄弟选择器：获取指定元素后的所有兄弟元素。使用方式使用方式：通过“”符号。 2.3 层次选择器多多学学一一招招next()、nextAll()和siblings方法的使用p next()：可获取指定元素紧邻的下一个兄弟元素；p nextAll()：可获取指定元素后的所有兄弟元素；p siblings()：则可获取指定元素的所有兄弟元素。 2.4 折叠式菜单单击显示案例演示折叠式菜单折叠式菜单：实现简洁的导航菜单功能提升用户体验。 2.4 折叠式菜单案例分析分析过程分析过程：HTML结构； jQuery特效； 2.4 折叠式菜单案例实现实现步骤

12、实现步骤：设计HTML结构和样式； 添加折叠特效；单击显示 2.5 过滤选择器过滤选择器过滤选择器：为了快速筛选DOM元素，jQuery提供了一些过滤选择器。使用方式使用方式：类似于CSS选择器，以“:”开头，后用于指定规则；例子例子：“:first”,用于获取第一个元素。 2.5 过滤选择器jQuery过滤选择器按照过滤规则分类包括过滤选择器按照过滤规则分类包括：p 基本过滤选择器；p 内容过滤选择器；p 可见性过滤选择器；p 属性过滤选择器；p 子元素过滤芯选择器；p 表单过滤选择器；p 表单对象属性过滤选择器； 2.5 过滤选择器$(p:eq(0);$(p:first);0代表索引值，第

13、一个p元素的索引值为0。“:first”选择器获取第一个元素。基本过滤选择器举例举例：获取DOM中的第一个p元素。 2.5 过滤选择器选择器选择器描述描述返回值返回值:first获取第一个元素单个元素:last获取最后一个元素单个元素:not(selector)获取所有元素除了该选择器元素集合:even获取所有为奇数的元素元素集合:odd获取所有为偶数的元素元素集合:eq(index)获取指定索引值的元素单个元素基本过滤选择器基本过滤选择器基本过滤选择器：过滤规则多数与元素的索引值有关。 选择器选择器描述描述返回值返回值:gt(index)获取所有大于索引值的元素元素集合:lt(index)获

14、取所有小于索引值的元素元素集合:header获取标题类型的元素h1.元素集合:animated获取执行动画效果的元素元素集合2.5 过滤选择器基本过滤选择器 2.5 过滤选择器0代表索引值，第一个p元素的索引值为0。$(p:eq(0);$(p:first);“:first”选择器获取第一个元素。基本过滤选择器基本过滤选择器基本过滤选择器：过滤规则多数与元素的索引值有关。 2.5 过滤选择器 春天摇身一变春天摇身一变 .默认页面基本过滤选择器:even：索引值为奇数的选择器；:odd：索引值为偶数的选择器； 2.5 过滤选择器/ 索引值为偶数的li$(li:even).css(backgroun

15、dColor, pink);/ 索引值为奇数的li$(li:odd).css(border, solid 1px black);奇偶选择器基本过滤选择器:even(li:even)：获取索引值为偶数的li元素然后为匹配li添加背景色；:odd(li:odd)：获取索引值为奇数的li元素然后为匹配li添加背景色。 2.5 过滤选择器选择器选择器描述描述返回值返回值:visible获取所有的可见元素元素集合:hidden获取所有的不可见元素元素集合可见性过滤选择器在网页开发中，具有动态效果的页面往往有很多元素被隐藏。举例举例：折叠式菜单。 2.5 过滤选择器显示文本1显示文本2默认页面可见性过滤选

16、择器:hidden选择器选择器：p 可以获取CSS样式为“display: none”。p 属性“type=hidden”的文本隐藏域。 可见性过滤选择器:visible选择器选择器：获取所有可见元素。2.5 过滤选择器/ 获取所有可见元素，添加背景色$(:visible).css(backgroundColor, yellow);/ 在控制台输出元素集合console.log($(:visible);:visible 2.5 过滤选择器可见性过滤选择器:hidden选择器选择器：无法获取隐藏方式“visibility:hidden”的隐藏元素。本域 2.5 过滤选择器注意注意 Input隐藏

17、域一般不会设置样式，但是如果为input隐藏域设置CSS样式为“visibility:hidden”,“:hidden”选择器同样可以获取到该元素。可见性过滤选择器 2.5 过滤选择器注意注意选择器选择器描述描述返回值返回值:contains(text)获取包含给定文本的元素元素集合:empty获取所有不包含子元素或空元素元素集合:has(selector)获取含有选择器匹配的元素元素集合:parent获取含有子元素或文本的元素元素集合内容过滤选择器元素的内容是指它所包含的子元素或文本内容。内容内容过滤选择器过滤选择器：可根据元素的内容来获取元素。 2.5 过滤选择器默认页面我是我是div元素

18、的文本元素的文本我也是我也是div元素的文本元素的文本我是我是div内内span元素的文本元素的文本 div width: 200px; height: 30px; margin: 5px; border: solid 1px black; 内容过滤选择器 2.5 过滤选择器:contains $(div:contains(也).css(background, pink);内容过滤选择器:contains()选择器选择器：获取文本中包含“也”字的元素，然后添加背景色。 2.5 过滤选择器$(div:has(span).css(background, pink);:has(selector)$(

19、div:has(span).css(background, pink);内容过滤选择器:has(selector)选择器选择器：获取文本中包含子元素span的元素然后添加背景色 2.5 过滤选择器$(div:empty).css(background, pink);:empty$(div:empty).css(background, pink);内容过滤选择器:empty选择器选择器：获取没有元素内容的元素然后添加背景色。 2.5 过滤选择器$(div:parent).css(background, pink);:parent$(div:parent).css(background, pink

20、);内容过滤选择器:parent选择器选择器：获取内容不为空的元素然后添加背景色。 2.5 过滤选择器选择器选择器描述描述返回值返回值attribute获取包含给定属性的元素元素集合attribute=value获取等于给定的属性是某个特定值的元素元素集合attribute!=value获取不等于给定的属性是某个特定值的元素元素集合attribute=value获取给定的属性是以某些值开始的元素元素集合属性过滤选择器属性选择器属性选择器：通过元素的属性来筛选元素。使用方式使用方式：jQuery的属性过滤选择器将过滤规则包裹在“”中。 2.5 过滤选择器选择器选择器描述描述返回值返回值attri

21、bute$=value获取给定的属性是以某些值结尾的元素元素集合attribute*=value获取给定的属性是以包含某些值的元素元素集合selector1selectorN获取满足多个条件的复合属性的元素元素集合属性过滤选择器 2.5 过滤选择器class=dvtitle=标题class=dv1 title=标题1class=dv1 title=标题2div width: 200px; margin: 5px; border: solid 1px black; 默认页面属性过滤选择器 2.5 过滤选择器$(class=d).css(background, yellow);$(class=d)

22、.css(background, yellow);class=d属性过滤选择器class=d选择器选择器：获取class属性值以d开头的元素然后添加颜色。 2.5 过滤选择器class=dv1titile*=二$(class=dv1title*=2).css(background, yellow);属性过滤选择器class=dv1title*=二二选择器选择器：获取class值为dv1且title值包含“二”的元素然后添加背景色。 2.5 过滤选择器子元素过滤选择器子元素过滤选择器子元素过滤选择器：通过父元素和子元素相应关系来获取相应元素。 优势优势：p 同时获取不同父元素下满足条件的子元素。

23、p 与层次选择器中的子元素选择器相比拥有较灵活的过滤规则。 选择器选择器描述描述返回值返回值:first-child获取每个父元素下的第一个子元素元素集合:last-child获取每个父元素下的最后一个子元素元素集合:only-child获取每个仅有一个子元素的父元素下的子元素元素集合:nth-child(eq|even|odd|index)获取每个元素下的特定元素索引号从1开始元素集合2.5 过滤选择器子元素过滤选择器 2.5 过滤选择器 北京 上海 . 天津 重庆默认页面子元素过滤选择器 2.5 过滤选择器:only-child$(li:only-child).css(background

24、, orange);子元素过滤选择器:only-child选择器选择器：获取所有仅包含一个li的ul列表下的li然后添加背景色。 2.5 过滤选择器:nth-child(1)$(li:nth-child(1).css(background, orange);子元素过滤选择器:nth-child(1)选择器选择器：获取每一个ul列表的第一个li然后添加背景色。提示提示：:nth-child的参数索引值从1开始。 2.5 过滤选择器选择器选择器描述描述返回值返回值:input获取表单中所有input|textarea|select|button元素元素集合:text获取表单中所有inputtype

25、=text的元素元素集合:password获取表单中所有inputtype=password的元素元素集合:radio获取表单中所有inputtype=radio的元素元素集合表单过滤选择器表单过滤选择器表单过滤选择器：可以在页面中快速定位表单中某个类型元素的集合。 选择器选择器描述描述返回值返回值:checkbox获取表单中所有inputtype=checkbox的元素元素集合:submit获取表单中所有inputtype=submit的元素单个元素:image获取表单中所有inputtype=image的元素元素集合:reset获取表单中所有inputtype=reset的元素元素集合:b

26、utton获取所有inputtype=button的元素和button元素元素集合:file获取表单中所有inputtype=file的元素元素集合2.5 过滤选择器表单过滤选择器 2.5 过滤选择器注意注意p :button选择器：使用inputtype=button和button元素定义的按钮。 p :image择器：使用inputtype=image定义的图像不包含img定义的图像。表单过滤选择器 2.5 过滤选择器默认页面 表单过滤选择器 2.5 过滤选择器:button$(#myForm :button).hide();表单过滤选择器:button选择器选择器：获取按钮然后调用hid

27、e()方法隐藏元素。 2.5 过滤选择器:image$(#myForm :image).hide();表单过滤选择器:image选择器选择器：获取inputtype=image定义的图像然后隐藏图像。 2.5 过滤选择器$(#myForm :input).hide();:input$(#myForm :input).hide();表单过滤选择器:input选择器选择器：获取包含input、textarea的所有控件然后隐藏匹配元素。 2.5 过滤选择器选择器选择器描述描述返回值返回值:enable获取表单中所有属性为可用的元素元素集合:disable获取表单中所有属性为不可用的元素元素集合:c

28、hecked获取表单中所有被选中的元素元素集合:selected获取表单中所有被选中option的元素元素集合表单对象属性过滤选择器表单对象有一些专有属性用于表示表单的某种状态。表单对象属性过滤选择器表单对象属性过滤选择器：通过表单中的对象属特征获取该元素。 2.5 过滤选择器:checked$(input:checked).hide();表单对象属性过滤选择器:checked选择器：选择器：选择器获取选中状态的元素然后隐藏。 2.6 精品展示初始页面鼠标选中页面案例展示精品展示功能精品展示功能：通常用来推送目前热卖的商品，并支持快速切换商品。 2.6 精品展示案例分析分析过程：分析过程：HTML结构； jQuery特效； 实现步骤实现步骤：设计HTML结构和样式； 添加jQuery特效；2.6 精品展示案例实现 本章小结本章首先介绍了jQuery选择器的概念和优势，然后通过分类的方式讲解了不同类型选择器的使用，主要分为基本选择器、层次选择器和过滤选择器。要求读者了解jQuery选择器的优势，掌握基本选择器和层次选择器的使用，熟悉过滤选择器的使用。