jquery（5z）

jQuery

+ https://jquery.cuishifeng.cn/
+ 前端方法库
=> 插件 库 和 框架的区别
=> 插件: 实现某一个单一类功能
=> 库: 封装了各种的功能和你需要的工具
=> 框架: 自己的完整的生态系统
+ 主要内容是封装了各种 dom 操作
+ 优点:
1. 选择器
2. 链式编程
3. 隐式迭代
+ 特点:
=> 号称全兼容
=> 2.0 以前的版本
=> 2.0 以后逐步的不再兼容 IE
+ 当你引入一个 jquery.js 或者 jquery.min.js 以后
=> 会向全局暴露两个变量名
1. jQuery
2. $
+ jQuery 从 $()

jQuery 的选择器

+ 包含两个部分
1. 选择器
=> 对元素的获取
=> 基本选择器
=> 特殊选择器
2. 筛选器
=> 对已经获取到的元素集合进行二次筛选

选择器 - 基本选择器
+ 语法: $(选择器)
+ 返回值: 满足条件的所有元素(id 选择器除外)
=> 放在一个数组里面返回给你
=> 都是一个 集合 的形式
=> 我们管这个 集合 叫做 jquery 元素集合
+ 你的 css 如何捕获标签, 这里就可以怎么填写参数

选择器 - 特殊选择器
+ 语法: $(选择器)
=> 对你已经存在的选择器进行修饰
1. :first
2. :last
3. :eq(索引)
=> 按照索引排列的第几个
=> 注意: 从 0 开始
4. :odd
=> 按照索引排列的奇数个
5. :even
=> 按照索引排列的偶数个

筛选器
+ 对 jquery 的元素集合进行二次筛选
+ 直接进行链式编程就可以了

jQuery 的筛选器

+ 对 jQuery 的元素集合进行二次筛选
+ 注意: 只有 jQuery 的元素集合才可以使用, 原生 DOM 对象不能使用

1. first()
=> 元素集合里面的第一个
2. last()
=> 元素集合里面的最后一个
3. eq(索引)
=> 元素集合里面指定索引的那一个

4. next()
=> 当前元素的下一个元素
5. nextAll()
=> 语法
1. 元素集合.nextAll() 获取到当前元素后面的所有兄弟元素
2. 元素集合.nextAll(选择器) 获取到当前元素后面所有元素中指定选择器的那一个
6. nextUntil()
=> 语法
1. 元素集合.nextUntil() 获取到当前元素后面所有的兄弟元素
2. 元素结合.nextUntil(选择器) 获取到当前元素后面所有兄弟元素, 直到选择器元素为止(不包含选择器元素)

7. prev()
=> 当前元素的上一个元素
8. prevAll()
=> 语法
1. 元素集合.prevAll() 获取到当前元素上面的所有兄弟元素
2. 元素集合.prevAll(选择器) 获取到当前元素上面的所有兄弟元素中指定选择器的那一个
9. prevUntil()
=> 语法
1. 元素结合.prevUntil() 获取到当前元素上面所有的兄弟元素
2. 元素结合.prevUntil(选择器) 获取到当前元素上面所有兄弟元素, 直到选择器元素为止(不包含选择器元素)

10. parent()
=> 获取到当前元素的父元素
11. parents()
=> 语法
1. 元素集合.parents() 拿到结构父级的所有父元素
2. 元素集合.parents(选择器) 拿到结构父级里面所有父元素中符合选择器的那一个元素
12. children()
=> 语法
1. 元素集合.children() 拿到该元素的所有子元素
2. 元素集合.children(选择器) 拿到该元素的所有子元素中符合选择器的那一个元素
13. sinblings()
=> 拿到该元素的所有兄弟元素, 自己除外

14. find()
=> 找到该元素中所有后代元素里面符合选择器条件的元素
15. index()
=> 获取到的就是该元素在其父元素里面的索引位置

jQuery 操作文本内容

+ 操作元素内的文本和超文本
+ 注意: 属于 jQuery 的方法 只能 jquery元素集合调用, 原生 DOM 不能调用

1. html()
=> 语法:
1. 元素集合.html()
+ 获取该元素的超文本内容, 以字符串的形式返回
+ 获取的时候为了保证 html 结构只能获取第一个的元素的超文本内容
2. 元素集合.html('内容')
+ 设置元素集合内元素的超文本内容
+ 完全覆盖式的写入
+ 隐式迭代: 元素集合内有多少元素, 就写入多少元素

2. text()
=> 语法:
1. 元素集合.text()
+ 获取该元素的文本内容, 以字符串的形式返回
+ 因为是文本内容, 不涉及 html 结构, 所以拿到的是所有元素的文本内容
+ 以一个字符串的形式返回
2. 元素集合.text('内容')
+ 设置元素集合内元素的文本内容
+ 完全覆盖式的写入
+ 隐式迭代: 元素集合内有多少元素, 就写入多少元素

3. val()
=> 语法:
1. 元素集合.val()
+ 获取元素集合内元素的 value 值
2. 元素集合.val('内容')
+ 设置元素集合内元素的 value 值
+ 完全覆盖式的写入
+ 隐式迭代: 元素集合内有多少元素, 就写入多少元素

jQuery 操作元素类名

1. addClass()
+ 添加元素类名
2. removeClass()
+ 删除元素类名
3. hasClass()
+ 判断有没有类名
4. toggleClass()
+ 切换类名
+ 如果原先有, 就是删除
+ 如果原先没有, 就是添加

jQuery 操作元素样式

1. css()
1-1. 语法: 元素集合.css('width')
=> 获取元素的某一个样式的值, 不管是行内还是非行内都能获取到
1-2. 语法: 元素集合.css('样式名', '样式值')
=> 设置元素的行内样式
=> 隐式迭代: 元素集合内有多少元素设置多少元素
=> 设置的时候, 如果你需要设置的单位是 px 可以不写
1-3. 语法: 元素集合.css({ 样式名1: 样式值1, 样式名2: 样式值2, ... })
=> 批量给元素设置行内样式
=> 隐式迭代: 元素集合内有多少元素设置多少元素
=> 设置的时候, 如果你需要设置的单位是 px 可以不写