2023学年完整公开课版jQuery选择器

《物联网Web前端开发基础》课程

jQuery选择器【任务9-2】jQuery选择器下面将带领读者学习jQuery选择器。需求分析在使用JavaScript程序时，经常需要操作网页中的文本、结构、样式等内容，在操作前必须先准确地找到相应的DOM元素。为此，jQuery提供了类似CSS选择器的机制，利用jQuery选择器可以轻松地获取DOM元素。【任务9-2】jQuery选择器是什么：类似CSS选择器的机制的一种操作HTML元素的方式。好处：可以轻松的获取DOM元素。基本语法：$(选择器)。需求分析【任务9-2】jQuery选择器需求分析根据选择器获取方式的不同大致可以将其分为以下几类。基本选择器属性选择器层级选择器内容选择器可见性选择器基本过滤选择器子元素选择器表单选择器【任务9-2】jQuery选择器知识储备——基本选择器jQuery中的基本选择器，常用的分别为：标签选择器、类选择器和ID选择器。选择器功能描述示例element根据指定元素名匹配所有元素$("li")选取所有的<li>元素.class根据指定类名匹配所有元素$(".bar")选取所有class为bar的元素#id根据指定id匹配一个元素$("#btn")选取id为btn的元素selector1,selector2,…同时获取多个元素$("li,p,div")同时获取所有<li>、<p>和<div>元素【任务9-2】jQuery选择器知识储备——基本选择器【任务9-2】jQuery选择器知识储备——层级选择器层级选择器，通过一些指定符号，如空格、>、+和~完成多层级元素之间的获取。选择器功能描述示例selectorselector1选取祖先元素下的所有后代元素$("div.test")选取<div>下所有class名为test的元素（多级）parent>child获取父元素下的所有子元素$(".box>.con")选取class名为box下的所有class名为con的子元素（一级）prev+next获取当前元素紧邻的一下同级元素$("div+.title")获取紧邻<div>的下一个class名为title的兄弟节点prev~siblings获取当前元素后的所有同级元素$(".bar~li")获取class名为bar的元素后的所有同级元素节点<li>【任务9-2】jQuery选择器知识储备——层级选择器【任务9-2】jQuery选择器知识储备——基本过滤选择器基本过滤选择器，表示对获取到的元素进行筛选，如偶数行中的元素等。选择器功能描述示例:first获取指定选择器中的第一个元素$("li:first")获取第1个<li>元素:last获取指定选择器中的最后一个元素$("li:last")获取最后1个<li>元素:even获取索引为偶数的指定选择器中的奇数行数据，索引默认从0开始$("li:even")获取所有li元素中，索引为偶数的奇数行数据，如索引为0,2,4的第1个、第3个和第5个<li>元素:odd获取索引为奇数的指定选择器中的偶数行数据，索引默认从0开始$("li:odd")获取所有<li>元素中，索引为奇数的偶数行数据，如索引为1,3,5的第2个、第4个和第6个<li>元素:eq(index)获取索引等于index的元素，默认从0开始$("li:eq(3)")获取索引为3的<li>元素【任务9-2】jQuery选择器知识储备——基本过滤选择器选择器功能描述示例:gt(index)获取索引大于index的元素$("li:gt(3)")获取索引大于3的所有<li>元素:lt(index)获取索引小于index的元素$("li:lt(3)")获取索引小于3的所有<li>元素:not(seletor)获取除指定的选择器外的其他元素$("li:not(li:eq(3))")获取除索引为3外的所有<li>元素:focus匹配当前获取焦点的元素$("input:focus")匹配当前获取焦点的<input>元素:animated匹配所有正在执行动画效果的元素$("div:not(:animated)")匹配当前没有执行动画的<div>元素:target选择由文档URI的格式化识别码表示的目标元素若URI为/#foo，则$("div:target")将获取<divid="foo">元素【任务9-2】jQuery选择器知识储备——基本过滤选择器【任务9-2】jQuery选择器知识储备——内容选择器根据元素的内容完成指定元素的获取。例如，获取所有元素内容不为空的<li>等。选择器功能描述示例:contains(text)获取内容包含text文本的元素$("li:contains('js')")获取内容中含“js”的<li>元素:empty获取内容为空的元素$("li:empty")获取内容为空的<li>元素:has(selector)获取内容包含指定选择器的元素$("li:has('a')")获取内容中含<a>元素的所有<li>元素:parent获取内容不为空的元素（特殊）$("li:parent")获取内容不为空的<li>元素【任务9-2】jQuery选择器知识储备——内容选择器【任务9-2】jQuery选择器知识储备——子元素选择器选择器功能描述:nth-child(index/even/odd/公式)索引index默认从1开始，匹配指定index索引、偶数、奇数、或符合指定公式（如2n，n默认从0开始）的子元素:first-child获取第一个子元素:last-child获取最后一个子元素:only-child如果当前元素是唯一的子元素，则匹配:nth-last-child(index/even/odd/公式)选择所有它们父元素的第n个子元素。计数从最后一个元素开始到第一个【任务9-2】jQuery选择器知识储备——子元素选择器选择器功能描述:nth-of-type(index/even/odd/公式))选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素:first-of-type选择所有相同的元素名称的第一个子元素:last-of-type选择所有相同的元素名称的最后一个子元素:only-of-type选择所有没有兄弟元素，且具有相同的元素名称的元素:nth-last-of-type(index/even/odd/公式)选择所有它们的父级元素的第n个子元素，计数从最后一个元素到第一个【任务9-2】jQuery选择器知识储备——子元素选择器【任务9-2】jQuery选择器知识拓展——可见性选择器为了方便开发，jQuery中还提供了可见或隐藏元素的获取。选择器功能描述示例:hidden获取所有隐藏元素$("li:hidden")获取所有隐藏的<li>元素:visible获取所有可见元素$("li:visible")获取所有可见的<li>元素当指定元素的display设置为none时，可以通过“:hidden”获取隐藏的元素。当指定元素的display设置为block时，可以通过“:visible”获取可见的元素。【任务9-2】jQuery选择器知识拓展——属性选择器根据元素的属性获取指定元素的方式。如获取class值为current的div元素等。选择器功能描述示例[attr]获取具有指定属性的元素$("div[class]")获取含有class属性的所有<div>元素[attr=value]获取属性值等于value的元素$("div[class=current]")获取class等于current的所有<div>元素[attr!=value]获取属性值不等于value的元素$("div[class!=current]")获取class不等于current的所有<div>元素[attr^=value]获取属性值以value开始的元素$("div[class^=box]")获取class属性值以box开始的所有<div>元素[attr$=value]获取属性值以value结尾的元素$("div[class$=er]")获取class属性值以er结尾的所有<div>元素【任务9-2】jQuery选择器知识拓展——属性选择器选择器功能描述示例[attr*=value]获取属性值包含value的元素$("div[class*='-']")获取class属性值中含有“-”符号的所有<div>元素[attr~=value]获取元素的属性值包含一个value，以空格分隔$("div[class~='box']")获取class属性值等于“box”或通过空格分隔并含有box的<div>元素，如“tbox”[attr1][attr2]...[attrN]获取同时拥有多个属性的元素$("input[id][name$='usr']")获取同时含有id属性和属性值以usr结尾的name属性的<input>元素【任务9-2】jQuery选择器知识拓展——表单选择器选择器功能描述:input获取页面中的所有表单元素，包含<select>以及<textarea>元素:text选取页面中的所有文本框:password选取所有的密码框:radio选取所有的单选按钮:checkbox选取所有的复选框:submit获取submit提交按钮:reset获取reset重置按钮:image获取type="image"的图像域【任务9-2】jQuery选择器知识拓展——表单选择器选择器功能描述:button获取button按钮，包括<button></button>和type="button":file获取type="file"的文件域:hidden获取隐藏表单项:enabled获取所有可用表单元素:disabled获取所有不可用表单元素:checked获取所有选中的表单元素，主要针对radio和checkbox:selected获取所有选中的表单元素，主要针对selec