jquery简介以及优点_JQuery简介

刺骨的言语ヽ痛彻心扉 2023-03-05 09:57 33阅读 0赞

jquery简介以及优点

### 我们应该学习JQuery吗？ **(**Should we learn JQuery?**)** ###

As and when we talk about **JQuery** and become more elaborative, I think it's best you make a judgement of your own and decide whether or not learning **JQuery** is essential. You might think this dude is super old and aging quick but JQuery is used a hell lot even today. Maybe not directly, but with certain modern JS APIs and frameworks. A lot of JS frameworks are built on top of JQuery. You don't need to be a ninja and it will hardly take any time to learn the basics so why not?

当我们谈论**JQuery**并变得更加详尽时，我认为最好是自己做出判断，并决定学习**JQuery**是否必不可少。 您可能会认为这个花花公子已经很老了而且老化很快，但是即使在今天，JQuery仍然被大量使用。 也许不是直接的，而是某些现代JS API和框架。 许多JS框架都建立在JQuery之上。 您不需要成为忍者，几乎不需要花费任何时间来学习基础知识，那么为什么不呢？

### 我们什么时候应该学习JQuery？ **(**When should we learn JQuery?**)** ###

The next thing is to know if this is the right time for you to read this article further and start your journey on learning this JS library. The simple answer is the answer to this question- am I familiar with HTML, CSS and JavaScript? If yes, then great! If not, you might want to brush up on these prerequisites first.

接下来的事情是知道是否是您进一步阅读本文并开始学习此JS库的正确时机。 简单的答案就是这个问题的答案-我是否熟悉HTML，CSS和JavaScript？ 如果是，那就太好了！ 如果没有，您可能想先复习这些先决条件。

### 什么是JQuery？ **(**What is JQuery?**)** ###

**JQuery** is gigantic, free, open source JavaScript library. Remember, it is not a programming language. It's built on top of the plain old vanilla JS so don't think that if JS seems complex to you, **JQuery** will save you. No way, it is highly essential to be a bit comfortable in JavaScript so you can learn, master, understand **JQuery** and most of all appreciate it. It is a JavaScript library that enhances JS for us and we can see that enhancement in action when we understand the crux of JavaScript. It allows us to work with the DOM in a much easier way along with event handling and making AJAX requests. It's a simple replacement for vanilla JS which makes writing JS so much easier with so much less lines of code. You're doing the same stuff but now with less lines of code.

**JQuery**是巨大，免费的开源JavaScript库。 请记住，它不是编程语言。 它建立在普通的原始JS之上，因此不要以为JS对您来说似乎很复杂， **JQuery**可以为您省钱。 绝对不可能，对JavaScript有所了解是非常重要的，以便您可以学习，掌握，理解**JQuery，**并且最重要的是欣赏它。 这是一个为我们增强了JSJavaScript库，当我们了解JavaScript的症结时，我们可以看到这种增强的作用。 它使我们能够以更简单的方式使用DOM以及事件处理和发出AJAX请求。 它是香草JS的简单替代，它使使用更少的代码行就可以更加轻松地编写JS。 您正在做同样的事情，但是现在用更少的代码行了。

Sometimes when we use events in JavaScript, the browsers interpret those events in their way which could be different from each other. **JQuery** takes away those differences giving us a one fix solution approach to working with the DOM and events.

有时，当我们在JavaScript中使用事件时，浏览器会以可能彼此不同的方式解释这些事件。 **JQuery**消除了这些差异，为我们提供了一种使用DOM和事件的固定解决方案。

In addition to that, it has some super awesome features such as chaining which makes coding verbose and faster. We'll look at this a bit more deeply later.

除此之外，它还具有一些超棒的功能，例如链接，使编码变得冗长且更快。 稍后我们将对此进行更深入的研究。

One of the most exciting features of JQuery is the plethora of plugins available to us which we can use for making enhancements to our website.

JQuery最令人兴奋的功能之一就是为我们提供了许多插件，我们可以使用这些插件来增强我们的网站。

So in a nutshell you can use JQuery for manipulating the DOM using CSS Selectors and thus learn how to add, update and delete HTML elements on the page. You can also use it for event handling, animations and super cool plugins for your website.

因此，简而言之，您可以使用JQuery通过CSS选择器来操作DOM，从而了解如何在页面上添加，更新和删除HTML元素。 您也可以将其用于网站的事件处理，动画和超酷插件。

### 使用JQuery **(**Using JQuery**)** ###

With a code editor ready, the first thing we want to learn is how to use JQuery in our website. Head over to [https://code.jquery.com/][https_code.jquery.com] and select the oldest version of JQuery's uncompressed CDN or you can also simply copy the CDN from below,

准备好代码编辑器后，我们要学习的第一件事是如何在我们的网站中使用JQuery。 转到[https://code.jquery.com/][https_code.jquery.com]并选择JQuery的未压缩CDN的最旧版本，或者您也可以从下面简单地复制CDN，

You can also download JQuery and include that script to your HTML document. However, using CDN's is the best and easiest way I feel so we'll do that only.

您还可以下载JQuery并将该脚本包括到HTML文档中。 但是，使用CDN是我觉得最好和最简单的方法，因此我们只会这样做。

**Index.html**

<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="index.js"></script>
    </body>
    
    </html>

All we have done till now is created a blank HTML page with absolutely nothing on it, included JQuery CDN and also an **index.js** where all our local JQuery JS will go.

到目前为止，我们所要做的就是创建一个空白HTML页面，上面没有任何内容，包括JQuery CDN以及一个**index.js** ，所有本地JQuery JS都将放在其中。

$(document).ready(function(){
        
        alert("We're now using JQuery! Awesome.");
    })

**Output**

**输出量**

We get an alert when the page loads.

Now we have a good knowledge of what JQuery is and how to use it, we’ll fill this HTML with stuff and see how we use JQuery selectors, event handling, etc.

现在，我们对JQuery是什么以及如何使用它有了很好的了解，我们将在HTML中填充一些内容，并了解如何使用JQuery选择器，事件处理等。

> 翻译自: [https://www.includehelp.com/code-snippets/introduction-to-jquery.aspx][https_www.includehelp.com_code-snippets_introduction-to-jquery.aspx]

jquery简介以及优点

[https_code.jquery.com]: https://code.jquery.com/
[https_www.includehelp.com_code-snippets_introduction-to-jquery.aspx]: https://www.includehelp.com/code-snippets/introduction-to-jquery.aspx