jquery Learning-Encapsulation to make the world a little easier

1. Editor's message

The small part thinks thatjquery is a JavaScript package of some JS methods , and these methods are encapsulated together, called jquery. In addition, JS also has two library is Prototype, MooTools, here no more do introduce.

in the previously learned JS, we know that the functions and methods in JS are to be written by ourselves, but some methods are often used by us, by This resulted in the jquery library, like the production of automobiles, airplanes, artillery, etc., before we have to use steel screws, iron plate, and then to build we need for cars, airplanes, and so on, and now is made directly with the screws, iron and other things we want to do.

the idea is Package , plainly, is write less and do more (It is understood in the example that it takes less time to create a higher quality). It is this thought that makes the world so simple.

2, jquery and JavaScript comparison

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

JavaScript mode:

<span style= "FONT-SIZE:18PX;" >function myFunction () {var Obj=document.getelementbyid ("H01"); obj.innerhtml= "Hello jQuery";} Onload=myfunction;</span>

JQuery Method:

function MyFunction () {$ ("#h01"). HTML ("Hello jQuery");} $ (document). Ready (myFunction);

         On the last line of the code above, the HTML DOM Document object is passed to JQuery: $.
         When you pass a DOM object to jquery, jquery returns the JQuery object wrapped in an HTML DOM object.
         The jquery function returns a new jquery object, where Ready () is a method.
         Since functions are variables in JavaScript, you can pass myFunction as a variable to the Ready method of JQuery.
          Tip: jquery Returns a jquery object that is different from the passed DOM object. JQuery objects have properties and methods that are different from DOM objects. You cannot use the properties and methods of the HTML DOM on a JQuery object.

3. jquery Application

(1) Basic steps of jquery programming Step1, introducing the Jquery.js file
Step2, using the selector to find the node to manipulate
step3, invoke the properties or methods of the JQuery object to manipulate the corresponding node.
(2 ) conversion between a JQuery object and a DOM object             1) DOM Object---> JQuery object
                  var $obj = $ (DOM object);
            Eg:var $d = $ (div);
            2) jquery Object----> Dom Object
                  The first way: var obj = $obj. Get (0);
                  The second way: var obj = $obj. Get () [0];

(3 ) Specific examples

<! DOCTYPE html>
This example combines jquery with HTML and CSS to use the Click event to access the P tag in the HTML and return its background color.
PS: to learn jquery also need us to do more examples, only in the practice of continuous application, we can understand the jquery more deeply, more flexible application



jquery Learning-Encapsulation to make the world a little easier