jquery precautions and common syntax summary_jquery

1. Regarding special symbols contained in the selector
The selector contains special characters such as ".", "#", "(", "]". According to W3C regulations, the attribute value is It cannot contain these special characters, for example:

Copy code The code is as follows:

bb

If you follow the normal way Get, for example:

Copy code The code is as follows:

$("#id#b" );
$("#id[1]");

The above code cannot correctly obtain the element. The correct writing method is as follows:

Copy code The code is as follows:

$("#id\#b");
$("#id\[1\] ");

2. Regarding
containing spaces in the selector, look at the example below. Its HTML code is as follows:

Copy code The code is as follows:

aa

bb

cc div>

dd

ee

ff

Select using jquery Get them separately:

Copy code The code is as follows:

alert($(".test :hidden").length);//Output 4
alert($(".test:hidden").length);//Output 3

The reason why there are different results , because the descendant selector is different from the filter selector.

Copy code The code is as follows:

$(".test :hidden").length; //

with spaces. The above code selects the hidden elements inside the element with class "test".

Copy code The code is as follows:

$(".test:hidden").length; //

without spaces. The above code selects the hidden element with class "test".
3. About the val() method
In jquery, the val() method reads forward from the last option. If any of the value or text of the option matches, it will is selected, for example:

Copy code The code is as follows:

No. 2
No. 1

Regardless of using val("No. 1") Or val("No. 2"), the latter option will be selected
4. About the css() method
If the parameter value is a number, it will be automatically converted to a pixel value; if There is a "-" symbol in the attribute, such as font-size, background-color and other attributes. If you set the value of these attributes without quotation marks, you must use camel case writing, for example:

Copy code The code is as follows:

$("p").css({fontSize:"30px", backgroundColor:" #888888"});

If you include quotation marks, you can write it as "font-size" or "fontSize". It is recommended that you add quotation marks to develop 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: the height value obtained by the css() method is related to the setting of the style. You may get "auto" or you may get "10px" " and other strings; and the height value obtained by the height() method is the actual height of the element on the page, regardless of the style setting, and does not have a unit.
6. About the properties of the event object (event)
jQuery encapsulates the common properties of the event object, so that event processing can run normally in all major browsers without the need for Browser type determination.
(1), event.type() method
The function of this method is to obtain the type of event.

Copy code The code is as follows:

$("a").click(function(event ) {
alert(event.type);//Get event type
return false;//Prevent link jump
});

The above code will return after running "click".
(2), event.preventDefault() method
The function of this method is to prevent the default event behavior. The preventDefault() method in JavaScript that complies with the W3C specification is invalid in the IE browser. jQuery encapsulates it to make it compatible with various browsers.
(3), event.stopPropagation() method
The function of this method is to prevent events from bubbling. The stopPropagation() method in JavaScript that complies with W3C specifications is invalid in IE browser. jQuery encapsulates it to make it compatible with various browsers.
(4), event.target() method
The function of this method is to obtain the element that triggers the event. After jQuery encapsulates it, it avoids the differences between different browsers.

Copy code The code is as follows:

$("a[href=http://baidu .com]").click(function(event) {
alert(event.target.href);//Get the href attribute value of the element that triggered the event
return false;
} );

After the above code is run, it returns "http://baidu.com".
(5), event.relatedTarget() method
In the standard DOM, elements where mouseover and mouseout occur can be accessed through the event.target() method, and related elements are accessed through the event.relatedTarget() method. accessed. The event.relatedTarget() method in mouseover is equivalent to the event.fromElement() method of IE browser, and in mouseout it is equivalent to the event.toElement() method of IE browser. jQuery encapsulates it to make it compatible with various kind of browser.
(6), event.pageX() method / event.pageY() method
The function of this method is to obtain the x-coordinate and y-coordinate of the cursor relative to the page. If jquery is not used, the event.x()/event.y() method is used in the IE browser, and the event.pageX()/event.pageY() method is used in the Firefox browser. If there are scroll bars on the page, also add the height and width of the scroll bars. In IE browser, the default 2px border should also be subtracted.

Copy code The code is as follows:

$("a").click(function(event ) {
alert("Current mouse position: " event.pageX ", " event.pageY);//Get the current coordinates of the mouse relative to the page
return false;
});

(7), event.which() method
The function of this method is to obtain the left, middle, and right buttons of the mouse in the mouse click event; to obtain it in the keyboard event Keyboard keys.

Copy code The code is as follows:

$(function() {
$(" body").mousedown(function(e) {
alert(e.which);//1=left mouse button left; 2=middle mouse button; 3=right mouse button
});
} );

(8), event.metaKey() method
Different browsers have different interpretations of the Encapsulate and specify the event.metaKey() method to obtain the key in keyboard events.
(9), event.originalEvent() method
The function of this method is to point to the original event object.
7. About the bind() method
(1), binding multiple event types

Copy code The code is as follows:

$(function() {
$("div").bind("mouseover mouseout", function() {
$(this ).toggleClass("over");
});
});

(2), add event namespace

Copy code The code is as follows:

$ (function() {
$("div").bind("click.plugin", function() {
$("body").append("

click

" );
});
$("div").bind("mouseover.plugin", function() {
$("body").append("

mouseover p>");
});
$("div").bind("dblclick", function() {
$("body").append("

dblclick");
});
$("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 an event. After clicking the element, the "plugin" namespace is deleted, but the "dblclick" event that is not in the "plugin" namespace still exists.
(3), same event name, different namespace execution methods

Copy code The code is as follows:

$(function() {
$("div").bind("click", function() {
$("body").append("

click p>");
});
$("div").bind("click.plugin", function() {
$("body").append("

click.plugin

");
});
$("button").click(function() {
$("div").trigger("click!"); //Pay attention to the exclamation point after click
});
});

When the

element is clicked, the click event and click.plugin event will be triggered at the same time. If you just click the

element, only the click event is triggered, not the click.plugin event. Note that the exclamation mark after trigger("click!") matches all click methods that are not included in the namespace. If you need to trigger both, just remove the exclamation mark.
8. About animation in jQuery
(1). Use jQuery to create animation effects in standard mode, otherwise it may cause animation jitter. Standard mode requires the file header to contain the following DTD definition:

(2). Any animation effect in jQuery can specify 3 speed parameters, namely "slow", "normal", and "fast" (the time length is respectively are 0.6 seconds, 0.4 seconds and 0.2 seconds). When using the speed keyword, quote it, such as show("slow"). If you use a number as the time parameter, you don't need to quote it, such as show(1000).
(3). Before using the animate() method to animate an element, in order to affect the "top", "left", "buttom", and "right" style attributes of the element, you must first change the position style of the element. Set 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 content of the loaded HTML document
At this time, the syntax structure of the URL parameter of the load() method is: "url selector". Note that there is a space between url and selector. For example, if you only need to load the content with class "para" in the test.html page, you can use the $("#xxx").load("test.html .para");
(2), load() method Parameters of the callback function
The callback function provided by the load() method has 3 parameters, which respectively represent the content returned by the request, the request status and the XMLHttpRequest object. The code is as follows:

Copy code The code is as follows:

#("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest) {
//responseText: Content returned by the request
//textStatus: Request status: 4 types: success, error, notmodified, timeout
//XMLHttpRequest: XMLHttpRequest object
});

Note that in the load() method, no matter whether the Ajax request is successful or not, the callback function (callback) will be triggered as long as the request is completed. This corresponds to the complete callback function in the $.ajax() method.
10. About the $.get() method
(1). The callback function of this method is only called when the return status of the response is success.
(2). The callback function of this method has two parameters, namely data, which is the returned content (can be an XML document, JSON file, HTML fragment, etc.), and textStatus, which is the request status (success, error, notmodified, 4 types of timeout)
Note that the $.post() method is basically the same as the $.get() method.
11. About the content selector
Content selector: the contains() selector is case-sensitive.
12. About the usual way of writing plug-ins

Copy the code The 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 the plug-in function is generally just a jQuery object, such as this in the sixth line. But this in this.each refers to the DOM object.