The core of jquery: the jquery plug-in mechanism

Article Introduction: the friend who has learned the last lesson I want to know the role of the $ symbol, then, today we further study the core of jquery.

the friend who has learned the last lesson I want to know the role of the $ symbol, then, today we further study the core of jquery.

jquery Object access:
Each (callback)

According to my understanding, each is a looping mechanism in jquery. Typically used with this keyword. Friends who have studied the program know that there are several do...while (), while (), for (Expression1,expression2,expression3) and C # And a Foreach loop unique to the JSTL tag in Java EE. Each loop in jquery is similar to a foreach loop. The specific use method is described in this section of the case.

$ ("Element"). length

Represents the number of an object in an HTML page, consistent with size usage, without ().

$ ("Element"). size ()

represents the number of an object in an HTML page, consistent with the length usage.

$ ("Element"). Get ()

represents the collection of an element in an HTML page, constructed as an array.

$ ("Element"). Get (index)

as above, if the Get method contains a number, it means to obtain the first element of the array, the index starts at 0.

$ ("Element"). Get (). reverse ()

represents the reverse of an array that is acquired into a collection of DOM elements. For example, the default sort is 1,2,3 using this method is 3,2,1

$ ("Element"). Index ($ ("Element"))

Searches the index value of the element obtained in index (counting from 0) in the matched object element, and returns 1 if it is not found. For example, there are 5 Div, where the ID of the 4th tag is #bar then $ ("div"). Index ($ ("#bar") returns an indexed value of 3.

jquery plug-in mechanism:

$.extend
({
Max: function (num1,num2) {return num1 > num2 ? num1:num2;},
min: function (num1,num2) {return num1 < num2? num1:num2;}
})

$.extend is equivalent to jquery.extend in this area max and Min are two custom functions, and all have 2 parameters, which are compared in the method body. A conditional expression is used in the body of the method, which is similar to the IF condition. This conditional expression means: if num1>num2 is compared and returns "true" if NUM1 is greater than num2, then this method returns "? "After": "Before the content is NUM1, vice versa is num2."
When invoked using $.max (2,3) to pass in any of the two parameters, the return of num2, the number 3;$.min (7,8), returns NUM1 because NUM1 is smaller than num2. $ to be replaced with jquery is no problem at all.

$.fn.extend
({
Check: function ()
{
return this. each (function () {this.checked = true;});
}

uncheck: function ()
{
return this. each (function () {this.checked = false;});
}

})

This method is also an implementation of a plug-in where this represents the DOM object that the caller is currently referring to, such as $ ("#abc"). Click (function () {this}) here is the #abc DOM object. Each has been explained above. Two methods are defined in this plug-in method extend, respectively, check and uncheck.
Like what:
$ ("input[@type =checkbox]"). Check () indicates that the type property of the input label is set to selected, where the contents in brackets indicate that if the type property of input is a checkbox, it is set to select.
$ ("input[@type =radio]"). Uncheck () indicates that the type property of the input label is set to unchecked, where the contents in brackets indicate that if the type property of input is radio, it is set to unchecked.

Multi-Library coexistence:
Sometimes we can invoke a variety of JS libraries on the same page, such as using the JQuery class library and using the PRototype class library, which is arguably no problem, but they all use the "$" symbol, so in order to avoid conflicts with other libraries, You can use the following two methods to differentiate them from each other.


JQuery. noconflict ()

using the method, Var j=noconflict () means that J will replace the "$" symbol in jquery.

JQuery. Noconflict (true)

using the method, Dom.query = Jquery.noconflict (true) means that the control of $ and jQuery is returned to the original library. For example, you want to embed jquery in a highly conflicting environment. Note: After calling this method, it is highly likely that the plug-in will fail. so be sure to think about it when you use it. Dom.query will represent the "$" symbol.