菜单 搜索
首页 前端知识 Javascript jQuery简介

Javascript jQuery简介

2024-02-20 10:02:10 前端知识 前端哥 659 94 我要收藏

✨前言✨

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页面加载完成事件
readyDOM准备就绪事件
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开发中必不可少的工具，它们使得开发者可以更加高效地编写交互性强的网页。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/2369.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

CSS3 弹性盒子(Flex Box)

2024-03-06 09:03:27

使用jquery移除元素事件

2024-03-06 09:03:26

快速查找swagger接口的插件

2024-03-06 09:03:10

第21章 JQuery DataTables对角色的渲染显示

2024-03-06 09:03:09

解决 jqGrid冻结列高度不会自适应，高度不一致问题 (frozen:true)

2024-03-06 09:03:06

Jquery.md5.js加密插件下载和使用方法

2024-03-06 09:03:06

利用chatgpt学习认识jQuery（1）

2024-03-06 09:03:06

vue3 router elementui jquery bootstrap axios echarts的工程的创建

2024-03-06 09:03:47

echarts数据显示在最顶端

2024-03-06 09:03:46

echarts-热力图 高亮 轨迹

2024-03-06 09:03:44

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999
8

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
9

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
10

尚硅谷css3笔记

2024-02-13 10:02:44998

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！