🎄欢迎来到@边境矢梦°的csdn博文，本文主要讲解Java 中JavaScript 开发利器之 jQuery的相关知识🎄

🌈我是边境矢梦°，一个正在为秋招和算法竞赛做准备的学生🌈
🎆喜欢的朋友可以关注一下🫰🫰🫰，下次更新不迷路🎆

Ps: 月亮越亮说明知识点越重要 (重要性或者难度越大)🌑🌒🌓🌔🌕  

目录

 前言

一. JQuery是什么

介绍

原理

作用

二. jQuery 对象和 DOM 对象

什么是 jQuery 对象

DOM 对象转成 jQuery 对象

jQuery 对象转成 DOM 对象

三. jQuery 选择器

1 jQuery 选择器介绍

2 基本选择器

3 层次选择器

4 基础过滤选择器

5 内容过滤选择器

6 可见度过滤选择器

7 属性过滤选择器

 8 子元素过滤选择器

9 表单属性过滤选择器

10 表单选择器

四. jQuery 的 DOM 操作

1. 查找节点, 修改属性

2. 创建节点(形容词和动词)

 3. 删除节点

4. 复制节点

5. 替换节点

6. 属性操作

7. 样式操作

8. 获取 HTML, 文本和值

 9. 常用遍历节点方法

 10. CSS-DOM 操作加强

 前言

一个简洁的js库

jQuery 对象转成 DOM 对象

3 层次选择器

1 、 ancestor descendant 用法 : $(”form input”) ; 返回值 集合元素

        说明: 在给定的祖先元素下匹配所有 后代元素 . 这个要下面讲的 ”parent > child” 区分 开

2 、 parent > child 用法 : $(”form > input”) ; 返回值 集合元素

        说明: 在给定的父元素下匹配所有 子元素 . 注意 : 要区分好后代元素与子元素

3 、 prev + next 用法 : $(”label + input”) ; 返回值 集合元素

        说明: 匹配所有 紧接在 prev 元素后的 next 元素

4 、 prev ~ siblings 用法 : $(”form ~ input”) ; 返回值 集合元素

        说明: 匹配 prev 元素之后的所有 siblings 元素 . 注意 : 是匹配之后的元素,不包含该元素在内 , 并且 siblings 匹配的是和 prev 同辈的元素 , 其后辈元素不被匹配 .

4 基础过滤选择器

1 、 :first 用法 : $("tr:first") ; 返回值 单个元素的组成的集合

        说明: 匹配找到的第一个元素

2 、 :last 用法 : $("tr:last") 返回值 集合元素

        说明: 匹配找到的最后一个元素 . 与 :first 相对应 .

3 、 :not(selector) 用法 : $(" input:not(:checked) ") 返回值 集合元素

        说明: 去除所有与给定选择器匹配的元素 . 有点类似于 ” 非 ” , 意思是没有被选中的 input( 当 input 的 type="checkbox").

4 、 :even 用法 : $("tr:even") 返回值 集合元素

        说明: 匹配 所有索引值为偶数的元素 ，从 0 开始计数 .js 的数组都是从 0 开始计数的 . 例如要选择 table 中的行 , 因为是从 0 开始计数 , 所          以 table 中的第一个 tr 就为偶数 0.

5 、 : odd 用法 : $("tr:odd") 返回值 集合元素

        说明: 匹配 所有索引值为奇数的元素 , 和 :even 对应 , 从 0 开始计数 .

6 、 :eq(index) 用法 : $("tr:eq(0)") 返回值 集合元素

        说明: 匹配一个给定索引值的元素 .eq(0) 就是获取第一个 tr 元素 . 括号里面的是索引值 , 不是元素排列数 .

7 、 :gt(index) 用法 : $("tr:gt(0)") 返回值 集合元素

        说明: 匹配所有大于给定索引值的元素 .

8 、 :lt(index) 用法 : $("tr:lt(2)") 返回值 集合元素

        说明: 匹配所有小于给定索引值的元素.

9 、 :header ( 固定写法 ) 用法 : $(":header").css("background", "#EEE") 返回值 集合元素

        说明: 匹配如 h1, h2, h3 之类的标题元素 . 这个是专门用来获取 h1,h2 这样的标题元 素 .

10 、 :animated ( 固定写法 ) 返回值 集合元素

        说明: 匹配所有正在执行动画效果的元素

5 内容过滤选择器

1 、 :contains(text) 用法 : $("div:contains('John')") 返回值 集合元素

        说明: 匹配包含给定文本的元素 . 这个选择器比较有用，当我们要选择的不是 dom 标签 元素时 , 它就派上了用场了 , 它的作用是查找被标签 " 围 " 起来的文本内容是否符合指定的内 容的 .

2 、 :empty 用法 : $("td:empty") 返回值 集合元素

        说明: 匹配所有不包含子元素或者文本的空元素

3 、 :has(selector) 用法 : $("div:has(p)").addClass("test") 返回值 集合元素

        说明: 匹配含有选择器所匹配的元素的元素 . 这个解释需要好好琢磨 , 但是一旦看了使 用的例子就完全清楚了 : 给所有包含 p 元素的 div 标签 加上 class="test".

4 、 :parent 用法 : $("td:parent") 返回值 集合元素

        说明: 匹配含有子元素或者文本的元素. 注意 : 这里是 ":parent", 可不是 ".parent", 与上 面讲的 ":empty" 形成反义词 .

四. jQuery 的 DOM 操作

1. 查找节点, 修改属性

//获取<p>节点
var $para = $("p");

//获取<p>元素节点属性title
var p_txt = $para.attr("title"); 

//打印title属性值
alert(p_txt); 

$(document).ready(function(){
    
    // 更改图像的来源路径，使其显示位于 "../image/1.png" 的图像文件
    $("img").attr("src", "../image/1.png");
    
    // 更改图像在页面上的高度，将其调整为指定的像素大小。
    $("img").attr("height", "200");

}

 3. 删除节点

4. 复制节点

1 、 clone(): 克隆匹配的 DOM 元素 , 返回值为克隆后的副本 . 但此时复制的新节点不具有 任何行为 .

2 、 clone(true): 复制元素的同时也复制元素中的的事件

5. 替换节点

1.replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM/juqery 元素 A.replaceWith(B)

2.replaceAll(): 颠倒了的 replaceWith() 方法 .A.replaceAll(B)

3. 注意 : 若在替换之前 , 已经在元素上绑定了事件 , 替换后原先绑定的事件会与原先的元 素一起消失

6. 属性操作

1.attr(): 获取属性和设置属性

2.attr() 传递一个参数时 , 即为某元素的获取指定属性

3.attr() 传递两个参数时 , 即为某元素设置指定属性的值

4.jQuery 中有很多方法都是一个函数实现获取和设置 . 如 : attr(), html(), text(), val() , height(), width(), css() 等 , 后面我们还会举例说明 .

5.removeAttr(): 删除指定元素的指定属性

7. 样式操作

1. 获取 class 和设置 class : class 是元素的一个属性 , 所以获取 class 和设置 class 都可 以使用 attr() 方法来完成 .

2. 追加样式 : addClass()

3. 移除样式 : removeClass() --- 从匹配的元素中删除全部或指定的 class

4. 切换样式 : toggleClass() --- 控制样式上的重复切换 . 如果类名存在则删除它 , 如果类名 不存在则添加它 .

5. 判断是否含有某个样式 : hasClass() --- 判断元素中是否含有某个 class, 如果有 , 则返回 true; 否则返回 false

8. 获取 HTML, 文本和值

1 、设置或返回所选元素的内容（包括 HTML 标记） : html()

2 、读取和设置某个元素中的文本内容 : text(). 该方法既可以用于 HTML 也可以用于 XML 文档 .

3 、读取和设置某个元素中的值 : val() --- 该方法类似 JavaScript 中的 value 属性 . 对于文 本框 , 下拉列表框 , 单选框该方法可返回元素的值

 9. 常用遍历节点方法

1 、取得匹配元素的所有子元素组成的集合 : children(). 该方法只考虑子元素而不考虑任何 后代元素 .

2 、取得匹配元素后面的同辈元素的集合 :next()/nextAll();

3 、取得匹配元素前面的同辈元素的集合 :prev()/prevAll();

4 、取得匹配元素前后所有的同辈元素 : siblings()

5 、获取指定的第几个元素 : nextAll().eq(index)

6 、对获取到的同辈元素进行过滤 nextAll().filter(" 标签 ")

 10. CSS-DOM 操作加强

1 、获取和设置元素的样式属性 : css()

2 、获取和设置元素透明度 : opacity 属性

3 、获取和设置元素高度 , 宽度 : height(), width(). 在设置值时 , 若只传递数字 , 则默认单位 是 px. 如需要使用其他单位则需传递一个字符串 , 例如 $("p:first").height("2em");

4 、获取元素在当前视窗中的相对位移 : offset(). 其返回对象包含了两个属性 : top, left. 该方 法只对可见元素有效