大家好，欢迎来到IT知识分享网。
✨前言✨
1.如果代码对您有帮助 欢迎点赞👍+收藏⭐哟 后面如有问题可以私信评论哟🗒️ 2.博主后面将持续更新哟😘 🎉本章目录🎉
🥝一.jQuery简介
1.jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
<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> <!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> <!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
| 选择器(属性) | 描述 |
|---|---|
| $(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 () {
// JavaScript var p = document.getElementsByTagName("p");//选中所有的p标签 for (var i = 0; i < p.length; i++) {
p[i].style.background = "lawngreen"; } // jQuery var 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 () {
// JavaScript var p1 = document.getElementsByClassName("p1")[0]; p1.style.background = "aqua" // jQuery var 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 () {
// JavaScript var 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> //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 | 选择偶数位置的元素。 |
// 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> $("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修改内容
<!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> <!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> 🍓6.jquery操作元素
在使用jQuery操作元素之前，需要先在HTML文件中引入jQuery库，可以通过以下方式引入：
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> $("#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事件
| 属性 | 描述及说明 |
|---|---|
| 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() | 渐变显示选中元素。 |
$("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库。
2.跨浏览器兼容性：jQuery对不同的浏览器进行了兼容性处理，确保在不同浏览器上的一致性和稳定性。
3.强大的选择器：jQuery提供了强大的选择器功能，可以通过使用CSS选择器来选择和操作HTML元素。
4.5.ajax支持：jQuery提供了简单易用的ajax功能，可以实现异步加载数据、动态更新网页内容等功能。
6.大量的插件：jQuery拥有一个庞大的插件生态系统，可以轻松地集成各种功能丰富的插件来扩展自己的开发能力。
综上所述，JavaScript和jQuery是Web开发中必不可少的工具，它们使得开发者可以更加高效地编写交互性强的网页。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/129388.html
