- 38
- 0
- 约1.29万字
- 约 8页
- 2017-08-20 发布于浙江
- 举报
jquery选择器的
j query选择器
id选择器
一个用来查找的ID ,即元素的id属性
$( #id
id选择器也是基本的选择器 ,j Query内部使用JavaScript函数document.getElementById( 来处理ID的获取。原生语法的支持总是非常高
效的 ,所以在操作DOM的获取上 ,如果能采用id的话尽然考虑用这个选择器
id是唯一的 ,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id ,将只匹配该id选择集合的第一个DOM元素。但这种行
为不应该发生;有超过一个元素的页面使用相同的id是无效的
类选择器
顾名思义 ,通过class样式类名来获取节点
描述 :
$( .class
类选择器 ,相对id选择器来说 ,效率相对会低一点 ,但是优势就是可以多选
同样的j Query在实现上 ,对于类选择器 ,如果浏览器支持 ,j Query使用JavaScript的原生getElementsByClassName( 函数来实现的
右边实现一个原生getElementsByClassName( 函数的实现代码与j Query实现代码的比较
我们不难发现 :
j Query除了选择上的简单 ,而且没有再次使用循环处理
不难想到$(.imooc .css( 方法内部肯定是带了一个隐式的循环处理 ,所以使用j Query选择节点 ,不仅仅只是选择上的简单 ,同时还增加
很多关联的便利操作 ,后续我们还会慢慢的学到其他的优势。
change 方法与click方法的异同。
全选择器*
在CSS中 ,经常会在第一行写下这样一段样式
* {padding: 0; margin: 0;}
通配符*意味着给所有的元素设置默认的边距。j Query中我们也可以通过传递*选择器来选中文档页面中的元素
描述 :
$( *
抛开j Query ,如果要获取文档中所有的元素 ,通过document.getElementsByTagName( 中传递*同样可以获取到
不难发现 ,id、class、tag都可以通过原生的方法获取到对应的节点 ,但是我们还需要考虑一个兼容性的问题 ,我这里顺便提及一下 ,比
如:
1. IE会将注释节点实现为元素 ,所以在IE中调用getElementsByTagName里面会包含注释节点 ,这个通常是不应该的
2. getElementById的参数在IE8及较低的版本不区分大小写
3. IE7及较低的版本中 ,表单元素中 ,如果表单A的name属性名用了另一个元素B的ID名并且A在B之前 ,那么getElementById会
选中A
4. IE8及较低的版本 ,浏览器不支持getElementsByClassName
层级选择器
文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述 ,可以把文档树当作一个
家谱 ,那么节点与节点直接就会存在父子 ,兄弟 ,祖孙的关系了。
选择器中的层级选择器就是用来处理这种关系
子元素 后代元素 兄弟元素 相邻元素
通过一个列表 ,对比层级选择器的区别
$(parentchild 选择指定parent元素中指定的child直接子元素
$(ancestor descendant 选择给定祖先元素的所有后代子元素 ,一个元素的后代可能是他的孩子 ,孙子以及曾孙等。。
$(prev+next 选择所有紧接在prev元素后的next元素。
$(prev~siblings 匹prev元素之后的所有兄弟元素 ,具有相同的父元素 ,并匹配过滤siblings选择器。
仔细观察层级选择器之间还是有很多相似与不同点
1. 层级选择器都有一个参考节点
2. 后代选择器包含子选择器的选择的内容
3. 一般兄弟选择器包含相邻兄弟选择的内容
4. 相邻兄弟选择器和一般兄弟选择器所选择到的元素j query选择器.note ,必须在同一个父元素下
基本筛选选择器
很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素 ,为此j Query提供了一系列的筛选选择器用来更快捷的找到所需
的DOM元素。筛选选择器很多都不是CSS的规范 ,而是j Query自己为了开发者的便利延展出来的选择器
筛选选择器的用法与CSS中的伪元素相似 ,选择器用冒号 “:”开头 ,通过一个列表 ,看看基本筛选器的描述 :
注意事项 :
1. :eq( , :lt( , :gt( , :eve
您可能关注的文档
最近下载
- 2023-2024学年新疆乌鲁木齐市第一中学七年级上学期期末考试英语试卷 含答案.docx VIP
- 2025年辽宁职业学院单招(语文)测试题库新版.docx VIP
- 金属技术监督管理标准.pdf VIP
- 主变培训精品.pptx VIP
- 2025年学校培训初中地理新课标学习解读.pptx VIP
- 市中级人民法院党组2025年度民主生活会对照检查材料(五个带头).docx VIP
- 部编三上道德与法治期末复习填空选择 小学道德与法治试卷.pdf
- 广东省广州市越秀区2023-2024学年五年级上学期期末英语试题.docx VIP
- 2026年海南财金银河私募基金管理有限公司招聘备考题库参考答案详解.docx VIP
- 2020山东青岛中考《英语》试卷+答案+解析.docx VIP
原创力文档

文档评论(0)