introduce

jQuery is a free, open source, and syntactically designed library of JavaScript functions that make developers feel more convenient to use, such as manipulating document objects, selecting DOM elements, making animations, event handling, using AJAX, and other functions.

To use jQuery, you need to download the jQuery lib or import it via CDN.

Most of the front-end libs are available for download in two versions, one is the production version, which is used in the actual website, which has been simplified and compressed; the other is the development version, which is used for testing and development, with readable code .

For example vue, of course Jquery too

version model	file name	size	illustrate
beta version	jquery.js	128KB	Full uncompressed version. Mainly used for debugging, learning and development.
Release version	jquery.min.js	88KB	The code is minified and mainly used for released products and projects.

It is recommended to use the development version during development. It is more convenient to debug. When the development is completed and the project is released, replace the development version with the release version. There is no difference between the development version and the release version except for compression, but it is like the vue.js release version. will turn off the wrong prompt

Currently, there are three versions of jQuery:

1.x: Compatible with IE6/7/8, the official only do BUG maintenance, no new functions will be added. Final version: 1.12.4 (as of January 21, 2021);

2.x: Not compatible with IE6/7/8, the official only do BUG maintenance, no new functions will be added. If you do not consider compatible browsers with lower versions, the final version: 2.2.4 (as of January 21, 2022);

3.x: Not compatible with IE6/7/8, only supports the latest browsers. Because many old jQuery plugins do not support this version, so generally do not use the 3.x version, but I personally prefer to use the new version. At present, this version is the official main update and maintenance version.

Get started quickly

import using cdn

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>

Quick start of the case

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>getStartedQuickly</title>
        <!-- jquery from cdn   -->
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        
        <script>
            $(function () {
     
     
                alert('您好！')
            })
        </script>
    </head>

    <body>
    </body>
</html>

operation result
insert image description here

Objects and DOM Objects

Here $(function(){})is $(document).read()shorthand for jquery method

When writing jQuery programs, the dollar sign $and jQuerythe keyword are equivalent

The following $(function(){})are window.onloadthe differences between methods and JavaScript native methods

	`window.onload`	`$(function(){})`
execution time	It must wait for all the content in the page to load (images, flash, video, etc.) before it can be executed.	All DOM document structures in the web page are executed immediately after drawing, and the content (pictures, flash, videos, etc.) associated with DOM elements may not be loaded.
write number	The same page cannot be written more than one at the same time.	The same page can be written more than one at the same time.

Jquery object

// html() 方法，等价于 document.getElementById("#userName").innerHTML;
var userName= $("#userName").html();

The HTML element with id="userName" is $("#userName")selected , and the returned object is the jQuery object.

DOM objects can only use methods/properties of DOM objects, and jQuery objects can only use methods/properties of jQuery objects. For example, a DOM object can use the innerHTML property owned by the DOM object, but not the html() method owned by the jQuery object.

Convert between DOM and Jquery objects

The DOM object and the Jquery object can be converted to each other. The essence of the jQuery object is an object similar to an array or a collection, while the essence of the DOM object is an ordinary object.

DOM object -> Jquery object

Wrap a DOM object with $() to convert it into a jQuery object, that is, $(DOM object) is a jQuery object, as follows:

// 获取一个 DOM 对象
var javaScriptObject = document.getElementById("userName"); 
// 通过 $() 将 DOM 对象转为 jQuery 对象
var $jQueryObject = $(javaScriptObject);

Jquery object -> DOM object

// 获取 jQuery 对象
var $jqueryObject = $("#userName"); 

// 1、通过数组下标的方式，将 jQuery 对象转为 DOM 对象
var javaScriptObject = jqueryObject[0]; 

// 2、通过 get(index) 的方式，将 jQuery 对象转为 DOM 对象
var javaScriptObject = jqueryObject.get(0);

insert image description here

If it is helpful to you, don't forget to like/favorite/comment/follow and support the blogger

[Jquery] Getting started, getting started quickly, converting between DOM/Jquery objects

content