《JQuery实战进阶：“web技能”》课件-第二章 jQuery选择器

JQuery应用开发——jQuery选择器目录2.1jQuery选择器简介2.2基本选择器2.3层次选择器2.4案例-下拉菜单2.5基本过滤选择器2.6案例-抽奖2.7可见性过滤选择器2.8内容过滤选择器2.9案例-表格内容筛选2.10属性过滤选择器2.11案例-定向抽奖2.12子元素过滤选择器2.13表单选择器2.14表单对象属性过滤选择器2.15案例-服饰精品展示JQuery应用开发——选择器简介01选择器简介选择器的优势目录CONTENT02总结0301

选择器简介

1、什么是选择器

jQuery选择器：jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素；语法：$(selector)；特性：方式更加多样化，还可以为元素添加行为；执行：返回一个jQuery对象。01选择器简介

1、什么是选择器

注意使用jQuery选择器获取元素后，由于返回的是jQuery对象，所以不仅能为元素添加样式，还支持为元素添加行为。例如，为元素绑定事件、操作元素属性等操作。02

选择器的优势

1、选择器的优势

获取方式：更加简洁，获取方式更多；选择器：支持从CSS1到CSS3及常用的选择器；document.getElementById('id的值');//根据id值获取元素document.getElementsByTagName('元素的名');//根据元素的名称获取元素

$('#id的值');//根据id值获取元素$('元素的名称');//根据元素的名称获取元素

vs03

总结选择器简介：jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素01选择器优势：更加简洁，获取方式更多；支持从CSS1到CSS3及常用的选择器02JQuery应用开发——基本选择器01基本选择器总结目录CONTENT0201

基本选择器

1、基本选择器

原生js获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。$(“选择器”)//里面选择器直接写CSS选择器即可，但是要加引号01

基本选择器

名称用法描述id选择器$("#id")获取指定id的元素全选选择器$("*")匹配所有元素类选择器$(".class")Index页面的结构文件获取同一类class的元素标签选择器$("div")获取相同标签名的所有元素并集选择器$("div,p,li")选取多个元素交集选择器$("li.current")交集元素1、基本选择器

01基本选择器

1、基本选择器

注意使用jQuery选择器获取元素后，由于返回的是jQuery对象，所以不仅能为元素添加样式，还支持为元素添加行为。例如，为元素绑定事件、操作元素属性等操作。02

总结基本选择器的使用01基本选择器的分类02JQuery应用开发层次选择器01后代选择器子代选择器目录CONTENT02兄弟选择器03总结0401

后代选择器

1、层次选择器

层级选择器：层级选择器可以完成多层级元素之间的获取。名称用法描述后代选择器$(‘ulli’)使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等子代选择器$(‘ul>li’)使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素pre+next$(‘.div+p’)兄弟选择器，选取紧接在.div元素后的p元素pre~siblings$(‘.div~p’)兄弟选择器，选取.div元素之后的所有p元素01

后代选择器

2.后代选择器$('#dvp')：获取子元素以及子元素下的所有其他元素。find()方法：使用find()方法获取指定元素的后代元素。示例$('#dvp'); //使用后代选择器获取$('#dv').find('p'); //使用find()方法获取02子代选择器1.子代选择器$(‘#dv>

p’)：获取儿子层级的元素，注意：并不会获取孙子层级的元素

children()方法：还可以使用children()方法代替子元素选择器，获取指定元素的子元素。示例$('#dv>p');//使用子元素选择器获取$('#dv').children('p');//使用children()方法获取03兄弟选择器1.“+”选择器

$('#dv+p')：选取紧跟在id为dv元素后的p元素

next()方法：可获取指定元素紧邻的下一个兄弟元素；示例$(‘#dv+p’);//使用“+”兄弟选择器获取$('#dv').next('p');//使用next()方法获取03

兄弟选择器2.“~”选择器$('#dv~p')：兄弟选择器，选取id为dv元素之后的所有p元素

nextAll()方法：可获取指定元素后的所有兄弟元素；示例$('#dv>p');//使用子元素选择器获取$('#dv').nextAll('p');//使用nextAll方法获取04总结后代选择器01子代选择器0203兄弟选择器JQuery应用开发——制作下拉菜单01任务导入提出任务目录CONTENT02分析任务03任务实施04总结0501任务导入

同学们，在学习了jQuery基本选择器、层次选择器的使用规则之后，我们一起来完成一个案例吧！02

提出任务本次课任务使用jQuery选择器，实现下拉菜单的效果03任务分析

案例效果：任务分析：初始状态下，子菜单会隐藏；鼠标经过导航项时，会显示对应的菜单；鼠标离开时，菜单会隐藏；被选中的一级导航项会添加样式。实践：让我们动手实践一下吧04任务实施1、鼠标移入效果$('.navlist>li').mouseover(function(){

$(this).children('ul').show();

$(this).css('background','darkblue');

$(this).children('a').css('color','red')})04

任务实施表示当前操作的元素，是jQuery对象鼠标移入2、鼠标移出效果$('.navlist>li').mouseout(function(){

$(this).children('ul').hide();

$(this).css('background','#efefef');

$(this).children('a').css('color','black');

})04

任务实施鼠标移出

掌握选择器的基本使用方法01使用选择器实现案例效果0205

总结jQuery应用开发——基本过滤选择器02基本过滤选择器的分类基本过滤选择器的使用方式目录CONTENT03归纳总结0401什么是过滤选择器01什么是过滤选择器通过过滤规则筛选DOM元素。1.过滤选择器类似于CSS选择器，以“:”开头，后面用于指定规则。2.使用方式“:first”——用于获取第一个元素。3.举例02过滤选择器的分类基本过滤选择器；内容过滤选择器；可见性过滤选择器；属性过滤选择器；子元素过滤选择器；表单过滤选择器；表单对象属性过滤选择器；03基本过滤选择器$('p:eq(0)');$('p:first');举例：获取DOM中的第一个p元素。“:first”选择器获取第一个元素。0代表索引值，第一个p元素的索引值为0。基本过滤选择器：过滤规则多数与元素的索引值有关。03基本过滤选择器选择器描述返回值:first获取第一个元素单个元素:last获取最后一个元素单个元素:not(selector)获取所有元素除了该选择器元素集合:even获取所有索引值为偶数的元素元素集合:odd获取所有索引值为奇数的元素元素集合:eq(index)获取指定索引值的元素单个元素:gt(index)获取所有大于索引值的元素元素集合:lt(index)获取所有小于索引值的元素元素集合:header获取标题类型的元素h1...元素集合04案例：成绩统计表案例效果相关知识:first 获取第一个元素:last获取最后一个元素:not(select)选取去除所有与给定选择器匹配的元素:even获取所有索引值为偶数的元素:odd获取所有索引值为奇数的元素04案例：成绩统计表语法构成描述示例:first选取第一个元素

$("li:first"

)选取所有<li>元素中的第一个<li>元素:last选取最后一个元素

$("li:last"

)选取所有<li>元素中的最后一个<li>元素:not(selector)选取去除所有与给定选择器匹配的元素$("li:not(.three)"

)选取class不是three的元素:even选取索引是偶数的所有元素（索引值从0开始）

$("li:even"

)选取索引是偶数的所有<li>元素:odd选取索引是奇数的所有元素（索引值从0开始）

$("li:odd"

)选取索引是奇数的所有<li>元素知识讲解05案例：课程列表案例效果相关知识:eq(index)选取索引等于index的元素:gt(index)选取索引大于index的元素:lt(index)选取索引小于index的元素:header选取所有标题元素，如h1~h605案例：课程列表知识讲解语法构成描述示例:eq(index)选取索引等于index的元素（index从0开始）

$("li:eq(1)"

)选取索引等于1的<li>元素:gt(index)选取索引大于index的元素（index从0开始）

$("li:gt(1)"

)选取索引大于1的<li>元素

（注：大于1，不包括1）:lt(index)选取索引小于index的元素（index从0开始）

$("li:lt(1)"

)选取索引小于1的<li>元素

（注：小于1，不包括1）:header选取所有标题元素，如h1~h6$(":header"

)选取网页中所有标题元素06归纳总结:first 获取第一个元素:last获取最后一个元素:not(select)选取去除所有与给定选择器匹配的元素:even获取索引值是偶数的元素，索引值从0开始:odd获取索引值是奇数的元素，索引值从0开始:eq(index)选取索引等于index的元素，索引值从0开始:gt(index)选取索引大于且不包括index的元素，索引值从0开始:lt(index)选取索引小于且不包括index的元素，索引值从0开始:header选取所有标题元素，如h1~h6jQuery应用开发案例—随机抽奖01任务导入提出任务目录CONTENT02分析任务03任务实施04归纳总结0501任务导入节假日商场里会推出随机抽奖活动，如抽取奖品、抽取幸运楼层、幸运时段等，类似的抽奖小程序可以用jQuery来实现。02提出任务本次课任务实现“随机抽奖”功能03任务分析任务分析：所有列表项图片以半透明效果显示；点击开始按钮，开始抽奖–click()、setInterval定时器、random()；点击停止按钮，产生抽奖结果–click(）、clearInterval()

排他思想

–siblings()。案例效果：实践：实现“随机抽奖”功能04任务实施05归纳总结0301产生随机数-

random()02

排他思想

-siblings()定时器的使用–setInterval()、clearInterval()jQuery应用开发——可见性过滤选择器01可见性过滤选择器介绍可见性过滤选择器的用法目录CONTENT02归纳总结0301可见性过滤选择器元素的可见状态：隐藏状态和显示状态可见性过滤选择器：就是利用元素的可见状态来匹配元素:visible选择器。:hidden选择器。02可见性过滤选择器的用法选择器描述返回值:visible获取所有的可见元素元素集合:hidden获取所有的不可见元素元素集合03总结:visible选择器可以获取html和body元素；:hidden选择器可以获取CSS样式为“display:none”的隐藏元素；:hidden选择器无法获取CSS样式为“visibility:hidden”的隐藏元素如果为input隐藏域设置CSS样式为“visibility:hidden”,“:hidden”选择器同样可以获取到该元素。可见性过滤选择器jQuery应用开发——内容过滤选择器02内容过滤选择器的用法目录CONTENT归纳总结0301内容过滤选择器介绍选择器描述返回值:contains(text)获取包含给定文本的元素元素集合:empty获取所有不包含子元素或空元素元素集合:has(selector)获取含有选择器匹配的元素元素集合:parent获取含有子元素或文本的元素元素集合元素的内容是指它所包含的子元素或文本内容。内容过滤选择器：可根据元素的内容来获取元素。01内容过滤选择器案例：祝福语表格:parent选取含有子元素或文本的元素用法举例：$('div:parent')选取拥有子元素的<div>元素02内容过滤选择器的用法02内容过滤选择器的用法:empty选取不包含子元素或者文本的空元素用法举例：$('div:empty')选取不包含子元素或文本的空的<div>元素02内容过滤选择器的用法:contains(text)选取含有内容为“text”的元素用法举例：$('div:contains("相机")')选取含有文本内容“相机”的<div>元素02内容过滤选择器的用法:has(selector)选取含有选择器所匹配的元素用法举例：$('div:has(p)')选取含有<p>元素的<div>元素03总结:parent获取含有子元素或文本的元素:empty获取所有不包含子元素或文本的空元素:contains(text)获取包含给定文本的元素:has(selector)获取含有选择器所匹配的元素jQuery应用开发案例—表格内容筛选01任务导入提出任务目录CONTENT02分析任务03任务实施04归纳总结0501任务导入根据关键字来筛选内容并显示，是网页中很常见的一种应用。看上去难度很大，其实利用jQuery就可以轻松的实现。02提出任务本次课任务实现“表格内容筛选”功能03任务分析键盘按键被松开时触发事件–keyup(）内容筛选–:contains(）获取文本框中的内容–val(）显示内容–show(）隐藏内容–hide()任务分析：案例效果：实践实现“表格内容筛选”功能04任务实施

键盘抬起事件keyup()01内容筛选:contains(）、val()

0205归纳总结显示与隐藏show()、hide()0305归纳总结核心代码键盘抬起内容筛选jQuery应用开发——属性过滤选择器01什么是属性过滤选择器属性过滤选择器的用法目录CONTENT02归纳总结0301属性过滤选择器属性选择器：通过元素的属性来筛选元素。使用方式：jQuery的属性过滤选择器将过滤规则包裹在“[]”中。选择器描述返回值[attribute]获取包含给定属性的元素元素集合[attribute=value]获取等于给定的属性是某个特定值的元素元素集合[attribute!=value]获取不等于给定的属性是某个特定值的元素元素集合[attribute^=value]获取给定的属性是以某些值开始的元素元素集合[attribute$=value]获取给定的属性是以某些值结尾的元素元素集合[attribute*=value]获取给定的属性是以包含某些值的元素元素集合[selector1][selectorN]获取满足多个条件的复合属性的元素元素集合02属性过滤选择器的用法1.[attribute]获取包含给定属性的元素。用法举例：$('div[name]')匹配含有name属性的div元素。案例案例02属性过滤选择器的用法2.[attribute=value]获取等于给定的属性是某个特定值的元素。用法举例：$('div[name="text"]')匹配name属性的值是“text”的div元素。案例02属性过滤选择器的用法3.[attribute!=value]获取不等于给定的属性是某个特定值的元素。用法举例：$('div[name!="text"]'

)匹配name属性的值不是“text”的div元素。案例02属性过滤选择器的用法4.[attribute^=value]获取给定的属性是以某些值开始的元素。用法举例：$('div[name^="text"]')匹配name属性的值以“text”开头的div元素。案例02属性过滤选择器的用法5.[attribute$=value]获取给定的属性是以某些值结尾的元素。用法举例：$('div[name$="text"]')匹配name属性的值是以“text”结尾的div元素。案例02属性过滤选择器的用法6.[attribute*=value]获取给定的属性是包含某些值的元素。用法举例：$('div[name*="text"]')匹配name属性值中含有text的div元素。03案例02属性过滤选择器的用法7.[selector1][selectorN]获取满足多个条件的复合属性的元素。用法举例：$('div[id][name^="text"]')匹配具有id属性并且name属性值是以“text”开头的div元素。案例03归纳总结通过元素的属性来筛选元素；将过滤规则包裹在“[]”中；同时使用单引号和双引号时：$('div[name$="text"]')$("div[name$='text']")属性过滤选择器：jQuery应用开发案例—定向抽奖01任务导入提出任务目录CONTENT02分析任务03任务实施04归纳总结0501任务导入抽奖活动是活跃现场气氛的一种方式，无论是商场做活动还是公司年会送福利都会设有抽奖环节，这节课我们来实现一种抽奖模式——定向旋转抽奖。02提出任务本次课任务实现“定向抽奖”功能03任务分析任务分析：每个列表项中放置一张图片和一个标识奖项的遮罩层，初始状态下，只显示半透明效果的图片。点击“抽奖”图片，即按顺时针旋转显示完全不透明效果的图片：click()、setInterval()3.点击停止按钮，显示遮罩层，产生抽奖结果：

click()、clearInterval()

案例效果：03任务分析知识点：当单击某元素时就会触发单击事件，执行事件处理函数。1.click()鼠标单击事件$('button').click(function(){

console.log('我被点击了');});单击事件03任务分析知识点：2.setInterval(调用的函数,时间)定时器可按指定的周期（毫秒）来调用函数，会不停的调用，直到窗口关闭或使用clearInterval(）清除定时器。

3.clearInterval(timer)清除定时器

vartimer=setInterval(auto,1000);functionauto(){

console.log('你好!');}单击事件实践：实现“定向抽奖”功能04任务实施05归纳总结自定义属性的设置01定时器的使用–setInterval()、clearInterval()

02排他思想–siblings()03鼠标单击事件-click()04jQuery应用开发——子元素过滤选择器01子元素过滤选择器介绍子元素过滤选择器的用法目录CONTENT02归纳总结0301子元素过滤选择器子元素过滤选择器：通过父元素和子元素的关系来获取相应的元素。

优势：可以同时获取不同父元素下满足条件的子元素。与层次选择器中的子元素选择器相比拥有较灵活的过滤规则。选择器描述返回值:first-child获取每个父元素下的第一个子元素元素集合:last-child获取每个父元素下的最后一个子元素元素集合:only-child获取父元素下的唯一子元素元素集合:nth-child(index|even|odd)获取每个元素下的特定元素，索引值从1开始元素集合01子元素过滤选择器02子元素过滤选择器的用法:first-child获取所有给定元素的第1个子元素。用法举例：$('ulli:first-child')匹配ul列表中的第1个子元素li。用法举例：$('ulli:last-child')匹配ul列表中的最后一个子元素li。02子元素过滤选择器的用法:last-child获取所有给定元素的最后一个子元素。用法举例：$('ulli:only-child')匹配的是作为ul列表中唯一子元素的li元素。02子元素过滤选择器的用法:only-child如果某个元素是它父元素中唯一的子元素，那么将会被匹配；如果父元素中含有其他元素，则不会被匹配。用法举例：02子元素过滤选择器的用法:nth-child(index/even/odd)获取每个父元素下的第index个子元素或奇偶元素，index从1开始。$('ulli:nth-child(3)')匹配ul中第3个li元素$('ulli:nth-child(even)')匹配ul中索引值为偶数的li元素$('ulli:nth-child(odd)')匹配ul中索引值为奇数的li元素$('ulli:nth-child(2n)')匹配ul中索引值为偶数的li元素$('ulli:nth-child(2n+1)')匹配ul中索引值为奇数的li元素03总结子元素过滤选择器：:first-child获取每个父元素下的第一个子元素。:last-child获取每个父元素下的最后一个子元素。:only-child获取父元素下的唯一子元素。:nth-child(even|odd|index)获取每个父元素下的特定元素，索引值从1开始。jQuery应用开发——表单过滤选择器01表单过滤选择器介绍表单过滤选择器的用法目录CONTENT02总结0301表单过滤选择器介绍表单过滤选择器：可以在页面中快速定位表单中某个类型元素的集合。选择器描述返回值:input获取表单中所有input|textarea|select|button元素元素集合:text获取表单中所有input[type=text]的元素元素集合:password获取表单中所有input[type=password]的元素元素集合:radio获取表单中所有input[type=radio]的元素元素集合:checkbox获取表单中所有input[type=checkbox]的元素元素集合:submit获取表单中所有input[type=submit]的元素单个元素:image获取表单中所有input[type=image]的元素元素集合:reset获取表单中所有input[type=reset]的元素元素集合:button获取所有input[type=button]的元素和button元素元素集合:file获取表单中所有input[type=file]的元素元素集合:input获取表单中所有input、textarea、select、button元素。用法举例：$('form:input')注意:在form和“:”之间有一个空格。02表单过滤选择器的用法:text获取表单中所有input[type=text]的元素，即单行文本框。用法举例：$('form:text')02表单过滤选择器的用法:password获取表单中所有input[type=password]的元素，即密码框。用法举例：$('form:password')02表单过滤选择器的用法:radio获取表单中所有input[type=radio]的元素，即单选按钮。用法举例：$('form:password')02表单过滤选择器的用法:checkbox获取表单中所有input[type=checkbox]的元素，即复选框。用法举例：$('form:checkbox')02表单过滤选择器的用法:submit获取表单中所有input[type=submit]的元素，即提交按钮。用法举例：$('form:submit')02表单过滤选择器的用法:reset获取表单中所有input[type=reset]的元素，即重置按钮。用法举例：$('form:reset')02表单过滤选择器的用法:button获取所有input[type=button]的元素和button元素，即普通按钮。用法举例：$('form:button')02表单过滤选择器的用法:file获取表单中所有input[type=file]的元素，即文件域。用法举例：$('form:file')02表单过滤选择器的用法:image获取表单中所有input[type=image]的元素，即图像域。用法举例：$('form:image')02表单过滤选择器的用法03归纳总结表单过滤选择器：:input、:text、:password

、:radio

、:checkbox

、:submit

、:reset

、:button

、:file

、:image

注意：1.“:button”选择器的作用范围，包括使用input[type=button]和button元素定义的按钮；2.“:image”选择器的作用范围针对的是使用input[type=image]定义的图像域，但不包含img元素定义的图像。jQuery应用开发——表单对象属性过滤选择器01什么是表单对象属性过滤选择器表单对象属性过滤选择器的用法目录CONTENT02归纳总结0301表单对象属性过滤选择器表单对象有一些专有属性用于表示表单的某种状态，例如：enabled、disabled、checked、selected属性。表单对象属性过滤选择器：通过表单中的对象属特征来匹配元素。选择器描述返回值:enabled获取表单中所有属性为可用的元素元素集合:disabled获取表单中所有属性为不可用的元素元素集合:checked获取表单中所有被选中的元素元素集合:selected获取表单中所有被选中option的元素元素集合:enabled获取表单中所有属性为