[Web front-end | jQuery] Basic concepts of jQuery

basic concept

1: JavaScript library:

The library is a encapsulated specific collection (methods and functions).

To understand the library from the perspective of encapsulating a lot of functions, it is in this library that a lot of pre-defined functions are encapsulated, such as animation animate, hide, show, such as getting elements, etc.

Simple understanding:

It is a JS file that encapsulates our native js code and stores it in it. In this way, we can use these encapsulated functions quickly and efficiently.

For example, jQuery is for quick and convenient operation of the DOM, which are basically functions (methods).

Common JavaScript libraries:

• jQuery
• Prototype
• YUI
• Dojo
• Ext JS
• Zepto on mobile

2：jQuery

advantage:

1. Lightweight. The core file is only tens of kb, which will not affect the page loading speed
2. Cross browser compatibility. Basically compatible with current mainstream browsers
3. Optimized DOM operation, event handling, animation design and AJAX interaction
4. Speed ​​up the development speed of front-end personnel
5. Chain programming, implicit iteration
6. Support for events, styles, and animations greatly simplifies DOM operations
7. Support plug-in extension development. There are a wealth of third-party plug-ins, such as: tree menu, date control, carousel, etc.
8. Free and open source

3: Basic use

3.1: Download of jQuery

jQuery official website

3.2: Use of jQuery

1. Directly import the file downloaded by jQuery, jquery.main.js
2. Just use

3.3: jQuery entry function

1. After the DOM structure is rendered, the internal code can be executed, instead of waiting for all external resources to be loaded, jQuery helps us complete the encapsulation.
2. It is equivalent to DOMContentLoaded in native js.
3. Different from the load event in native js, the internal code is executed after the page document, external js file, css file, and image are loaded.
4. The first method is more recommended.

method one:

$(function () {
    
       
    ...  // 此处是页面 DOM 加载完成的入口
 }) ; 

Way two:

$(document).ready(function(){
    
    
   ...  //  此处是页面DOM加载完成的入口
});

3.4: jQuery's top-level object $

jQuery AKA $, equivalent to the window in native js.

Two can be interchanged

3.5: jQuery object and DOM object

1. Objects obtained with native JS are DOM objects
2. The element obtained by the jQuery method is the jQuery object.
3. The essence of the jQuery object is: an object (stored in the form of a pseudo-array) generated by wrapping the DOM object with $.

[Talking] Only jQuery objects can use jQuery methods, and DOM objects use native JavaScirpt methods.

❤ Conversion between the two

jQuery ——> DOM

//方法一
$('div') [index]       //index 是索引号 

//方法二
$('div') .get(index)    //index 是索引号

DOM ——> jQuery

//$(DOM对象)
$('div')