Jquery Learning (2) Basic Core

Jquery Learning (2) Basic Core

1. learning points:

1. Code style
2. Loading Mode
3. Object swapping

I. Code style:

In the jQuery program, no matter the selection of page elements or built-in function functions, they all start with the dollar symbol "$. This "$" is the most important and exclusive jQuery object, so we can write this when selecting or executing function functions for page elements:
$ (Function (){});
// Execute an anonymous Function
$ ('# Box ');
// Select the execution ID Element
(('{Box'}.css ('color', 'red ');
// Execute function
Because $ is the abbreviation of jQuery object, the above three pieces of code can also be written as follows:
JQuery (function (){});
JQuery ('# box ');
Jquery('{box'}.css ('color', 'red ');
Contains () this function. That is to say, the returned object is actually a jQuery object.
Watermark ().css ('color', 'red ');
// Theoretically valid, but an error is reported if an element is missing
It is worth mentioning that after the function .css () is executed, the jQuery object will be returned. That is to say, the code mode of jQuery is a concatenation method that can continuously call function functions.
(('Character box'character .css ('color', 'red'character .css ('font-size', '50px '); // concatenation
The code comments in jQuery are consistent with those in JavaScript. There are two common comments: "//... ", use"/*... */".
// Combine ('your box'0000.css ('color', 'red ');

Ii. Loading Mode (I think this is especially important because many people are asked this question during the interview)

We have been using $ (function () {}) in the previous Code. This Code is the first and last package. Why do we have to wrap this code? The reason is that the jQuery library file is loaded before the body element, and we must wait for
After some DOM elements are loaded, the delay supports DOM Operations, otherwise they cannot be obtained. When loading is delayed, JavaScript provides an event as load. The method is as follows:
Window. onload = function (){};
// JavaScript waiting for loading
$ (Document). ready (function (){});
// JQuery waiting for loading

Differences between load loading and read loading

	Window. onload	$ (Document). ready ()
Execution mechanism	Wait until all webpages are loaded (including images), and then execute the package code.	You only need to wait until the DOM structure in the webpage is loaded to execute the package code.
Number of executions	It can only be executed once. If the second execution is performed, the first execution will be overwritten.	It can be executed multiple times, and N times won't be overwritten at the previous time
Simplified Solution	None	$ (Function (){});

In practical applications, we seldom directly use window. onload, because it needs to wait until large elements such as images are loaded before executing JS Code. Therefore, the biggest headache is that when the network speed is slow, the page has been fully expanded and images are still Loading slowly. At this time, all JS interaction functions on the page are in the suspended state. In addition, it is difficult to perform multiple development and team development tasks only once.

3. Object swapping

Although jQuery objects are unique objects in the jQuery library, they are encapsulated by JavaScript. We can directly output its information.
Alert ($); // inside the jQuery object Method
Alert ($ (); // The object returned by the jQuery object, or jQuery
Alert ($ ('# box'); // The returned object of the package ID element, or jQuery

From the above three sets of code, we found that after using the package, all jQuery objects will be returned. The obvious advantage is that it can be joined. But sometimes, we also need to return native DOM objects, such:

Alert (document. getElementById ('box'); // [object HTMLDivElement]

To obtain the native DOM object, jQuery can do this:

Alert ($ ('# box'). get (0); // The first native DOM of the ID Element

From the get (0) above, the index here shows that jQuery can process the DOM in batches, so that it can be more handy in processing a lot of loops.