Javascript jQuery简介

✨前言✨

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 () {
            // 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>

运行结果:
在这里插入图片描述
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开发中必不可少的工具，它们使得开发者可以更加高效地编写交互性强的网页。