1, about the selector contains special symbols
The selector contains special characters such as ".", "#", "(", "]", which, according to the rules of the consortium, cannot contain these special characters, for example:
Copy Code code as follows:
<div id= "id#b" >bb</div>
<div id= "id[1]" ></div>
If you get it in a normal way, for example:
Copy Code code as follows:
$ ("#id #b");
$ ("#id [1]");
The above code does not get the element correctly, and the correct wording is as follows:
Copy Code code as follows:
$ ("#id \ #b");
$ ("#id \\[1\\]");
2, about the selector contains spaces
Look at the following example, its HTML code is as follows:
Copy Code code 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>
Get them separately using the jquery selector:
Copy Code code as follows:
Alert ($ (". Test:hidden"). length);//Output 4
Alert ($ (". Test:hidden"). length);//Output 3
Different results occur because the descendant selector differs from the filter selector.
Copy Code code as follows:
$ (". Test:hidden"). length;//with spaces
The above code is the hidden element inside the element with the class "Test" selected.
Copy Code code as follows:
$ (". Test:hidden"). length;//with no spaces
And the above code is to select the hidden class "test" element.
3, about Val () method
In jquery, the Val () method reads forward from the last option and is selected if either the value of the option or any one of the text is met, for example:
Copy Code code as follows:
<option value= "No. 1th" >2 </option>
<option value= "No. 2nd" >1 </option>
Whether Val ("number 1th") or Val ("number 2nd") is used, the option that follows is selected
4, about CSS () method
If the value of the parameter is a number, it is automatically converted to a pixel value, and if the attribute contains a "-" symbol such as font-size, Background-color, and so on, if the value of these properties is set without quotation marks, the hump style is used, for example:
Copy Code code as follows:
$ ("P"). CSS ({fontsize: "30px", BackgroundColor: "#888888"});
If you have quotes, you can write "Font-size" or "fontsize", suggesting that you add quotes and develop good habits.
5, about the height () method
(1), after the jQuery1.2 version of the height () method can be used to obtain window and document height.
(2), using the CSS () method to get the height value and the heights () method is the difference is: the CSS () method to get the height value and style of the setting, may get "auto", may get "10px" such as string; and height () Method gets a height value that is the actual height of the element on the page, regardless of the style's setting, and does not take a unit.
6. About the properties of event objects (events)
jquery encapsulates the common properties of event objects so that event handling works well in all browsers without the need for browser type judgments.
(1), Event.type () method
The purpose of this method is to get the type of the event.
Copy Code code as follows:
$ ("a"). Click (Function (event) {
alert (event.type);//Get Event Type
return false;//block link jump
});
The above code returns "Click" when it is run.
(2), Event.preventdefault () method
The purpose of this method is to block the default event behavior. The Preventdefault () method that complies with the Web-code in JavaScript is not valid in IE browser, and jquery encapsulates it to make it compatible with a variety of browsers.
(3), Event.stoppropagation () method
The effect of this method is to prevent event bubbling. The Stoppropagation () method that complies with the Web-code in JavaScript is not valid in IE browser, and jquery encapsulates it to make it compatible with a variety of browsers.
(4), Event.target () method
The purpose of this method is to obtain the element that triggers the event. When jquery encapsulates it, it avoids the differences between browsers.
Copy Code code as follows:
$ ("a[href=http://baidu.com]"). Click (Function (event) {
alert (event.target.href);//Get the HREF attribute value of the <a> element that triggered the event
return false;
});
The above code returns "Http://baidu.com" after running.
(5), Event.relatedtarget () method
In the standard DOM, elements that occur in mouseover and mouseout can be accessed through the Event.target () method, and the related elements are accessed through the Event.relatedtarget () method. Event.relatedtarget () method in mouseover equivalent to IE event.fromelement () method, in the Mouseout equivalent to IE browser event.toelement () method, jquery encapsulates it to make it compatible with a variety of browsers.
(6), Event.pagex () method/Event.pagey () method
The purpose of this method is to obtain the x-coordinate and y-coordinate of the cursor relative to the page. If you are not using jquery, then the IE browser uses the event.x ()/event.y () method in the Firefox browser using the Event.pagex ()/event.pagey () method. If there is a scroll bar on the page, add the height and width of the scroll bar. You should also subtract the default 2px border from the IE browser.
Copy Code code as follows:
$ ("a"). Click (Function (event) {
Alert ("Current mouse position: +event.pagex+", "+event.pagey")//Get the mouse coordinates currently relative to the page
return false;
});
(7), Event.which () method
The purpose of this method is to get the left, middle, and right mouse buttons in the mouse click event, and to get the keyboard keys in the keyboard event.
Copy Code code as follows:
$ (function () {
$ ("Body"). MouseDown (function (e) {
alert (E.which);//1= left mouse button; 2= the middle mouse button; 3= right mouse button
});
});
(8), Event.metakey () method
jquery is also encapsulated for different browsers to explain the <ctrl> keys in the keyboard, and the Event.metakey () method gets <ctrl> keys for keyboard events.
(9), Event.originalevent () method
The purpose of this method is to point to the original event object.
7. About bind () method
(1), binding multiple event types
Copy Code code as follows:
$ (function () {
$ ("div"). Bind ("mouseover mouseout", function () {
$ (this). Toggleclass ("over");
});
});
(2), adding event namespaces
Copy Code code 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");
});
});
Adds a namespace after the bound event type, so that only the namespace can be specified when deleting an event. When you click the <button> element, the namespace for "plugin" is deleted, and the "DblClick" event in the namespace that is not in the "plugin" is still in place.
(3), same event name, different namespace execution method
Copy Code code 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 mark behind the click
});
});
When you click the <div> element, both the click event and the Click.plugin event are triggered. If you click the <button> element only, the Click event is triggered and the Click.plugin event is not triggered. Note that trigger ("click!") The following exclamation point is used to match all click methods that are not included in the namespace. If you need both triggers, just remove the exclamation point.
8, about the animation in jquery
(1), use jquery to do animation effect requirements in standard mode, otherwise it may cause animation jitter. 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, you can specify 3 speed parameters, that is, "slow", "normal", "fast" (the length of time is 0.6 seconds, 0.4 seconds and 0.2 seconds). Use quotes when using the speed keyword, such as show ("slow"), and if you use numbers as a time parameter, you do not need to quote, such as show (1000).
(3), before using the animate () method to move an element, you must first set the position style of the element to "relative" or "" to affect the element's top, left, buttom, and right style properties. Absolute ".
9. About the Load () method
This method is typically used to obtain a static data file from a Web server.
(1) To filter the contents of the loaded HTML document with load ()
The syntax structure of the URL parameter of the load () method is: "URL selector", noting that there is a space between the URL and the selector. For example, you only need to load the contents of class "Para" in the test.html page, you can use $ ("#xxx"). Load ("test.html. para");
(2) parameter of the callback function of the load () method
The load () method provides a callback function that has 3 parameters, representing the requested content, request status, and XMLHttpRequest object, respectively, as follows:
Copy Code code as follows:
# ("#resText"). Load ("test.html", Function (ResponseText, textstatus, XMLHttpRequest) {
ResponseText: Request returned content
Textstatus: Request Status: Success, error, notmodified, timeout 4 kinds
Xmlhttprequest:xmlhttprequest objects
});
Note that in the load () method, the callback function (callback) is triggered, regardless of the success of the AJAX request, as long as the request completes (complete). This corresponds to the complete callback function in the $.ajax () method.
10, about $.get () method
(1) Call the callback function of this method only if the return state of the response is success.
(2), the callback function of this method has two parameters, respectively, is the content returned by data (can be XML document, JSON file, HTML fragment, etc.), Textstatus is the request state (success, error, notmodified, timeout these 4 kinds )
Note that the $.post () method is essentially the same as the $.get () method.
11, about the content selector
Content selector: Contains () selector is case-sensitive.
12, about the usual writing of Plug-ins
Copy Code code 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);
Attention:
1. This in the plug-in function is typically a jquery object, such as this in line sixth. But this in This.each refers to a DOM object.
