🎄欢迎来到@边境矢梦°的csdn博文，本文主要讲解Java 中JavaScript 开发利器之 jQuery的相关知识🎄
Ps: 月亮越亮说明知识点越重要 (重要性或者难度越大)🌑🌒🌓🌔🌕
目录
前言
一个简洁的js库
WRITE LESS,DO MORE
,
写更少的代码
,
做更多的事情
jQuery是一个JavaScript库, vue是一个框架, 前者更灵活
一. JQuery是什么
介绍
1. jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom...2. 提供方法、 events 、选择器，并且方便地为网站提供 AJAX 交互3. 其宗旨是 — WRITE LESS,DO MORE , 写更少的代码 , 做更多的事情 .4. jQuery 实现了浏览器的兼容问题
原理
jQuery库的编写原理主要是通过封装和扩展JavaScript语言的功能和API来实现的。
具体来说，jQuery库的编写原理包括以下几个方面：
-
封装和抽象：jQuery库封装了一系列常见的DOM操作、事件处理、Ajax请求等功能，以简化开发人员的工作。它对底层的JavaScript操作进行了封装和抽象，提供了更简洁、易用的接口。
-
选择器引擎：jQuery库通过自定义的选择器引擎，可以使用CSS选择器来选择HTML元素。这使得开发人员能够方便地操作DOM元素，而不需要繁琐地编写原生的JavaScript代码。
-
链式调用：jQuery库采用链式调用的设计模式，使得可以对选择的元素进行连续的操作。通过返回相同的jQuery对象，可以在同一行代码中依次调用多个方法，提高开发效率和代码可读性。
-
跨浏览器兼容性：jQuery库在底层实现上考虑了不同浏览器之间的差异，尽可能提供一致的操作体验。它对浏览器的特性和兼容性进行了封装和处理，屏蔽了底层差异，使开发人员能够更方便地编写跨浏览器兼容的代码。
作用
作用上，jQuery库主要有以下几个方面：
-
简化DOM操作：jQuery提供了丰富的DOM操作方法，可以快速地选取、操作和修改页面中的元素，简化了复杂的DOM操作过程。
-
方便的事件处理：jQuery提供了统一的事件处理机制，可以方便地绑定、触发和处理各种事件，使得开发人员能够更加灵活地响应用户的操作。
-
强大的Ajax支持：jQuery封装了对AJAX的操作，使得发送和接收异步请求更加简单，支持各种数据格式的传输，并提供了回调函数来处理请求的结果。
-
动画效果和特效：jQuery提供了丰富的动画和特效效果，可以对元素进行平滑的动画过渡、淡入淡出以及其他各种效果的控制。
二. jQuery 对象和 DOM 对象
什么是 jQuery 对象
1. jQuery
对象就是对
DOM
对象进行包装后产生的对象
比如： $("#test").html() 意思是指：获取 ID 为 test 的元素内的 html 代码。其中 html() 是 jQuery 里的方法这段代码等同于用 DOM 实现代码： document.getElementById("id").innerHTML;
2. jQuery
对象是
jQuery
独有的
.
如果一个对象是
jQuery
对象
,
那么它就可以使用
jQuery
里的方法
: $("#id").html();
3.
约定
：如果获取的是
jQuery
对象
,
那么要在变量前面加上
$ ,
比如
: var $variable =
jQuery
对象
var variable = DOM
对象
var $variable ： jQuery 对象var variable ： DOM 对象
DOM 对象转成 jQuery 对象
1.
对于一个
DOM
对象，只需要用
$()
把
DOM
对象包装起来，就可以获得一个
jQuery
对象
了。
$(DOM 对象)
2. DOM
对象转换成
JQuery
对象后，就可以使用
jQuery
的方法了
jQuery 对象转成 DOM 对象
1.
两种转换方式将一个
jQuery
对象转换成
DOM
对象：
[index]
和
.get(index);
2.
jQuery 对象是一个数组对象
，可以通过
[index]
的方法，来得到相应的
DOM
对象
3. jQuery
本身提供，通过
.get(index)
方法，得到相应的
DOM
对象
4.下标->位置
用于获取指定索引位置的元素。
三. jQuery 选择器
1 jQuery 选择器介绍
1.1.
选择器是
jQuery
的核心
,
在
jQuery
中
,
对事件处理
,
遍历
DOM
和
Ajax
操作都依赖
于选择器
1.2. jQuery
选择器的优点
简洁的写法$("#id") 等价于 document.getElementById("id");$("tagName") 等价于 document.getElementsByTagName("tagName");完善的事件处理机制
2 基本选择器
基本选择器是
jQuery
中最常用的选择器
,
也是最简单的选择器
,
它通过元素
id, class
和标签名
来查找
DOM
元素
1 、 #id 用法 : $("#myDiv"); 返回值 单个元素的组成的集合说明: 这个就是直接选择 html 中的 id=”myDiv”2 、 Element 用法 : $("div") 返回值 集合元素说明: element 的英文翻译过来是 ” 元素 ” , 所以 element 其实就是 html 已经定义的标签 元素 , 例如 div, input, a 等等 .3 、 class 用法 : $(".myClass") 返回值 集合元素说明: 这个标签是直接选择 html 代码中 class=”myClass” 的元素或元素组 ( 因为在同一 html 页面中 class 是可以存在多个同样值的 ).4 、 * 用法 : $("*") 返回值 集合元素说明: 匹配所有元素 , 多用于结合上下文来搜索5 、 selector1, selector2, selectorN 用法 : $("div,span,p.myClass") 返回值 集合元素说明: 将每一个选择器匹配到的元素合并后一起返回 . 你可以指定任意多个选择器 , 并 将匹配到的元素合并到一个结果内 . 其中p .myClass 是表示匹配元素 p class=”myClass”
3 层次选择器
●
如果想通过
DOM
元素之间的
层次关系
来获取特定元素
,
例如
后代元素, 子元素, 相邻 元素, 兄弟元素等
,
则需要使用层次选择器
.
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" 形成反义词 .
6 可见度过滤选择器
● 可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
1 、 :hidden 用法 : $("tr:hidden") 返回值 集合元素 (下面表单选择器也有提)说明: 匹配 所有的不可见元素 ， input 元素的 type 属性为 "hidden" 的话也会被匹 配到 . 意思是 css 中 display:none 和 input type="hidden"的都会被匹配到2 、 :visible 用法 : $("tr:visible") 返回值 集合元素说明: 匹配所有的可见元素.
7 属性过滤选择器
●
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
1 、 [attribute] 用法 : $("div[id]") ; 返回值 集合元素说明: 匹配包含给定属性的元素 .例子中是选取了所有带 "id" 属性的 div 标签 .2 、 [attribute=value] 用法 : $("input[name='newsletter']").attr("checked", true); 返回 值 集合元素说明: 匹配 给定的属性是某个特定值 的元素 .例子中选取了所有 name 属性是 newsletter 的 input 元素 .3 、 [attribute!=value] 用法 : $("input[name!='newsletter']").attr("checked", true); 返 回值 集合元素说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素 . 此选择器 等价于 :not([attr=value]), 要 匹 配 含 有 特 定 属 性 但 不 等 于 特 定 值 的 元 素 , 请 使 用 [attr]:not([attr=value]). 可见 之前看到的 :not 派上了用场 .4 、 [attribute^=value] 用法 : $("input[name^='news']") 返回值 集合元素说明: 匹配给定的属性是以某些值开始的元素5 、 [attribute$=value] 用法 : $("input[name$='letter']") 返回值 集合元素说明: 匹配给定的属性是以某些值结尾的元素 .6 、 [attribute*=value] 用法 : $("input[name*='man']") 返回值 集合元素说明: 匹配给定的属性是以 包含某些值 的元素 .7 、 [attributeFilter1][attributeFilter2][attributeFilterN] 用法 : $("input[id][name$='man']") 返 回值 集合元素说明: 复合属性选择器 , 需要 同时满足多个条件 时使用 . 是一个组合这个例子中选择 的是所有含有 id 属性 , 并且它的 name 属性是以 man 结尾的元素 .
8 子元素过滤选择器
●
子元素过滤选择器基本介绍
1 、 :nth-child(index/even/odd/equation) 用法 : $("ul li:nth-child(2)") 返回值 集合元 素说明: 匹配其父元素下的第 N 个子或奇偶元素 . 这个选择器和之前说的基础过滤 (Basic Filters) 中的 eq() 有些类似 , 不同的地方就是前 者是从 0 开始 , 后者是从 1 开始 .nth-child() 选择器详解如下：(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶 ( 奇 ) 数的元素(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素(4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1 的元素2 、 :first-child 用法 : $("ul li:first-child") 返回值 集合元素说明: 匹配第一个子元素 .':first' 只匹配一个元素 , 而此选择符将为每个父元素匹配 一个子元素 . 这里需要特别点的记忆下区别 .3 、 :last-child 用法 : $("ul li:last-child") 返回值 集合元素说明: 匹配最后一个子元素 .':last' 只匹配一个元素 , 而此选择符将为每个父元素匹配 一个子元素 .4 、 : only-child 用法 : $("ul li:only-child") 返回值 集合元素说明: 如果某个元素是父元素中唯一的子元素 , 那将会被匹配 . 如果父元素中含有其 他元素 , 那将不会被匹配 . 意思就是 : 只有一个子元素的 才会被匹配 !
9 表单属性过滤选择器
●
此选择器主要对所选择的表单元素进行过滤
1 、 :enabled 用法 : $("input:enabled") 返回值 集合元素说明: 匹配所有可用元素 . 意思是查找所有 input 中不带有 disabled="disabled" 的 input. 不为 disabled, 当然就为 enabled 啦 .2 、 :disabled 用法 : $("input:disabled") 返回值 集合元素说明: 匹配所有不可用元素 . 与上面的那个是相对应的 .3 、 :checked 用法 : $("input:checked") 返回值 集合元素说明: 匹配所有选中的被选中元素 ( 复选框、单选框等，不包括 select 中的 option).4 、 :selected 用法 : $("select option:selected") 返回值 集合元素说明: 匹配所有选中的 option 元素 .
10 表单选择器
●
表单选择器基本介绍
1 、 :input 用法 : $(":input") ; 返回值 集合元素说明: 匹配所有 input, textarea, select 和 button 元素2 、 :text 用法 : $(":text") ; 返回值 集合元素说明: 匹配所有的单行文本框 .3 、 :password 用法 : $(":password") ; 返回值 集合元素说明: 匹配所有密码框 .4 、 :radio 用法 : $(":radio") ; 返回值 集合元素说明: 匹配所有单选按钮.
5 、 :checkbox 用法 : $(":checkbox") ; 返回值 集合元素说明: 匹配所有复选框6 、 :submit 用法 : $(":submit") ; 返回值 集合元素说明: 匹配所有提交按钮 .7 、 :image 用法 : $(":image") 返回值 集合元素说明 : 匹配所有图像域 .8 、 :reset 用法 : $(":reset") ; 返回值 集合元素说明: 匹配所有重置按钮 .9 、 :button 用法 : $(":button") ; 返回值 集合元素说明: 匹配所有按钮.这个包括直接写的元素 button.10 、 :file 用法 : $(":file") ; 返回值 集合元素说明: 匹配所有文件域 .11 、 :hidden 用法 : $("input:hidden") ; 返回值 集合元素说明: 匹配所有不可见元素，或者 type 为 hidden 的元素 . 这个选择器就不仅限于表单 了 , 除了匹配 input 中的 hidden 外 , 那些 style 为 hidden 的也会被匹配 .注意 : 要选取 input 中为 hidden 值的方法就是上面例子的用法 ,但是直接使用":hidden" 的话就是匹配页面中所有的不可见元素 , 包括宽度或高度为 0 的
四. jQuery 的 DOM 操作
1. 查找节点, 修改属性
查找属性节点:
查找到所需要的元素之后
,
可以
调用 jQuery 对象的 attr() 方法来获取它的各种属性值
利用 jQuery 选择器查找到需要的元素之后，就可以使用 attr()方法来获取它的各种属性的值。attr() 方法的参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字，比如：
//获取<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");
}2. 创建节点(形容词和动词)
●
创建节点介绍
1. 创建节点 : 使用 jQuery 的工厂函数 $(): $(html 标签 ); 会根据传入的 html 标记字符串 创建一个 jQuery 对象 , 并返回 .2. 动态创建的新元素节点不会被自动 添加到文档 中 , 而是需要使用其他方法将其插入到 文档中 ;3. 当创建单个元素时 , 需注意闭合标签和使用标准的 XHTML 格式 . 例如创建一个 <p> 元 素 , 可以使用 $("<p/>") 或 $("<p></p>"), 但不能使用 $("<p>") 或 $("</P>")4. 创建文本节点就是在创建元素节点时直接把文本内容写出来 ; 创建属性节点也是在创建元素节点时一起创建
● 第 1 组方法(内部插入法)
1.append(content) : 向每个匹配的元素的内部的结尾处追加内容举例 A.append(B)[解读 (1) A, B 都是 jquery 对象 , (2) 表示把 B 对象插入到 A 对象内部的结尾处 (3) 结果 是 : B 对象成为 A 对象的子元素 / 节点 ]2.appendTo(content) : 将每个匹配的元素追加到指定的元素中的内部结尾处举例 A.appendTo(B)[解读 (1) A, B 都是 jquery 对象 (2) 表示把 A 对象 插入到 B 对象内部 结尾处 (3) 结果是 A 对象成为 B 对象的子元素 / 节点 ]3.prepend(content): 向每个匹配的元素的内部的开始处插入内容举例说明 A.prepend(B)[解读 (1) A, B 都是 jquery 对象 , (2) 表示把 B 对象插入到 A 对象内部的开始处 , (3) 结 果 B 成为 A 的子元素 / 节点 ]4.prependTo(content) : 将每个匹配的元素插入到指定的元素内部的举例说明 A.prependTo(B)[解读(1) A, B 都是 jquery 对象 (2) 表示把 A 对象插入到 B 对象内部的 开始处 (3) 结果 A 成为 B 的子元素 / 节点 ]5. 说明 : 内部插入法是在 元素内插入内容 ( 该内容变成该元素的子元素或节点 )
● 第 2 组方法(外部插入法)
1.after(content) : 在每个匹配的元素之后插入内容举例说明 A.after(B)[解读 (1) A, B 都是 jquery 对象 (2) 表示 B 对象插入到 A 对象后面 (3) 结果 :B 成为 A 的兄弟节点 ]2.before(content): 在每个匹配的元素之前插入内容举例 A.before(B)[解读 (1)A, B 都是 jquery 对象 (2) 表示 B 对象插入到 A 对象前面 (3) 结果是 B 成为 A 的兄弟节点，并且 在 A 的前面 ]3.insertAfter(content): 把所有匹配的元素插入到另一个、指定的元素元素集合的后面举 例说明 A.insertAfter(B)[解读(1) A, B 都是 jquery 对象 (2) 表示把 A 对象插入到 B 对 象的后面 (3) 结果： A 成为 B 的后一个兄弟节点 ]4.insertBefore(content) : 把所有匹配的元素插入到另一个、指定的元素元素集合的前面举例 A.insertBefore(B)[解读 (1) A, B都是 jquery 对象 (2) 表示把 A 对象插入到 B 对象的 前面 (3) 结果是 A 成为 B 的前一个兄弟 ]5. 说明 : 外部插入法是在元素的外面插入内容 ( 其内容变成元素的兄弟节点 )6. 注意 : 以上方法不但能将新的 DOM 元素插入到文档中 , 也能对原有的 DOM 元素进 行移动 ( 可以完成很多需求 .).
3. 删除节点
●
删除节点介绍
- remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.
- empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).
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() --- 从匹配的元素中删除全部或指定的 class4. 切换样式 : 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. 该方 法只对可见元素有效
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
