✨前言✨
1.如果代码对您有帮助 欢迎点赞👍+收藏⭐哟 后面如有问题可以私信评论哟🗒️
2.博主后面将持续更新哟😘
🎉本章目录🎉
- 🥝一.jQuery简介
- 🥥二.JQeury常用API
- 🍇1.jQeury选择器和筛选方法
- 🍈2.jquery操作样式
- 🍉3.jqeury修改效果
- 🍊4.jquery操作属性
- 🍍5.jquery修改内容
- 🍓6.jquery操作元素
- 🥑三.jQuery事件
- 🍒1.jQuery其他方法
- 🫐四.总结
🥝一.jQuery简介
1.jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
2.jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
1.将jquery文件引入到项目中:
<script src="../JQ/jquery-1.12.4.js"></script>
2.jquery的基本使用方法:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../JQ/jquery-1.12.4.js"></script><script>// 函数入口// 方式1():$(document).ready(function () {alert("你好jquery1")//弹窗(alert)})// 方式2(简化版):$(function () {alert("你好jquery2")//弹窗(alert)})</script></head>
<body>
</body>
</html>
运行结果:
3.jquery对象和DOM对象:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../JQ/jquery-1.12.4.js"></script><div id="myDiv">Hello, World!</div><script>// 将jQuery对象转换为DOM对象var $myDiv = $('#myDiv'); // jQuery对象var domDiv = $myDiv.get(0); // DOM对象console.log(domDiv); // 输出：<div id="myDiv">Hello, World!</div>// 将DOM对象转换为jQuery对象var $newDiv = $(domDiv); // jQuery对象console.log($newDiv); // 输出：[<div id="myDiv">Hello, World!</div>]</script>
</head>
<body>
</body>
</html>运行结果:
4.jquery对象和DOM对象互相转换:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../JQ/jquery-1.12.4.js"></script><script>$(function (){//使用js获取元素var js=document.getElementById("div1");//将DOM对象转换为jquery对象：var $js = $(js);$js.html("<ol>\n" +" <li>将DOM对象转换为jquery对象</li>\n" +" <li>将DOM对象转换为jquery对象</li>\n" +" <li>将DOM对象转换为jquery对象</li>\n" +" <li>将DOM对象转换为jquery对象</li>\n" +" </ol>");// 使用jq获取元素var $jq=$("#div2");$jq.html("<ol>\n" +" <li>将jquery对象转换为DOM对象</li>\n" +" <li>将jquery对象转换为DOM对象</li>\n" +" <li>将jquery对象转换为DOM对象</li>\n" +" <li>将jquery对象转换为DOM对象</li>\n" +" </ol>")// 将jquery对象转换为DOM对象 jq[0]或者jq.get(0)var jq = $jq[0];jq.innerHTML("<ol>\n" +" <li>将jquery对象转换为DOM对象</li>\n" +" <li>将jquery对象转换为DOM对象</li>\n" +" <li>将jquery对象转换为DOM对象</li>\n" +" <li>将jquery对象转换为DOM对象</li>\n" +" </ol>");})</script>
</head>
<body>
<div id="div1" style="height: 100px;width: 280px;background-color: aqua"></div>
<div id="div2" style="height: 100px;width: 280px;background-color: red"></div>
</body>
</html>
运行结果:
🥥二.JQeury常用API
以下是jQuery常用的一些API：
1.选择器:
| 选择器(属性) | 描述 |
|---|---|
| $(selector) | 通过选择器选择元素。 |
| $(element) | 通将原生的DOM元素封装成jQuery对象。 |
2.事件处理:
| 事件处理(属性) | 描述 |
|---|---|
| .click(handler) | 给元素添加点击事件。 |
| .keydown(handler) | 给元素添加键盘按下事件。 |
| .mouseenter(handler) | 给元素添加鼠标进入事件。 |
| .mouseleave(handler) | 给元素添加鼠标离开事件。 |
3.DOM操作：
| DOM操作(属性) | 描述 |
|---|---|
| .html() | 获取或设置元素的内容。 |
| .text() | 获取或设置元素的文本内容。 |
| .val() | 获取或设置表单元素的值。 |
| .append(content) | 在元素内部末尾添加内容。 |
| .prepend(content) | 在元素内部开头添加内容。 |
| .remove() | 从文档中移除元素。 |
4.样式操作：
| 样式操作(属性) | 描述 |
|---|---|
| .addClass(className) | 给元素添加指定的类名。 |
| .removeClass(className) | 移除元素的指定类名。 |
| .toggleClass(className) | 切换元素的指定类名。 |
5.AJAX:
| AJAX(属性) | 描述 |
|---|---|
| $.ajax(options) | 发送AJAX请求 |
| $.get(url，data， success， dataType) | 发送一个GET请求 |
| $.post(url，data， success， dataType) | 发送一个POST请求 |
6.动画效果API:
| 动画效果API(属性) | 描述 |
|---|---|
| .hide() | 隐藏元素 |
| .show() | 显示元素 |
| .fadeIn() | 淡入元素 |
| .fadeout() | 淡出元素 |
| .slideDown() | 下拉显示元素 |
| .slideup() | 收起元素 |
这只是iQuery提供的一小部分API，还有很多其他的API以用于处理和操作HTML文档。可以通过查阅iQuery官方文档来获取更详细的API列表和使用方法
🍇1.jQeury选择器和筛选方法
原生 JS 获取元素方式很多很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。我们可以通过jquery选择器或者使用jquery方法更方便的获取到元素。
1.1 jQeury基础选择器:
| 名称 | 语法 | 描述 |
|---|---|---|
| 标签选择器 | document.getElementsByTagName | 通过元素的标签名选择元素。例如，使用document.getElementsByTagName函数可以选择所有的 p 元素。 |
| 类选择器 | document.getElementsByClassName | 通过元素的类名选择元素。在JavaScript中，可以使用document.getElementsByClassName函数选择指定类名的元素；在jQuery中，可以使用.class或.class-name选择器选择指定类名的元素。 |
| ID选择器 | document.getElementById | 通过元素的ID选择元素。在JavaScript中，可以使用document.getElementById函数选择指定ID的元素；在jQuery中，可以使用#id选择器选择指定ID的元素。 |
| 属性选择器 | document.querySelector(‘[attribute=“value”]’) | 过元素的属性选择元素。在JavaScript中，可以使用document.querySelector(‘[attribute=“value”]’)函数选择具有指定属性值的元素；在jQuery中，可以使用[attribute=“value”]选择器选择具有指定属性值的元素。 |
1.标签选择器代码演示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../JQ/jquery-1.12.4.js"></script><script>window.onload=function () {// JavaScriptvar p = document.getElementsByTagName("p");//选中所有的p标签for (var i = 0; i < p.length; i++) {p[i].style.background = "lawngreen";}// jQueryvar div = $("div");//选中所有的div标签for (var i = 0; i < div.length; i++) {div[i].style.background = "red";}}</script>
</head>
<body>
<p style="width: 100px;height: 15px"></p>
<p style="width: 100px;height: 15px"></p><div style="width: 100px;height: 15px"></div>
<br>
<div style="width: 100px;height: 15px"></div>
</body>
</html>
运行结果:
2.类选择器代码演示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../JQ/jquery-1.12.4.js"></script><script>window.onload=function () {// JavaScriptvar p1 = document.getElementsByClassName("p1")[0];p1.style.background = "aqua"// jQueryvar p2 = $(".p2")[0];p2.style.background = "lawngreen"}</script>
</head>
<body>
<p class="p1" style="width: 200px;height: 15px;"></p>
<p class="p2" style="width: 200px;height: 15px;"></p>
</body>
</html>
输出结果:
3. ID选择器代码演示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../JQ/jquery-1.12.4.js"></script><script>window.onload=function () {// JavaScriptvar p1 = document.getElementById("p1");p1.style.background = "red"// jQuery$("#p2").css("background", "orange");}</script>
</head>
<body>
<p id="p1" style="width: 200px;height: 15px;"></p>
<p id="p2" style="width: 200px;height: 15px;"></p>
</body>
</html>
运行结果:
4.属性选择器代码演示:
//1.选择具有指定属性的元素：
$(`[name]`).操作();
//例如，选择具有name属性的所有元素：
$('[name]').addClass('highlight');//2.选择具有指定属性和属性值的元素：
$(`[name="value"]`).操作();
//例如，选择具有name属性且属性值为"value"的元素：
$('[name="value"]').addClass('highlight');//3.选择具有以指定字符串开头的属性值的元素：
$(`[attribute^="value"]`).操作();
//例如，选择具有以"img"开头的src属性值的所有元素：
$('[src^="img"]').addClass('highlight');//4.选择具有以指定字符串结尾的属性值的元素：
$(`[attribute$="value"]`).操作();
//例如，选择具有以".jpg"结尾的src属性值的所有元素：
$('[src$=".jpg"]').addClass('highlight');此外，jQuery还提供了一些筛选方法，可以根据元素的位置、内容和其他条件进行进一步的筛选。
| 属性 | 说明 |
|---|---|
| :eq(index) | 选择具有指定索引的元素。索引从0开始计数。 |
| :first | 选择第一个元素。 |
| :last | 选择最后一个元素。 |
| :odd | 选择奇数位置的元素。 |
| :even | 选择偶数位置的元素。 |
以下属性代码演示:
1.:eq(index):
// jQuery
$("li:eq(2)") // 选择第三个li元素
2.:first:
// jQuery
$("li:first") // 选择第一个li元素3.:last:
// jQuery
$("li:last") // 选择最后一个li元素
4.:odd:
$("[href^='http']") // 选择所有 href 属性值以 "http" 开头的元素// jQuery
$("li:odd") // 选择奇数位置的li元素
5.:even:
// jQuery
$("li:even") // 选择偶数位置的li元素🍈2.jquery操作样式
| 属性 | 使用 |
|---|---|
| css() | 可以通过css()方法修改元素的样式 |
| addClass() | 可以通过addClass()方法为元素添加一个或多个CSS类 |
| removeClass() | 可以通过removeClass()方法移除元素的一个或多个CSS类 |
| toggleClass() | 可以通过toggleClass()方法切换元素的CSS类，如果元素已经具有该CSS类，则移除；如果元素没有该CSS类，则添加 |
| .width()和.height() | 可以设置或获取一个元素的宽度和高度 |
代码演示如下:
1.css()代码演示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../JQ/jquery-1.12.4.js"></script><script>window.onload=function () {// 修改元素的背景颜色$("#p1").css('background-color', 'red');// 修改元素的宽度和高度$("#p2").css({'width': '200px','height': '100px'});}</script>
</head>
<body>
<p id="p1" style="width: 200px;height: 15px;"></p>
<p id="p2" style="width: 200px;height: 15px;background-color: aqua"></p>
</body>
</html>
运行结果:
2.addClass()代码演示:
$("selector").addClass("active");
3.removeClass()代码演示:
$("selector").removeClass("active");4.toggleClass()代码演示:
$("selector").toggleClass("active");5…width()和.height()代码演示:
$("selector").width(200);
$("selector").width(200);
注意：使用上述方法修改元素的样式，需要将选择器$(‘element’)替换为实际的元素选择器。
🍉3.jqeury修改效果
jQuery是一个功能强大的JavaScript库，可以简化JavaScript编程，并提供了一些方便的方法来修改和操作HTML元素。
| 属性 | 语法及使用 |
|---|---|
| 隐藏元素 | $(“#elementId”).hide(); |
| 显示元素 | $(“#elementId”).show(); |
| 添加CSS类 | $(“#elementId”).addClass(“className”); |
| 移除CSS类 | $(“#elementId”).removeClass(“className”); |
| 切换CSS类 | $(“#elementId”).toggleClass(“className”); |
| 修改文本内容 | $(“#elementId”).text(“newText”); |
| 修改HTML内容 | $(“#elementId”).html(“ newHTML ”); |
| 修改元素属性 | $(“#elementId”).attr(“attributeName”, “newValue”); |
| 修改元素样式 | $(“#elementId”).css(“propertyName”, “newValue”); |
| 添加事件处理程序 | $(“#elementId”).css(“propertyName”, “newValue”); |
以上是一些常见的jQuery修改效果的示例，你可以根据具体需求来选择适合的方法。在使用jQuery之前，记得先引入jQuery库文件。
🍊4.jquery操作属性
在JavaScript中，可以使用jQuery来操作元素的属性。以下是一些常见的jQuery属性操作方法：
| 属性 | 描述即使用方法 |
|---|---|
| .attr() | 获取或设置元素的属性值。 |
| 获取属性值 | $(selector).attr(“attribute-name”) |
| 设置属性值 | $(selector).attr(“attribute-name”, “new-value”) |
| .prop() | 获取或设置元素的属性值。 |
| 获取属性值 | $(selector).prop(“property-name”) |
| 设置属性值 | $(selector).prop(“property-name”, “new-value”) |
| .removeAttr() | 移除元素的属性。 |
| 移除元素 | $(selector).hasClass(“class-name”) |
| .addClass() | 为元素添加一个class。 |
| 元素添加 | $(selector).addClass(“class-name”) |
| .removeClass() | 从元素中移除一个class。 |
| 元素中移除 | $(selector).removeClass(“class-name”) |
| .toggleClass() | 切换元素的class，如果已经存在则移除，否则添加。 |
| 切换元素 | $(selector).toggleClass(“class-name”) |
这些方法可以用来操作元素的属性和class，从而改变元素的外观和行为。
🍍5.jquery修改内容
要使用JavaScript和jQuery来修改内容，你可以使用以下方法:
1.使用JavaScript的innerHTML属性来修改元素的内容:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../JQ/jquery-1.12.4.js"></script><script>window.onload=function () {document.getElementById("div1").innerHTML = "使用JavaScript的innerHTML属性来修改元素的内容";//innerHTML里面放你要修改的内容}</script>
</head>
<body>
<div id="div1" style="width: 200px;height: 80px;background-color: aqua"></div>
</body>
</html>
运行结果:
2.使用jQuery的text()方法来修改元素的文本内容:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../JQ/jquery-1.12.4.js"></script><script>window.onload=function () {$("#div1").text("使用jQuery的text()方法来修改元素的文本内容");//text里面放你要修改的内容}</script>
</head>
<body>
<div id="div1" style="width: 200px;height: 80px;background-color: lawngreen"></div>
</body>
</html>
运行结果:
3.使用jQuery的html()方法来修改元素的HTML内容:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../JQ/jquery-1.12.4.js"></script><script>window.onload=function () {$("#div1").html("使用jQuery的html()方法来修改元素的HTML内容");//html里面放你要修改的内容}</script>
</head>
<body>
<div id="div1" style="width: 200px;height: 80px;background-color: orange"></div>
</body>
</html>
运行结果:
注意，上述代码中的"div1"应该替换为你需要修改内容的元素的ID。
🍓6.jquery操作元素
在使用jQuery操作元素之前，需要先在HTML文件中引入jQuery库，可以通过以下方式引入：
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
然后就可以使用jQuery提供的方法来操作元素了。
1.选择元素：使用jQuery选择器来选择元素。例如，通过id选择元素：
$("#div"); 2.操作元素属性：可以使用jQuery提供的attr()方法来获取或设置元素的属性值:
// 获取元素属性值
var value = $("#div").attr("attributeName");// 设置元素属性值
$("#div").attr("attributeName", "newValue");
3.操作元素内容：可以使用jQuery提供的text()方法来获取或设置元素的文本内容:
// 获取元素文本内容
var text = $("#div").text();// 设置元素文本内容
$("#div").text("newText");4.操作元素样式：可以使用jQuery提供的css()方法来获取或设置元素的样式:
// 获取元素样式
var style = $("#div").css("propertyName");// 设置元素样式
$("#div").css("propertyName", "newValue");5.添加/删除元素类名：可以使用jQuery提供的addClass()和removeClass()方法来添加或删除元素的类名:
// 添加元素类名
$("#div").addClass("className");// 删除元素类名
$("#div").removeClass("className");6.绑定事件：可以使用jQuery提供的on()方法来绑定元素的事件:
// 绑定点击事件
$("#div").on("click", function() {// 事件处理逻辑
});注意，上述代码中的"div"应该替换为你需要的元素的ID。
除了上述方法之外，jQuery还提供了很多其他操作元素的方法，如操作元素尺寸、操作元素位置等。详细的方法可以参考jQuery官方文档。
🥑三.jQuery事件
avaScript和jQuery都有各种各样的事件可以用来触发和处理交互操作。以下是一些常见的jQuery以及JavaScript事件：
jQuery事件:
| 属性 | 描述及说明 |
|---|---|
| click | 鼠标点击事件 |
| dblclick | 鼠标双击事件 |
| hover | 鼠标悬停事件 |
| mouseover | 鼠标移入事件 |
| mouseout | 鼠标移出事件 |
| mousedown | 鼠标按下事件 |
| mouseup | 鼠标释放事件 |
| keydown | 键盘按下事件 |
| keyup | 键盘释放事件 |
| submit | 表单提交事件 |
| change | 表单元素值变化事件 |
| focus | 元素获得焦点事件 |
| blur | 元素失去焦点事件 |
| load | 页面加载完成事件 |
| ready | DOM准备就绪事件 |
| resize | 窗口大小变化事件 |
| scroll | 滚动事件 |
JavaScript事件:
| 属性 | 描述说明 |
|---|---|
| click | 鼠标点击事件 |
| mouseover | 鼠标移入事件 |
| mouseout | 鼠标移出事件 |
| keydown | 按键按下事件 |
| keyup | 按键松开事件 |
| load | 加载完成事件 |
| scroll | 滚动事件 |
| resize | 窗口大小变化事件 |
| submit | 表单提交事件 |
| change | 表单元素值改变事件 |
| focus | 元素获取焦点事件 |
| blur | 元素失去焦点事件 |
🍒1.jQuery其他方法
以下是一些其他常用的 jQuery 方法：
| 属性 | 说明使用 |
|---|---|
| addClass(className) | 向选中的元素添加指定的类名。 |
| removeClass(className) | 从选中的元素中移除指定的类名。 |
| toggleClass(className) | 切换选中元素的类名。如果元素已经有指定类名，将被移除；如果元素没有指定的类名，将被添加。 |
| attr(attributeName) | 获取选中元素的指定属性的值。 |
| css(propertyName) | 获取选中元素的指定 CSS 属性的值。 |
| val() | 获取选中元素的值。通常用于表单元素，如 或 。 |
| html() | 获取或设置选中元素的 HTML 内容。 |
| text() | 获取或设置选中元素的纯文本内容。 |
| on(eventName, handler) | 为选中元素绑定指定的事件处理函数。 |
| fadeIn() | 渐变显示选中元素。 |
以下是上面属性的代码演示:
1.addClass(className)代码演示:
$("p").addClass("highlight");
2. removeClass(className)代码演示:
$("p").removeClass("highlight");
3.toggleClass(className)代码演示:
$("p").toggleClass("highlight");
4.attr(attributeName)代码演示:
var value = $("img").attr("src");
5.css(propertyName)代码演示:
var color = $("p").css("color");
6.val()代码演示:
var value = $("input").val();
7.html()代码演示:
var content = $("div").html();
$("div").html("<p>New content</p>");
8.text()代码演示:
var content = $("div").text();
$("div").text("New content");
9.on(eventName, handler)代码演示:
$("button").on("click", function() {console.log("Button clicked");
});
10.fadeIn()代码演示:
$("div").fadeIn();
这只是一小部分 jQuery 的方法，jQuery 还提供了很多其他强大的功能，详细的文档可以在 jQuery 官方网站上找到。
🫐四.总结
JavaScript是一种脚本语言，用于为网页添加交互功能。它可以在网页上动态地修改和更新内容，从而提供更好的用户体验。而jQuery是一种基于JavaScript的快速、简洁的JavaScript库。
jQuery的主要特点和优势包括：
1.简洁的语法：使用jQuery可以通过简洁的语法来完成常见的DOM操作、事件处理、动画效果等，大大简化了JavaScript代码的编写。
2.跨浏览器兼容性：jQuery对不同的浏览器进行了兼容性处理，确保在不同浏览器上的一致性和稳定性。
3.强大的选择器：jQuery提供了强大的选择器功能，可以通过使用CSS选择器来选择和操作HTML元素。
4.5.ajax支持：jQuery提供了简单易用的ajax功能，可以实现异步加载数据、动态更新网页内容等功能。
6.大量的插件：jQuery拥有一个庞大的插件生态系统，可以轻松地集成各种功能丰富的插件来扩展自己的开发能力。
综上所述，JavaScript和jQuery是Web开发中必不可少的工具，它们使得开发者可以更加高效地编写交互性强的网页。
