携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情
首先我先把下载好的 jQuery 文件夹放到下面
这是下载地址 ：jquery.cuishifeng.cn/\
//引入方式
<script src="./jquery/jquery.min.js"></script>
注意：（jquery.min.js是我的文件名，不要写错了与自己的）
前端方法库：
插件 库 和 框架的区别
插件： 实现某一个单一类功能
库: 封装了各种的功能和你需要的工具
框架: 自己的完整的生态系统
主要内容是封装了各种 dom 操作
****优点:
1. 选择器
2. 链式编程
3. 隐式迭代
特点: 全兼容 2.0 以前的版本
2.0 以后逐步的不再兼容 IE
当你引入一个 jquery.js 或者 jquery.min.js 以后
会向全局暴露两个变量名
1. jQuery
2. $
jQuery 的选择器
包含两个部分
1. 选择器（对元素的获取）
基本选择器
使用方法: $(选择器)
返回值: 满足条件的所有元素(id 选择器除外)
放在一个数组里面返回给你
都是一个 集合 的形式
这个 集合 叫做 jquery 元素集合
css 如何捕获标签, 就可以怎么填写参数
特殊选择器
******使用方法: $(选择器)
对你已经存在的选择器进行修饰
1. :first
2. :last
3. :eq(索引)
按照索引排列的第几个
注意: 索引从 0 开始
4. :odd 按照索引排列的奇数个
5. :even 按照索引排列的偶数个
//html部分
<div id="box">1</div>
<div class="box">2</div>
<div>3</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<div name="username">5</div>
<button disabled>按钮</button>
<button disabled>按钮</button>
<button>按钮</button>
//引入jQuery样式 （后面代码这步骤会省略，大家注意啊）
<script src="./jquery/jquery.min.js"></script>
// 基本选择器
console.log($('div'))
console.log($('#box'))
console.log($('.box'))
console.log($('div > ul > li:nth-child(odd)'))
console.log($('div[name=username]'))
// 特殊选择器// 拿到所有 div 的第一个
console.log($('div:first'))
console.log($('div:last'))
console.log($('div:eq(0)'))
console.log($('li:odd'))
// js
console.log($('li:nth-child(odd)'))
// css
console.log($('li:even'))
// js
console.log($('li:nth-child(even)'))
// css
console.log($('button:enabled'))
console.log($('button:disabled'))
复制代码
jQuery 的筛选器
对 jQuery 的元素集合进行二次筛选
可以 直接进行链式编程
注意: 只有 jQuery 的元素集合才可以使用, 原生 DOM 对象不能使用
1. first()
元素集合里面的第一个
console.log($('li').first())\
2. last()
元素集合里面的最后一个
console.log($('li').last())\
3. eq(索引)
元素集合里面指定索引的那一个
console.log($('li').eq(2))\
4. next()
当前元素的下一个元素
console.log($('span').next())\
5. nextAll()
使用方法
1. 元素集合.nextAll() 获取到当前元素后面的所有兄弟元素
2. 元素集合.nextAll(选择器) 获取到当前元素后面所有元素中指定选择器的那一个
console.log($('span').nextAll())\
console.log($('span').nextAll('.box'))\
6. nextUntil()
使用方法
1. 元素集合.nextUntil() 获取到当前元素后面所有的兄弟元素
2. 元素结合.nextUntil(选择器) 获取到当前元素后面所有兄弟元素, 直到选择器元素为止(不包含选择器元素)
console.log($('span').nextUntil())\
console.log($('span').nextUntil('.box'))\
7. prev()
当前元素的上一个元素
console.log($('span').prev())\
8. prevAll()
1. 元素集合.prevAll() 获取到当前元素上面的所有兄弟元素
2. 元素集合.prevAll(选择器) 获取到当前元素上面的所有兄弟元素中指定选择器的那一个
console.log($('span').prevAll())\
console.log($('span').prevAll('.box'))\
9. prevUntil()
1. 元素结合.prevUntil() 获取到当前元素上面所有的兄弟元素
2. 元素结合.prevUntil(选择器) 获取到当前元素上面所有兄弟元素, 直到选择器元素为止(不包含选择器元素)
console.log($('span').prevUntil())\
console.log($('span').prevUntil('.box'))\
10. parent()
获取到当前元素的父元素
console.log($('span').parent())\
11. parents()
1. 元素集合.parents() 拿到结构父级的所有父元素
2. 元素集合.parents(选择器) 拿到结构父级里面所有父元素中符合选择器的那一个元素
console.log($('span').parents())\
console.log($('span').parents('body'))\
12. children()
1. 元素集合.children() 拿到该元素的所有子元素
2. 元素集合.children(选择器) 拿到该元素的所有子元素中符合选择器的那一个元素
console.log($('ul').children())\
console.log($('ul').children('.box'))\
13. sinblings()
拿到该元素的所有兄弟元素, 自己除外
console.log($('span').siblings())\
14. find()
找到该元素中所有后代元素里面符合选择器条件的元素
console.log($('body').find('span'))\
15. index()
获取到的就是该元素在其父元素里面的索引位置
console.log($('span').index())\
console.log($('.a'))\
console.log($('.a').first().index())\
console.log($('.a').last().index())
