JQuery learning-encapsulation makes the world a simpler one.

JQuery learning-encapsulation makes the world a simpler one.
1. Editor's message

Small editor believes that JQuery is some js Methods encapsulated by JavaScript, and these methods are encapsulated together, called JQuery. In addition, js has two libraries: Prototype And MooTools, which are not described here.

As we have learned in js before, the functions and methods in js all need to be compiled by ourselves, but some methods are frequently used, and thus the JQuery library is generated, it is like producing cars, airplanes, and cannons. Before that, we had to use steel to create screws, iron slabs, and then create the cars and planes we needed, now we are directly using the screws, iron panels and so on to do what we want to do.

This idea is encapsulation. To put it bluntly, it means less writing and more (in this example, it is understood that less time is spent and higher quality is created ). This idea makes the world so simple.

2. Comparison between JQuery and JavaScript

The main jQuery function is the $ () function (jQuery function ). If you pass a DOM object to this function, it returns the jQuery object with the jQuery function added to it.
JQuery allows you to use the CSS selector to select elements.
In JavaScript, you can assign a function to handle window loading events:

JavaScript:

<span style="font-size:18px;">function myFunction(){var obj=document.getElementById("h01");obj.innerHTML="Hello jQuery";}onload=myFunction;</span>

JQuery:

function myFunction(){$("#h01").html("Hello jQuery");}$(document).ready(myFunction);

In the last line of the code above, the html dom document Object is passed to jQuery: $ (document ).
When you pass a DOM object to jQuery, jQuery returns the jQuery object packaged with an html dom object.
The jQuery function returns a new jQuery object, where ready () is a method.
Since a function is a variable in JavaScript, you can pass myFunction as a variable to jQuery's ready method.
Tip: jQuery returns the jQuery object, which is different from the passed DOM object. The attributes and methods of a jQuery object are different from those of a DOM object. You cannot use html dom attributes and methods on jQuery objects.

3. JQuery applications

(1) Step 1 of jQuery programming, introduce the jQuery. js File
Step 2: Use the selector to find the node to operate
Step 3: Call the attributes or methods of the jQuery object to operate on the corresponding node.
(2) Conversion between jQuery object and dom object 1) dom object ---> jQuery object
Var $ obj = $ (dom object );
Eg: var $ d =$ (div );
2) jQuery object ----> dom object
Method 1: var obj = $ obj. get (0 );
Method 2: var obj = $ obj. get () [0];

(3) Example

<! DOCTYPE html> In this example, JQuery is combined with HTML and css to access the p tag in HTML and return the background color by clicking an event.


Ps:To learn JQuery well, we still need to do more examples. Only through continuous application in practice can we get more in-depth understanding of JQuery and make its application more flexible.