知识点概述 jQuery的选择器与CSS的选择器几乎相同,一次努力学习付出两份丰厚收获 jQuery选择器按照功能主要分为选择与过滤两种选择器 1)本节主要学习的3个分类1)基础选择器2)层次选择器3)表单选择器 1,3这种两种类型必须理解掌握,在之后学习的ASP。Net的前端网页中常用 2)理解掌握jQuery选择器,通过其快速找到指定的jQuery对象(一个或一组) 3)回顾并对照javascript选择器通过jQuery选择器获取jQuery对象,使用js代码实现同等功能 1)基础选择器分为:id,类名,标签,组合与通配符;JQ与JS实现代码对照着记忆 1。1通过id获取对象 注意:即使页面中有多个相同的id号,JQ与JS的操作都只对第一个元素有效 但是:CSS却对具有相同id的元素设置其样式时有效,可以自己测试一下!引入JQ文件 1。2通过类名获取对象通过js方式varjsdvdocument。getElementsByClassName(dv2);console。log(jsdv);得到js对象通过JQ方式varjqdv(。dv2);console。log(jqdv);得到JQ对象 1。3通过标签名称获取对象通过js方式varjsdvdocument。getElementsByTagName(p);console。log(jsdv);得到js对象通过JQ方式varjqdv(p);console。log(jqdv);得到JQ对象 1。4通过组合选择器获取对象选择器中每项通过逗号分隔 注意:使用此选择器可以得到1)同一种标签比如都是p2)不同标签比如p与span通过组合方式console。log(使用组合选择器);通过JQ方式varjqdv(dv1,。dv2,span);里面有id类名与标签三种选择器console。log(jqdv);得到JQ对象 1。5通过通配符获取所有对象console。log(使用通配符选择器);通过JQ方式varjqdv();console。log(jqdv);得到JQ对象 各个选择器的结果 最主要是牢记前三个常用的,后两个知道即可!DOCTYPEhtmlhtmlxmlnshttp:www。w3。org1999xhtmlheadmetahttpequivContentTypecontenttexthtml;charsetutf8titletitle!引入JQ文件headbodyspan1spanspan2spanbodyhtml 2)层次选择器分为:子孙类(空格),子类(),其它兄弟(),紧挨的兄弟() 回顾下Dom树节点的关系(只有父子关系)牢记一句话:父子看深度,兄弟看索引 只要弄懂两点即可豁然开朗;快速理清它们的关系,更便于灵活掌握运用层次选择器的精髓,以家庭举例说明Dom树节点的关系 1)深度:相对于根节点而言,以下图的p2,p3,p4为例,其深度为1,它们的关系为兄弟节点;它们相当于p1的儿子;p5到p10相当于p1的孙子(在Dom节点的关系中没有此概念) 2)索引:相对于父节点而言(索引都是从0开始),以下图的p2与p5为例,p2与p5的索引为0,都是家庭的大儿子,不能因此说它们是兄弟关系,因为p5与p2深度不同(差了一辈),所以它们是父子关系的节点 文档结构及Dom树图示 2。1获取其子孙辈元素使用空格隔开获取当前节点下所有的子孙辈元素varjqdv(dv1p);获取p1下的所有元素console。log(jqdv);结果为p2到p10共有9个元素 上面的子孙辈的是一个扩展概念即下面的重孙。。。穷尽所有符合条件的元素 2。2只获取子辈元素使用隔开只获取当前节点下的儿子辈元素varjqdv(dv1p)console。log(jqdv);结果为p2,p3,p4的3个元素 2。3获取当前元素后面的兄弟元素使用隔开只获取当前节点后面的兄弟元素varjqdv(。dv2p)这个符合一般在tab键上面shift即可打出console。log(jqdv);结果为p3,p4的2个元素 2。4获取当前元素指定紧挨的兄弟一个元素使用隔开只获取当前节点紧挨着的兄弟元素varjqdv(。dv2p)console。log(jqdv);结果为p3的1个元素 归纳总结按获取元素范围排位:1)获取所有元素使用空格2)获取儿子元素使用3)获取后面所有兄弟元素使用4)获取紧挨兄弟元素使用!DOCTYPEhtmlhtmlxmlnshttp:www。w3。org1999xhtmlheadmetahttpequivContentTypecontenttexthtml;charsetutf8titletitle!引入JQ文件headbody11678910bodyhtml 3)表单选择器 常见表单元素 3。1表单的作用 在网页中主要负责前端数据的采集功能,就是采集用户输入的信息,通过