Sharp jquery Series (i)------basic concept big pot stew

Statement: Although it is the basic concept but also the author after some study to summarize these articles, so he does not include the advantages and disadvantages of jquery, features, grammar introduction.

Concept One: jquery pair like with Dom object

DOM (Document Object model) he can represent a tree of data structures

< HTML >    < Head ></ Head >    < Body >        < H1 ></ h    </body></html>

Just like the above means that HTML, head, body, H1 are all DOM element nodes and have a parent-brother relationship, which can be obtained by JS method.

var domojb = Document.getelementby ("id");

jquery objects are objects that are generated after wrapping a DOM object through jquery

jquery objects are unique to jquery, and if an object is a jquery object, you can use the method in jquery

$ ("#foo"). HTML ()//The HTML generation within the element that gets Id=foo http

Equivalent to:

document.getElementById ("foo"). InnerHTML;

The objects they get are different, so their methods can't call each other.

The mutual conversion of jquery objects to DOM objects

var #cr = $ ("#cr"); var ce = $cr [0];

Or

var $CR = $ ("#cr"); var cr = $cr. Get (0);

var cr = document.getElementById ("Cr"), var $CR = $ (CR);

Concept two: Application of closure in plug-in

The concept of closures is the most confusing thing I have, $, jQuery, (), {} The beginning of these strings is very confusing, I hope this time I can say Green Chu, but also can everyone less detours.

Closures are the most used in the plug-in development process, and plainly he is a bit like the inner class inside Java.

Here you can first fill the concept of JS closures: http://www.cnblogs.com/mzwr1982/archive/2012/05/20/2509295.html

Prior to understanding closures. It is better to understand the meaning of the scope chain, simply speaking, the scope chain is the function at the time of definition, to find an index of the value of the variable used, and his internal rule is to put the function of the local variables in the first place, the parent function of its own variables in the second , put the variables in the higher-level function later, and so on until the global object. When the function needs to query the value of a variable, the JS interpreter will go to the scope chain to find, from the first local variable to find, if not found the corresponding variable, then to the next level of the chain to find, once the variable is found, will no longer continue. If the required variable is not found at the end, the interpreter returns undefined.

Understanding the scope chain, we look at the JS memory recovery mechanism, in general, a function at the beginning of execution, it will be defined in the variable memory space to save, in case of the subsequent statements to use, wait until the function is finished to return, These variables are considered useless. The corresponding memory space is also recycled. The next time you execute this function, all the variables return to their original state and are re-assigned. But if another function is nested inside the function, it is possible that the function is called externally. And this internal function uses some variables of the external function. This memory-recycling mechanism can cause problems. If an intrinsic function is called directly after the external function returns, the Then the intrinsic function cannot read the value of the variable in the external function that he needs. So the JS interpreter will automatically save the function and the variables he or she may use, including the local variables and the variables (free variables) of the parent and ancestor-level functions, when it encounters the function definition. That is, to build a closure, These variables will not be reclaimed by the memory collector, but only if the internal function is not possible to be called (for example, if it is deleted, or if there is no pointer), the closure will be destroyed, and no one of the closure references will be recycled when the next memory recycle starts.

In other words, with closures, nested function structures work, which is what we expect. Then, closures have some features that are often difficult for programmers to understand.

Take a look at the following section of code.

var result=[];function foo () {    var i= 0;    for (; i<3;i=i+1) {        result[i]=function () {            alert (i)        }    }};foo (); result[0] ();//3result[1] ();// 3RESULT[2] (); 3

In this code, the programmer wants the variable i in the Foo function to be used by the inner loop function, and can get their index separately, and in fact, only the value that the variable is last reserved, that is. The free variable that is recorded in the closure is just a reference to the variable, not the value of the variable, when the variable is changed , the value of the variable obtained in the closure will also be changed.

One way to do this is to have the inner function execute as soon as the loop is created, capture the current index value, and then record it in one of its own local variables. Then, using the return function method, rewrite the intrinsic function, let the next call, return the value of the local variable, the improved code:

var result=[];function foo () {    var i= 0;    for (; i<3;i=i+1) {        result[i]= (function (j) {            return function () {                alert (j);            };        }) (i);}    ; Foo (); result[0] (); 0RESULT[1] (); 1RESULT[2] (); 2

Protect the I variable access, and keep I in memory, can always increase-------This is the main practice of closures

function A () {var i=0; function B () {alert (++i);} return b;} var C = a (); C ();    1c ();   2

Intrinsic functions can access all local variables, arguments, and other intrinsics declared by the external function in which they are located, and when one of these intrinsics is called outside the outer function that contains them, a closure is formed

The temporary variables defined by the intrinsic function do not affect the global space, so the following is the notation:

(function () {}) (); Defines an anonymous function () {} and then uses () to execute the function (), which is the typical () () notation

If you want to pass a parameter, you can:

(function ($) {     $ ("div p"). Click ("This will not conflict with other plugins");}) (jQuery); equivalent: function temp ($) {    $ ("div p"). Click ("Here with $ can not conflict with other plugins Oh");}    Temp (jquery) is now passing in jquery diagonally as the actual parameter because we actually passed in the parameter is jquery, so the formal parameter $ is the abbreviation for the jquery object   

Take a look at the jquery code:

((function ($) {     var foo;     var bar = function () {/* functions inside the anonymous function can access Foo, even if you call bar () outside of the anonymous function,                  you can also  access Foo within bar (). But the anonymous function's external direct access to Foo is not possible *     /}/* The following name lets the function bar () inside the anonymous function escape to the globally accessible range so that the internal defined function bar () can be accessed outside the anonymous function by calling Jquery.bar (), and the internal function bar () can also access the variables within the anonymous function foo*/     $. bar = Bar;}) (JQuery)

Sharp jquery Series (i)------basic concept big pot stew