jquery Tutorial: The use of the jquery core approach

Today we'll delve into the core of jquery.

jquery Object access:

Each (callback)//According to my understanding, each is a cyclic 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 the size usage, and does not carry ().

$ ("Element").size ();//Represents the number of objects 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);//Function Ditto, if the Get method contains a number that means to obtain the first element of the array, the index starts with 0.

$ ("Element"). Get ().reverse ();//Represents the reverse of the array that gets the collection of DOM elements. For example, the default sort is 1,2,3 using this method is 3,2,1

$ ("Element").Index ($ ("Element"));//Search the index value of the element obtained in index (counting from 0) in the matched object element and return-1 if 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;}
})


$.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 the 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.
For example:
$ ("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 (); //Usage method, var j=noconflict (), which 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.

$.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.