jQuery

一、jQuery的安装与介绍

1.引入方式
离线引入：
CDN引入：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

npm安装：
npm install jquery
2.文件格式
源文件 jquery-3.6.0.js

• 开发环境推荐使用

压缩文件 jquery-3.6.0.min.js

• 生产环境推荐使用

map文件 jquery-3.6.0.min.map

• 压缩后方便调试的映射文件

3.ready文档载入事件

1. $(document).ready(fn)
2. $(fn)
3. window.onload

4.js 对象和 jQuery对象的转换
jQuery转JS：
1.通过索引获取
2.get()获取所有选中的DOM
3.get(index)获取指定索引的DOM
JS 转 jQuery：
使用 $函数转换

二、jQuery选择器

1. 标签选择器 特点: 直接使用标签名 作为选择器的名字 示例 : div , p …
2. ID选择器 特点: 根据标签的ID属性值进行选择、只能选中一个元素示例: #ID
3. class选择器示例: .class
4. * 通配符选择器示例: *
5. 属性选择器
   [attr]
   根据属性名选择元素
   [attr=val]
   根据属性=val 选取元素
   [attr!=val]
   对 [attr=val] 取反
   [attr^=val]
   选中 attr 以 val 开头的元素
   [attr$=val]
   选中 attr 以 val 结尾的元素
   [attr*=val]
   选中 attr 的值 中 包含 val 的元素
   [attr|=val]
   选中 attr = val 或者 attr 以 val- 开头的属性
   [attr~=val]
   选中 attr 属性值 包含 val 单词的 元素
   […][…]
   and 两个属性选择器必须同时满足
6. 后代选择器 特点: 多个选择器，以 空格 进行分割
7. 子 选择器 特点: 多个选择器， 以 > 进行分割
8. 同胞选择器特点:
   以 + 进行分割、选中 紧邻的 兄弟元素
   以 ~ 进行分割、选中 后面的所有兄弟元素
9. 分组选择器 特点: 以 逗号 进行分割、 同时选中多个元素
10. 子元素选择器
    :first-child / :last-child 选中父级元素下第一个/最后一个 子元素
    :first-of-type / :last-of-type 选中父级元素下的 同类型的第一个/最后一个 子元素
    :nth-child() / :nth-last-child()
    :nth-of-type()/ :nth-last-of-type()
    :only-child 获取父元素中的唯一一个子元素
11. 基本:
    :first/:last
    获取选择器 选中的多个元素中的 第一个/最后一个元素
    :eq(index)
    选中指定索引位置的元素
    index 从 0 开始
    lt(index) / gt(index)
    选中 <index / >index 索引的元素
    :not(seletor)
    排除 selector选中的元素
    :odd /:even
    获取奇/偶 对应的元素
    :focus
    获取 聚焦的元素
    :target
    获取URL对应的锚点的元素
    内容
    :contains(text)
    获取 选中的元素中 包含 指定的文本 元素
    :empty
    获取标签体中内容为空的元素
    单标签代表 标签体内容为 空
    :parent
    和 :empty 相反
    :has(selector)
    查找元素中是否包含 指定选择器的元素
    可见性
    :hidden
    可以处理 display:none
    可以处理 input:hidden
    内容不可见的标签，例如 script, style, title, meta
    :visible
    表单对象属性
    :checked
    获取所有被勾选的元素
    :selected
    获取被选中的元素
    :disabled
    获取所有被禁用的元素
    :enabled
    获取所有被启用的元素

注意
选择器中的特殊字符# ， . + > ~
1.如果 ID , class 属性的值 中包含 特殊字符，
需要对特殊字符进行转义 , 例如 \ \#
2.$.escapeSeletor(selector)
对存在特殊字符的内容进行转义
返回转义后的结果

jQuery 属性操作

对标签体内容进行处理
html()
获取选择器匹配的第一个元素的标签体内容
方法 返回一个 字符串
html(htmlStr)
修改 选择器 匹配的所有元素的 标签体内容
方法 返回一个 jQuery对象
html(fn(index, oldHtml))
修改 选择器匹配的所有元的 标签体内容
index: 代表 每一个 选中的元素的索引
oldHtml : 每一个选中元素的 标签体内容
fn 函数如果没有提供return ,则不修改内容
text()
获取所有选择器选中的元素的 标签体内容
合成一个新的字符串
text(textStr)
修改标签体中内容
text(fn(index, oldText))
作用 参考 html(fn)