什么是jQuery？jQuery有什么用？

最新推荐文章于 2023-05-14 10:30:40 发布

G018_star sky♬

最新推荐文章于 2023-05-14 10:30:40 发布

阅读量3.2k

点赞数 6

分类专栏： JS jQuery 文章标签： jQuery 前端

本文链接：https://blog.csdn.net/qq_42526440/article/details/100018755

版权

JS 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

jQuery

12 篇文章 0 订阅

订阅专栏

jQuery是一个快速，小巧，功能丰富的JavaScript库。
jQuery是使HTML文档遍历和操作，事件处理和动画等操作变得更加简单。
jQuery的所有功能都是通过JavaScript访问的，因此掌握javas对于理解，构建和调试代码至关重要。

1.什么是jQuery

首先，让我们看一下使用JavaScript操作的HTML示例。
要获取id="start’的元素并将HTML更改为“开始吧，年轻人”，我们需要执行以下操作：

<html>
<head>
<meta charset="utf-8">
</head>

<body>
<p id="start"></p>
<script>
    var el = document.getElementById("start");
    el.innerHTML = "出发吧,骚年!";
</script>

</body>
</html>

而用jQuery操作则只需要一行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</head>
<body>
<p id="start"></p>
<script>
    $("#start").html("出发吧,骚年!");
</script>
</body>
</html>

正如你所看到的，jQuery让代码更短，更容易理解。

2.jQuery是JavaScript的一个函数库

你可以从www.jquery.com下载jQuery库的副本，或者从CDN（内容分发网络）（如BootCDN或百度CDN）中引入。
我们将使用BootCDN上的CDN。

要开始使用jQuery，我们首先需要使用 script 标签将其添加到我们的HTML文档的头部：

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
        <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    </head>
    <body>
    </body>
</html>

jQuery是一个JavaScript库，所以它具有.js文件扩展名。
在使用HTML文档之前等待HTML文档完全加载并准备就绪是一种很好的做法。为此，我们使用 document(文档) 对象的 ready 事件：
￥(document).ready(function(){
//在这写jquer代码
});
$用于访问jquery。从这里开始，代码访问document对象，并定义了当 document 的 ready 事件触发时要调用的函数。这样可以防止任何jQuery代码在文档加载完成之前运行。我们有一个方便的快捷方式, 等价于上面的代码：
$(function(){
//在写jQuery代码
});

以下代码, 在页面文档准备就绪后将 id =“start” 的元素的HTML更改为"出发吧,骚年!"。
示例：

<html>
<head>
<title>页面标题</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div id="start">开始</div>
<script>
$(function(){
$("#start").html("出发吧，年轻人！")；
});
</script>
</body>
</html>

3.jQuery语法

jQuery用于选择（查找）HTML元素并对其执行“操作”。
基本语法是：
$(“selector”).action()
selector是选择器，用于查找HTML元素。
action是元素要执行的动作。

例如：
$(“p”).hide() // 隐藏所有<p>元素
$(".demo").hide() // 隐藏所有 class=“demo” 元素
$("#demo").hide() // 隐藏 id=“demo” 的元素

回顾我们前面的例子中的代码：
$("#start").html(“出发吧,骚年!”);
选择 id="start"的元素，并为其调用html()方法。 html()方法用于更改元素的HTML内容。

4.选择器

我们来看看所有的jQuery选择器。
正如您在上一课中看到的，jQuery选择器以美元符号和圆括号开头:$()。
注意：jQuery中所有的符号都是英文符号。
最基本的选择器是元素选择器，它根据元素名称选择所有元素。

$(“div”) //选择所有<div>元素

接下来是id和类选择器，他们通过id和类名来选择元素：
$("#test") //选择id=“test"的元素
$(”.menu") //选择class="menu"的所有元素

您还可以对选择器使用以下语法：
$(“div.menu”) //所有<div>元素与class=“menu”
$(“p:first”) //第一个<p>元素
$(“h1,p”) //所有<h1>和<p>元素
$(“div p”) //所有<div>元素后代的<p>元素
$("*") //DOM的所有元素
选择器比纯JavaScript更容易访问HTML DOM元素。

在这里插入图片描述

G018_star sky♬

关注

6
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
什么是jQuery？jQuery有什么用？

jQuery是一个快速，小巧，功能丰富的JavaScript库。jQuery是使HTML文档遍历和操作，事件处理和动画等操作变得更加简单。jQuery的所有功能都是通过JavaScript访问的，因此掌握javas对于理解，构建和调试代码至关重要。1.什么是jQuery首先，让我们看一下使用JavaScript操作的HTML示例。要获取id="start’的元素并将HTML更改为“开始吧...
复制链接

扫一扫