A summary of the issues that need to be paid attention to in jQuery. For details about jquery users, refer.
1. Difference between $. find () and $. children ()
There are the following HTML snippets:
The Code is as follows:
1. find () returns all the specified elements under the element, without limiting the depth of sub-level, such:
$ ("# P_four"). find ("input") // returns three input elements: one, two, and three.
2. childr () returns the first-level child node Element Set of the element, for example:
$ ("# P_four"). children ("input") // two input elements, one and two, are returned.
2. Difference between $. append () and $. appendTo ()
1. append (): returns the reference of the parent element.
2. appendTo (): returns the reference of the newly created element.
The Code is as follows:
Var e = $ ("dynamically create and add table title elements"). appendTo ($ ("# p_1 "));
Var r = $ ("# p_1"). append ("dynamically create and add table title elements ");
// E indicates the newly created Element
// R indicates the $ ("# p_1") element.
3. Differences between dynamically binding events and static adding events
With jQuery, it is easy to dynamically bind events to elements, but you can't forget to add events to elements in the traditional way, however, when using jQuery and common JavaScript programs, you must specify the differences between jQuery dynamic binding events and static addition events in obtaining event source objects.
Differences between dynamic binding and static adding events
Differences between dynamic binding and static adding events
Differences between dynamic binding and static adding events
// 1. dynamically bind events. this indicates the event source. For example:
$ ("# P1"). click (function (){
Alert ($ (this). text (); // this code event Source
});
// 2. this cannot be used directly when events are statically bound. For example:
Function fun (){
Alert ($ (this). text); // cannot be obtained
Content
// 3. You can obtain the event source by passing "this ".
Function fun2 (obj ){
Alert ($ (obj). text (); // wrap obj as a jQuery object
4. Differences between this and $ (this) in event processing functions
$ ("# P1"). click (function (){
Alert (this. innerHTML); // directly use this
Alert ($ (this). text (); // wrap this as a jQuery object
});
In the above Code, this indicates the event source object, but when this is used directly, it is an html dom object;
$ (This) can wrap html dom objects as jQuery objects, that is, they have the attributes and methods of jQuery objects.
5. Differences between $. remove () and $. remove (selector)
Both call Methods return the elements selected by the selector before the method.
1. remove (): remove itself from the parent element [suicide]
2. remove (expr): deletes an element from the parent element]
For example:
Var e = $ ("# p_2 h1"). remove (); // return the deleted h1 element.
Var e = $ ("# p_2 h1"). remove ("# h2"); // Delete the element whose id is h2 and return all h1 Elements
6. Difference between $. eq () and $. get ()
Similarities: You can obtain the nth element specified in the element set.
Differences:
1. eq (n) returns the jQuery object. You can directly use the jQuery built-in method, such:
The Code is as follows:
$ ("# P_three a"). eq (0). bind ("click", function (){
Alert ($ (this). text ());
});
2. the DOM Element object returned by get (n) can directly use html dom attributes and methods, such:
$ ("# P_three a"). get (1). onclick = function (){
Alert ($ (this). text ());
};
Or encapsulate the object into a jQuery object to achieve the same effect, for example:
The Code is as follows:
$ ("# P_three a"). get (1). bind ("click", function (){
Alert ($ (this). text ());
});
7. $.css(properties(and $.css (name, value)
1. Syntax differences
Css (properties) $ ("p" ).css ({color: "red"}); or $ ("p" ).css ({"color": "red "});
Css (name, value) $ ("p" ).css ("color": "red ");
2. Differences between attribute names
Css (properties ):
If the style attribute name does not use quotation marks, you must use the css style name in JavaScript Syntax: for example:
$ ("P" ).css ({color: "red", fontSize: "30px "});
If it is changed to "font-size", it will be ineffective.
If the style attribute name has quotation marks, both styles can be used, for example:
$ ("P" ).css ({color: "red", "font-size": "30px", "fontWeight": "bold "});
Css (name, value): either of the two forms is acceptable. The following two effects are the same:
$ ("P" ).css ("fontSize": "30px ");
$ ("P" ).css ("font-size": "30px ");
