文章目录
🙋♂️ 作者：@whisperrr.🙋♂️
👀 其他专栏：JavaWeb👀
💥 标题：【JavaWeb11】jQuery的辉煌与变迁，是否预示着其时代的落幕？💥
❣️ 寄语：比较是偷走幸福的小偷❣️
截至2023年，jQuery的现状是多方面的。虽然随着现代JavaScript框架如React、Vue和Angular的崛起，jQuery的使用有所减少，但它仍然在全球范围内被广泛使用，特别是在一些老旧的项目中。jQuery 4.0.0的beta版已经发布，显示了它仍然在持续更新和发展。
- jQuery的优点：
- 简单易学：jQuery的语法简洁易懂，适合初学者快速上手。
- 跨浏览器兼容性：jQuery能够处理不同浏览器之间的许多兼容性问题。
- 强大的插件库：存在大量已构建的jQuery插件，可以快速集成各种功能。
- jQuery的缺点：
- 性能问题：在大型应用中，使用jQuery可能导致性能瓶颈。
- 现代框架的崛起：许多现代框架提供了更好的构建模式和状态管理。
- 维护成本：新项目通常使用现代框架进行构建，学习jQuery可能不具备长期价值。
- 实际应用情况：
- 许多老旧项目仍在使用jQuery，新的开发者可能需要维护这些项目。
- 对于一些特定场景，如快速原型开发或小型项目，jQuery仍然是一个有效的工具。
笔者认为还是有了解的必要性，虽然jQuery可能不再是前端开发的主流选择，但它在某些情况下仍然有其独特的优势。因此，是否学习jQuery取决于你的具体需求。如果你打算维护或开发老旧项目，或者需要在不需要深入学习现代框架的情况下快速实现功能，那么学习jQuery是有意义的。然而，如果你主要关注现代前端开发，那么学习React、Vue或Angular等现代框架可能更为重要。
🌍一. JQuery 是什么?
❄️1. 基本介绍
- jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom…
- 提供方法、events、选择器，并且方便地为网站提供 AJAX 交互
- 其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情.
- jQuery 实现了浏览器的兼容问题
❄️2. JQuery 基本开发步骤
1.环境准备
确保你的开发环境中已经安装了以下工具：
- 一个文本编辑器或IDE（例如：Visual Studio Code, Sublime Text, Atom等）
- 最新版本的 jQuery（可以从 jQuery官网 下载）
1.下载 Download the compressed, production jQuery 3.6.0 就是压缩过的
2.Download the uncompressed, development jQuery 3.6.0 是没有压缩过的
3.我们下载 production jQuery 3.6.0 , 把内容保存到 jquery-3.6.0.min.js 文件即可使用标签 script 引入 jQuery 库文件即可使用
2.引入 jQuery
在 HTML 文档的 <head> 部分或紧接在 </body> 标签之前，引入 jQuery 库。
<!-- 在线CDN方式引入 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 本地文件方式引入 -->
<script src="path/to/your/jquery.min.js"></script>
3.确保文档就绪
在编写 jQuery 代码之前，通常需要确保 DOM 完全加载。这可以通过 $(document).ready() 函数实现。
$(document).ready(function(){
// 你的代码在这里
});
4.编写 jQuery 代码
在 $(document).ready() 函数内部，你可以开始编写 jQuery 代码。以下是一些基本的操作：
选择元素
$("#id"); // 选择ID为'id'的元素
$(".class"); // 选择类为'class'的所有元素
$("p"); // 选择所有<p>元素
修改内容和属性
$("#myId").text("新文本"); // 修改文本内容
$("#myId").attr("href", "http://www.example.com"); // 修改属性
事件处理
$("#myButton").click(function(){
alert("按钮被点击了");
});
动画和效果
$("#myDiv").fadeOut(); // 淡出
$("#myDiv").fadeIn(); // 淡入
AJAX 请求
$.ajax({
url: "test.html",
success: function(result){
$("#div1").html(result);
}
});
❄️3. jQuery 对象和 DOM 对象
3.1什么是 jQuery 对象
- jQuery 对象就是对 DOM 对象进行包装后产生的对象
比如：
$("#test").html()意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码document.getElementById("id").innerHTML;
- jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用jQuery 里的方法:
$("#id").html(); - 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上
$ ,
比如:
var $variable =jQuery 对象
var variable = DOM 对象
var $variable ： jQuery 对象
var variable ： DOM 对象
3.2 DOM 对象转成 jQuery 对象
- 对于一个 DOM 对象，只需要用
$()把 DOM 对象包装起来，就可以获得一个 jQuery 对象了。$(DOM 对象) - DOM 对象转换成 JQuery 对象后，就可以使用 jQuery 的方法了
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM 对象转成 jQuery 对象</title>
<script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
window.onload = function (){
//演示通过 dom 对象来获取输入框的 value
//username 就是 dom 对象
var username = document.getElementById("username");
alert("username value= " + username.value);
//通过 jquery 对象来获取输入框的 value
//把 username dom 对象转成 jquery 对象
var $username = $(username);
//使用 jquery 的方法来获取 value
alert("$username value= " + $username.val())
}
</script>
</head>
<body>
用户名 <input type="text" id="username" name="username" value="教育"/>
</body>
</html>
3.3 jQuery 对象转成 DOM 对象
- 两种转换方式将一个 jQuery 对象转换成 DOM 对象：[index]和.get(index);
- jQuery 对象是一个数组对象，可以通过[index]的方法，来得到相应的 DOM 对象
- jQuery 本身提供，通过.get(index)方法，得到相应的 DOM 对象
- 这里就不代码演示了，感兴趣的小伙伴可以自己尝试一下
🌍二. jQuery 选择器
选择器是 jQuery 的核心, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器
jQuery 选择器的优点:
简洁的写法
$(“#id”) 等价于 document.getElementById(“id”);
$(“tagName”) 等价于 document.getElementsByTagName(“tagName”); 完善的事件处理机制
❄️1. 基本选择器
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class
和标签名来查找 DOM 元素
- #id选择器
用法:$("#myDiv"); 返回值 单个元素的组成的集合.
说明: 这个就是直接选择 html 中的id=”myDiv” - Element选择器
用法:$("div")返回值 集合元素.
说明: element 的英文翻译过来是”元素”,所以 element 其实就是 html 已经定义的标签元素,例如div, input, a等等. - class 选择器
用法:$(".myClass")返回值 集合元素.
说明: 这个标签是直接选择 html 代码中class="myClass”的元素或元素组(因为在同一html 页面中 class 是可以存在多个同样值的). *选择器
用法:$("*")返回值 集合元素.
说明: 匹配所有元素,多用于结合上下文来搜索- selector1, selector2, selectorN
用法:$("div,span,p.myClass")返回值 集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中 p.myClass 是表示匹配元素 p class=”myClass
❄️2. 层次选择器
如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
-
ancestor descendant 选择器
用法:$(”form input”); 返回值 集合元素.
说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分
开. -
parent > child 选择器
用法:$(”form > input”); 返回值 集合元素
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素. -
prev + next 选择器
用法:$(”label + input”); 返回值 集合元素.
说明: 匹配所有紧接在 prev 元素后的 next 元素. -
prev ~ siblings 选择器
用法:$(”form ~ input”); 返回值 集合元素.
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且 siblings 匹配的是和 prev 同辈的元素,其后辈元素不被匹配.
注意:(“prev ~ div”)选择器只能选择“# prev ”元素后面的同辈元素; 而 jQuery中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取
❄️3. 基础过滤选择器
-
:first
用法:$("tr:first"); 返回值 单个元素的组成的集合.
说明: 匹配找到的第一个元素. -
:last
用法:$("tr:last") 返回值 集合元素.
说明: 匹配找到的最后一个元素.与 :first 相对应. -
:not(selector)
用法:$("input:not(:checked)")返回值 集合元素.
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当 input 的type="checkbox"). -
:even
用法:$("tr:even")返回值 集合元素.
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js 的数组都是从 0 开始计数的. 例如要选择 table 中的行,因为是从 0 开始计数,所以 table 中的第一个 tr 就为偶数 0. -
: odd
用法:$("tr:odd")返回值 集合元素.
说明: 匹配所有索引值为奇数的元素,和:even 对应,从 0 开始计数. -
:eq(index)
用法:$("tr:eq(0)")返回值 集合元素.
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个 tr 元素.括号里面的是索引值,不是元素排列数. -
:gt(index)
用法:$("tr:gt(0)")返回值 集合元素.
说明: 匹配所有大于给定索引值的元素. -
:lt(index)
用法:$("tr:lt(2)")返回值 集合元素.
说明: 匹配所有小于给定索引值的元素. -
:header(固定写法)
用法:$(":header").css("background", "#EEE")返回值 集合元素.
说明: 匹配如 h1, h2, h3 之类的标题元素.这个是专门用来获取 h1,h2 这样的标题元素. -
:animated
(固定写法) 返回值 集合元素.
说明: 匹配所有正在执行动画效果的元素.
❄️4. 内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
- :contains(text)
用法:$("div:contains('John')")返回值 集合元素.
说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是 dom 标签元素时,它就派上了用场了,它的作用是查找被标签"围"起来的文本内容是否符合指定的内容的. - :empty
用法:$("td:empty")返回值 集合元素.
说明: 匹配所有不包含子元素或者文本的空元素 - :has(selector)
用法:$("div:has(p)").addClass("test")返回值 集合元素.
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含 p 元素的 div 标签加上 class=“test”. - :parent
用法:$("td:parent")返回值 集合元素.
说明: 匹配含有子元素或者文本的元素.注意:这里是":parent",可不是".parent", 与上面讲的":empty"形成反义词.
❄️5. 属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
-
[attribute]
用法:$("div[id]"); 返回值 集合元素.
说明: 匹配包含给定属性的元素. 例子中是选取了所有带"id"属性的 div 标签. -
[attribute=value]
用法:$("input[name='newsletter']").attr("checked", true); 返回值 集合元素.
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是newsletter 的 input 元素. -
[attribute!=value]
用法:$("input[name!='newsletter']").attr("checked", true); 返回值 集合元素.
说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要 匹 配 含 有 特 定 属 性 但 不 等 于 特 定 值 的 元 素 , 请 使 用[attr]:not([attr=value]).之前看到的:not派上了用场. -
[attribute^=value]
用法:$("input[name^='news']")返回值 集合元素.
说明: 匹配给定的属性是以某些值开始的元素. -
[attribute$=value]
用法:$("input[name$='letter']")返回值 集合元素.
说明: 匹配给定的属性是以某些值结尾的元素. -
[attribute*=value]
用法:$("input[name*='man']")返回值 集合元素.
说明: 匹配给定的属性是以包含某些值的元素. \ -
[attributeFilter1][attributeFilter2][attributeFilterN]
用法:$("input[id][name$='man']")返回值 集合元素.
说明: 复合属性选择器,需要同时满足多个条件时使用.是一个组合,这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素
❄️6. 表单属性过滤选择器
此选择器主要对所选择的表单元素进行过滤
- :enabled
用法:$("input:enabled")返回值 集合元素
说明: 匹配所有可用元素.意思是查找所有 input 中不带有 disabled="disabled"的 input. 不为disabled,当然就为 enabled 啦. - :disabled
用法:$("input:disabled")返回值 集合元素
说明: 匹配所有不可用元素.与上面的那个是相对应的. - :checked
用法:$("input:checked")返回值 集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括 select 中的 option). - :selected
用法:$("select option:selected")返回值 集合元素
说明: 匹配所有选中的 option 元素
🌍三. jQuery 的 DOM 操作
❄️1.创建节点
1.创建节点: 使用 jQuery 的工厂函数 $(): $(html标签); 会根据传入的 html 标记字符串创建一个 jQuery 对象, 并返回.
2.动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
3.当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 $("<p/>") 或 $("<p></p>"), 但不能使用$("<p>") 或 $("</P>")
4.创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建
❄️2. 插入节点
● 第 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的子元素/节点]
内部插入法是在 元素内插入内容(该内容变成该元素的子元素或节点)
● 第 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的前一个兄弟]
外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)
注意: 以上方法不但能将新的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动(可以完成很多需求.)
❄️3. 删除节点
remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除节点-应用实例</title>
<script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//*****删除所有 p
$("#b1").click(function () {
$("p").remove();
})
//***所有 p 清空
$("#b2").click(function () {
$("p").empty();
})
//****删除上海这个 li
$("#b3").click(function (){
$("#sh").remove();
})
});
</script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="tj" name="tianjin">天津</li>
</ul>
<p>Hello</p> how are <p>you?</p>
<p name="test">Hello, <span>Person</span> <a href="#">and person</a></p>
<input type="button" value="删除所有 p" id="b1"/>
<input type="button" value="所有 p 清空" id="b2"/>
<input type="button" value="删除上海这个 li" id="b3"/>
</body>
</html>
❄️4. 复制节点
1. clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
2. clone(true): 复制元素的同时也复制元素中的的事件
//克隆节点，不克隆事件
$(“button”).clone().appendTo(“p”);
//克隆节点，克隆事件
$(“button”).clone(true).appendTo(“p”);
❄️5. 替换节点
replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM/juqery 元素A.replaceWith(B)replaceAll(): 颠倒了的 replaceWith() 方法.A.replaceAll(B)- 注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
<p>段落</p>
//方式一
$(“p”).replaceWith(“登陆”);
//方式二
$(“登陆”).replaceAll(“p”);
在您踏上 jQuery 学习之旅的征程中，希望这些知识和技巧能够为您打开一扇通往高效前端开发的大门。虽然现代前端框架和技术不断推陈出新，但 jQuery 依然以其简洁的语法和强大的功能在众多项目中发挥着重要作用。通过掌握 jQuery，您不仅能够更加轻松地操作 DOM、处理事件和实现动画效果，还能够更好地理解 JavaScript 的核心概念。
学习之路永无止境，继续探索、实践和挑战自己，将所学应用于实际项目中，是提高技能的最佳途径。愿您在 jQuery 的世界里游刃有余，不断进步，成为前端开发的佼佼者。最后，不要忘记，无论技术如何变迁，保持好奇心和学习热情，始终是成为一名优秀开发者的关键。祝您学习愉快，前程似锦！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
