Jquery precautions and common syntax Summary

1. the selector contains special characters.
The selector contains special characters such as ".", "#", "(", "]". According to W3C rules, attribute values cannot contain these special characters. For example:
Copy codeThe Code is as follows:
<Div id = "id # B"> bb </div>
<Div id = "id [1]"> </div>

For example:
Copy codeThe Code is as follows:
$ ("# Id # B ");
$ ("# Id [1]");

The above Code cannot get the elements correctly. The correct syntax is as follows:
Copy codeThe Code is as follows:
$ ("# Id \ # B ");
$ ("# Id \ [1 \]");

2. About separators containing Spaces
In the following example, the HTML code is as follows:
Copy codeThe Code is as follows:
<Div class = "test">
<Div style = "display: none;"> aa </div>
<Div style = "display: none;"> bb </div>
<Div style = "display: none;"> cc </div>
<Div class = "test" style = "display: none;"> dd </div>
</Div>
<Div class = "test" style = "display: none;"> ee </div>
<Div class = "test" style = "display: none;"> ff </div>

Use the jquery selector to obtain them:
Copy codeThe Code is as follows:
Alert ($ (". test: hidden"). length); // output 4
Alert ($ (". test: hidden"). length); // output 3

Different results are generated because the descendant selector is different from the filter selector.
Copy codeThe Code is as follows:
$ (". Test: hidden"). length; // with spaces

The above code selects the hidden element in the element whose class is "test.
Copy codeThe Code is as follows:
$ (". Test: hidden"). length; // without spaces

The above code selects the hidden class as the "test" element.
3. val () method
In jquery, the val () method is to read from the last option. If any of the values or text of the option matches, it is selected. For example:
Copy codeThe Code is as follows:
<Option value = "1"> 2 </option>
<Option value = "2"> 1 </option>

Whether val ("1") or val ("2") is used, the option
4. css () method
If the parameter value is a number, it is automatically converted to a pixel value. If the attribute contains the "-" symbol, such as font-size and background-color, if the values of these attributes are not enclosed in quotation marks, you must use the camper method. For example:
Copy codeThe Code is as follows:
$ ("P" ).css ({fontSize: "30px", backgroundColor: "#888888 "});

If quotes are enclosed, they can be written as "font-size" or "fontSize". It is recommended that you add quotation marks to form a good habit.
5. About the height () method
(1) The height () method after jQuery1.2 can be used to obtain the height of the window and document.
(2) The difference between using the css () method to obtain the height value and the height () method is that the height value obtained by the css () method is related to the style setting, you may get "auto" or a string like "10px". The height obtained by the height () method is the actual height of the element on the page, it has nothing to do with style settings, and does not contain units.
6. Attributes of event
JQuery encapsulates the common attributes of event objects so that event processing can run properly in all major browsers without browser type judgment.
(1) event. type () method
This method is used to obtain the event type.
Copy codeThe Code is as follows:
$ ("A"). click (function (event ){
Alert (event. type); // obtain the event type
Return false; // block link jump
});

After the preceding code is run, "click" is returned ".
(2) event. preventDefault () method
This method is used to prevent default event behavior. The W3C-compliant preventDefault () method in javascript is invalid in IE browser. jQuery encapsulates it to make it compatible with various browsers.
(3) event. stopPropagation () method
This method is used to prevent event bubbles. The stopPropagation () method conforming to W3C standards in javascript is invalid in IE browser. jQuery encapsulates it so that it is compatible with various browsers.
(4)、event.tar get () method
This method is used to obtain the elements that trigger the event. JQuery's encapsulation avoids the differences between different browsers.
Copy codeThe Code is as follows:
$ ("A [href = http://baidu.com]"). click (function (event ){
Alert(event.tar get. href); // gets the href attribute value of the <a> element of the trigger event
Return false;
});

After the above Code is run, return "http://baidu.com ".
(5) event. relatedTarget () method
In standard dom, elements generated by mouseoverand mouseoutcan be accessed through the event.tar get () method, and relevant elements are accessed through the event. relatedTarget () method. Event. the relatedTarget () method is equivalent to the event of IE browser in mouseover. the fromElement () method is equivalent to the event of IE browser in mouseout. toElement () method. jQuery encapsulates it to make it compatible with various browsers.
(6) event. pageX () method/event. pageY () method
This method is used to obtain the x and y coordinates of the cursor relative to the page. If jquery is not used, event is used in IE browser. x ()/event. the y () method is used in the firefox browser. pageX ()/event. pageY () method. If a scroll bar exists on the page, the height and width of the scroll bar are also added. In ie, the default 2px border should also be subtracted.
Copy codeThe Code is as follows:
$ ("A"). click (function (event ){
Alert ("Current mouse position:" + event. pageX + "," + event. pageY); // obtain the coordinates of the Current mouse relative to the page
Return false;
});

(7), event. which () method
The function of this method is to get the left, center, and right mouse buttons from the mouse click event; to get the keyboard buttons from the keyboard event.
Copy codeThe Code is as follows:
$ (Function (){
$ ("Body"). mousedown (function (e ){
Alert (e. which); // 1 = left mouse button; 2 = middle mouse button; 3 = right mouse button
});
});

(8), event. metaKey () method
Jquery also encapsulates the <ctrl> buttons on the keyboard in different browsers and specifies that the event. metaKey () method is used to obtain the <ctrl> buttons in the keyboard events.
(9), event. originalEvent () method
This method is used to point to the original event object.
7. bind () method
(1) bind multiple event types
Copy codeThe Code is as follows:
$ (Function (){
$ ("Div"). bind ("mouseover mouseout", function (){
$ (This). toggleClass ("over ");
});
});

(2) Add an event namespace
Copy codeThe Code is as follows:
$ (Function (){
$ ("Div"). bind ("click. plugin", function (){
$ ("Body"). append ("<p> click </p> ");
});
$ ("Div"). bind ("mouseover. plugin", function (){
$ ("Body"). append ("<p> mouseover </p> ");
});
$ ("Div"). bind ("dblclick", function (){
$ ("Body"). append ("<p> dblclick </p> ");
});
$ ("Button"). click (function (){
$ ("Div"). unbind (". plugin ");
});
});

Add a namespace after the Bound event type so that you only need to specify the namespace When deleting the event. After you click the <button> element, the namespace of "plugin" is deleted, but the "dblclick" event does not exist in the namespace of "plugin.
(3) same event name and different namespace execution methods
Copy codeThe Code is as follows:
$ (Function (){
$ ("Div"). bind ("click", function (){
$ ("Body"). append ("<p> click </p> ");
});
$ ("Div"). bind ("click. plugin", function (){
$ ("Body"). append ("<p> click. plugin </p> ");
});
$ ("Button"). click (function (){
$ ("Div"). trigger ("click! "); // Note the exclamation point after clicking
});
});

When you click the <div> element, the click Event and click. plugin event are triggered simultaneously. If you only click the <button> element, only the click event is triggered instead of the click. plugin event. Note: trigger ("click! ") The exclamation point is used to match all the click methods that are not included in the namespace. To trigger both of them, you only need to remove the exclamation point.
8. About animations in jQuery
(1) jQuery is required for animation effects in standard mode. Otherwise, animation jitter may occur. The standard mode requires that the file header contain the following DTD definition:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Any animation effect in jQuery can be specified with three speed parameters, that is, "slow", "normal", and "fast" (the time length is 0.6 seconds, 0.4 seconds, and 0.2 seconds respectively ). Quotation marks are required when the speed keyword is used, for example, show ("slow"). If a number is used as a time parameter, no quotation marks are required, for example, show (1000 ).
(3) In order to affect the "top", "left", "buttom", and "right" style attributes of an element, you must first set the position style of the element to "relative" or "absolute ".
9. About the load () method
This method is usually used to obtain static data files from the web server.
(1) Use load () to filter the loaded HTML document content
The syntax of the URL parameter of the load () method is "url selector". Note that there is a space between the url and selector. For example, you can use $ ("# xxx"). load ("test.html. para") to parse the content of "para" in the test.html page ");
(2) callback function parameters of the load () method
The load () method provides three callback functions, which represent the content returned by the request, the Request status, and the XMLHttpRequest object. The Code is as follows:
Copy codeThe Code is as follows:
# ("# ResText"). load ("test.html", function (responseText, textStatus, XMLHttpRequest ){
// ResponseText: Content returned by the request
// TextStatus: Request status: success, error, notmodified, and timeout
// XMLHttpRequest: XMLHttpRequest object
});

Note: In the load () method, no matter whether the Ajax request is successful or not, the callback function is triggered after the request is complete. This corresponds to the complete callback function in the $. ajax () method.
10. About the $. get () method
(1) The callback function of this method is called only when the return status of response is success.
(2) The callback function of this method has two parameters, namely, data (which can be an XML file, a JSON file, or an HTML segment), textStatus is the Request status (success, error, notmodified, timeout)
Note that the $. post () method is basically the same as the $. get () method.
11. Content Selector
Content selector: The contains () separator is case sensitive.
12. General Plug-ins
Copy codeThe Code is as follows:
(Function ($ ){
$. Fn. extend ({
"Resize": function (userOptions ){
Var defaultOptions = {height: 100, width: 100 };
Var mergeOptions = $. extend ({}, defaultOptions, userOptions );
Return this. each (function (){
$ (This). animate (mergeOptions, "slow", function (){
$ (This). fadeTo ("slow", ". 70 ")
});
});
}
});
}) (JQuery );

Note:
1. this in Plug-in functions is generally only a jQuery object, for example, this in the sixth row. However, this in this. each indicates a DOM object.