持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情
jQuery引入及其选择器
jQuery是JS的一个库，它里面封装了一些我们开发中常用的一些功能；它提供了一些方便的选择器，可以让我们更方便的操作DOM。
在我们使用中，只需要引入jQuery的js文件，就可以使用jQuery的选择器了。
jQuery的使用
jQuery的使用分为三步：
- 引入jQuery的js文件
- 写入口函数
- 写功能的实现代码（事件处理函数）
// 引入jQuery的js文件
<script src="jquery-3.2.1.js"></script>
// 写入口函数
$(document).ready(function () {
// 写功能的实现代码（事件处理函数）
$('#show').click(function () {
$('p').show();
})
});
书写入口函数的集中写法
- $(document).ready(function () {});
适用于文档加载完毕，图片还未加载的时候执行此函数 - $(function () {});
适用于文档加载完毕，图片未加载的时候执行此函数 - $(window).ready(function(){});
适用于文档加载完毕，图片也加载完毕的时候执行此函数
jQuery的选择器
- 基本选择器
| 符号 | 说明 | 用法 |
|---|---|---|
| $('#demo') | 选择id为demo的第一个元素 | $('#test') |
| $('.demo') | 选择所有类名为demo的元素 | $('.test') |
| $('tagName') | 选择所有对应标签名的元素怒 | $('div') |
| $('*') | 选择所有元素 | $('*') |
| $('.demo,div') | 选择多个指定元素，中间使用逗逗号间隔 | $('.test,div') |
其中ID选择器、类选择器、标签选择器比较重要。
- 层级选择器
| 符号 | 说明 | 用法 |
|---|---|---|
空格 | 后代选择器，选择所有的后代元素 | $('div p') |
> | 自带选择器，选择所有的子代元素 | $('div span') |
+ | 选择紧挨着的下一个元素 | $('div+p') |
~ | 兄弟选择器，选择后面所有的兄弟元素 | $('div~p') |
- 过滤选择器
| 符号 | 说明 | 用法 |
|---|---|---|
| :eq(index) | 选择序号为index的元素，匹配第一个 | $(li:eq(4)) |
| :gt(index) | 选择序号大于index的元素 | $('li:gt:(3)') |
| :lt(index) | 选择序号小于index的远元素 | $('li:lt(2)') |
| :odd | 选择序号为奇数的元素 | $('ul:odd') |
| :even | 选择序号为偶数的元素 | $('ul:even') |
| :first | 选择匹配的第一个元素 | $('div:first') |
| :last | 悬着匹配的最后一个元素 | $('p:last') |
上面表格中，所有的index都是大于或者等于0的整数，代表着索引号。
4.属性选择器
| 符号 | 说明 | 用法 |
|---|---|---|
| $('标签[属性]') | 选择所有包含此属性的标签 | $('a[href]') |
| $('标签[属性 = "值"]') | 选择所有包含此属性且属性值相匹配的标签 | $('div[class = "box"]') |
| $('标签[属性 != "值"]') | 选择所有包含该属性且属性值不相匹配的该标签 | $(div[class != "box"]) |
| $('标签[属性 ^= "value"]') | 选择所有该属性值以value开头的对应标签 | $('div[id ^= "vm"]') |
| = "value"]') | 选择所有该属性值以value结尾的对应标签 | = "qw"]') |
| $('标签[属性 *= "value"]') | 选择所有包含该属性且值包含value的对应标签 | $('div [class *= 'o']') |
- 筛选选择器
| 符号 | 说明 | 用法 |
|---|---|---|
| find() | 选择指定元素的所欲所有后代元素 | $('ul').find('li') 选择ul所有的后代元素li |
| children('标签') | 选择指定元素的子元素 | $('ul').children('li')选择ul所有的子代元素 |
| siblings() | 查找所有的兄弟元素 | $('ul').siblings() |
| parent() | 查找亲父元素 | $('ul').parent() |
| eq(index) | 查找指定元素的第index+1个元素，index为所索引 | $('ul').e(3) |
