jQuery的选择器与CSS的选择器几乎相同,一次努力学习付出两份丰厚收获
jQuery 选择器按照功能主要分为“选择”与“过滤”两种选择器
1) 本节主要学习的3个分类 1)基础选择器 2)层次选择器 3)表单选择器
1,3这种两种类型必须理解掌握,在之后学习的ASP.Net的前端网页中常用
2) 理解掌握jQuery选择器,通过其快速找到指定的jQuery对象(一个或一组)
3) 回顾并对照javascript选择器
1) 基础选择器 分为:id,类名,标签 ,组合与通配符*;JQ与JS实现代码对照着记忆
1.1 通过id获取对象
注意:即使页面中有多个相同的id号,JQ与JS的操作都只对第一个元素有效
但是:CSS却对具有相同id的元素设置其样式时有效,可以自己测试一下
1.2 通过类名获取对象
//通过js方式
var jsdv = document.getElementsByClassName('dv2');
console.log(jsdv);//得到js对象
//通过JQ方式
var jqdv = $('.dv2');
console.log(jqdv);//得到JQ对象1.3 通过标签名称获取对象
//通过js方式
var jsdv = document.getElementsByTagName('p');
console.log(jsdv);//得到js对象
//通过JQ方式
var jqdv = $('p');
console.log(jqdv);//得到JQ对象1.4 通过组合选择器获取对象 选择器中 每项通过逗号分隔
注意:使用此选择器可以得到1)同一种标签比如都是p 2)不同标签比如p与span
//通过组合方式
console.log('使用组合选择器');
//通过JQ方式
var jqdv = $('#dv1,.dv2,span'); //里面有id 类名 与标签三种选择器
console.log(jqdv);//得到JQ对象1.5 通过通配符*获取所有对象
console.log('使用通配符选择器');
//通过JQ方式
var jqdv = $('*');
console.log(jqdv);//得到JQ对象
各个选择器的结果
最主要是牢记前三个常用的,后两个知道即可
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 获取其子孙辈元素 使用 空格 隔开
//获取当前节点下所有的子孙辈元素
var jqdv = $('#dv1 p'); //获取p1下的所有元素
console.log(jqdv); //结果为p2到p10共有9个元素上面的子孙辈的是一个扩展概念即下面的重孙...穷尽所有符合条件的元素
2.2 只获取子辈元素 使用 > 隔开
//只获取当前节点下的儿子辈元素
var jqdv = $('#dv1>p')
console.log(jqdv);//结果为p2,p3,p4的 3个元素2.3 获取当前元素后面的兄弟元素 使用 ~ 隔开
//只获取当前节点后面的兄弟元素
var jqdv = $('.dv2~p') //~ 这个符合一般在tab键上面 shift+~即可打出
console.log(jqdv); //结果为p3,p4的 2个元素2.4 获取当前元素指定紧挨的兄弟一个元素 使用 + 隔开
//只获取当前节点紧挨着的兄弟元素
var jqdv = $('.dv2+p')
console.log(jqdv); //结果为p3的 1个元素归纳总结按获取元素范围排位:1) 获取所有元素使用空格 2) 获取儿子元素使用> 3)获取后面所有兄弟元素使用~ 4)获取紧挨兄弟元素使用+
3) 表单选择器
常见表单元素
3.1 表单的作用
在网页中主要负责前端数据的采集功能,就是采集用户输入的信息,通过