Errors that are easily overlooked in the development of jquery

1, refer to the <script> tag of the jquery library file, must be placed in reference to the custom script file <script> tag before, otherwise, the object can not be found; it is best to include in the <script src= "Prototype.js" type= "Text/javascript"/>
<script src= "Jquery.js" type= "Text/javascript"/>
<script type= "Text/javascript" >
Jquery.noconflict ();
</script>
<script src= "Myjs.js" type= "Text/javascript"/>
When using the JQuery method, you must use jquery instead of $ to invoke it.

2. Basic selector: Tag name, ${"P"};id selector, ${"#idname"}; class selector, ${". ClassName"}.

3, CSS selectors, for instance
$ (document). Ready (function () {
$ ("#aSelect > Li"). addclass ("AClass");
$ ("#aSelect li:not (. aclass)"). AddClass ("Otherclass");
});
The > in the second row above is the element combination, looking for all the list items in the child element (>) of the element with ID aselect. This child element, which does not contain a grandchild element.
The Aselect Li in the third row above represents all the subordinate list items that look for an element with ID Aselect, including the grandchild element.

4, the attribute selector: $ ("Img[alt") is the selection of all the image elements with the ALT attribute, in addition, the property selector allows the syntax similar to the regular expression to identify the start (^) and end ($) of the string, and can also use (*) to represent anywhere in the string value, applicable (!) To represent the opposite value.
e.g.:
$ (document). Ready (function () {
$ ("A[href^=mailto:]"). AddClass ("mailto");

$ ("a[href$=.pdf]"). AddClass ("PDFlink"); $ ("A[href^=http][href*=henry]"). AddClass ("Henrylink");

});

5, custom selectors, the syntax is the same as the pseudo-class selector syntax in CSS, starting with a colon, for example, we want to select the first item from a collection, you can use the following code:
$ ("A[href^=http]:eq (0)") ...
$ ("Div:first-child") ...
The other two more commonly used custom selectors are: odd and: even, which correspond to select odd and even rows respectively.
$ ("Table Tr:odd"). AddClass ("odd");
$ ("Table Tr:even"). AddClass ("even");
Guess: $ ("Td:contains (A)"). CSS ("Color", "red"); what's the effect?

6, based on the form of the selector, a simple list of it, the conscientious will understand through the practice.
: Text:checkbox:radio:image:submit:reset:p Assword
: file:input:button:enabled:d isabled:checked:selected
These selectors can be used chained, such as $ (': radio:checked '), $ (': text:enabled '), and so on.

7. The same points and differences between. Find () and. Filter (), they are all traversal elements, the difference is that find is a subset operation, and filter is the operation of the collection element itself. Like what
var $find =$ ("div"). Find (". Name"); Is the manipulation of elements within a div of class name,
var filter=$ ("div"). Filter (". Name"), which is the operation of all div with class name.

8. Next () next sibling element;. Nextall () All of the sibling elements below;
. Prev () previous sibling element;. Prevall () All of the sibling elements above;
. Siblings () all sibling elements;. Andself () contains itself;
. Parent () child elements;. Children () children;
. End () Restores the last occurrence of a collection of matching elements, returning to the previous matching element collection state, returning a collection of matching elements.

9. jquery provides the corresponding shorthand event method for the standard DOM event:
. blur change. Dbclick. Error. Focus KeyDown. keypress. keyup. Load. Select. Scro ll
. MouseDown. mouseover. mouseout. MouseUp. Resize. MouseMove. Unload

10. Composite Events
. Toggle (Fun1,fun2,fun3 ...) Parameters are functions, the first click to execute FUN1, the second click to execute fun2, and so on, and so on, after the execution, back to the beginning of fun1.
. Hover (FUN1,FUN2), when the mouse moves above a matching element (over), the first specified function is triggered. When the mouse moves out of this element (out), the specified second function is triggered.

11, although it is difficult to explain, but it is easy to imagine, an element in the div is clicked, but we only want to perform the div Click event: (Interested in understanding event capture and event bubbling)
$ (document). Ready (function () {
$ ("#divId"). Click (Function (event) {
if (event.target==this) {
Here is the event execution code ...
}
});
});
There are also ways to block event bubbling directly. Stoppropagation ()

$ (document). Ready (function () {
$ ("#divId. Button"). Click (Function (event) {
Here is the event execution code ...
Event.stoppropagation ();
});
});
What I'm going to say here is that the above two examples, which correspond to event capture and event bubbling, are not the same thing.

12, remove the event handler, directly look at the code, very intuitive
$ (function () {
$ ("#largeDiv"). Click (Function (event) {
Event handling code
});
$ ("#largeDiv-firstchild"). Click (function () {
$ ("#largeDiv"). Unbind ("click");
});
});
But if the code inside the click is going to be executed, part of it will not be executed. Unbind () can only be removed, in fact, it is possible to solve the event, the individual name is good

$ (function () {
$ ("#largeDiv"). Bind (' Click.first ', function (event) {
First event handling code
});
$ ("#largeDiv"). Bind (' Click.second ', function (event) {
Second event handling code
}); $ ("#largeDiv-firstchild"). Click (function () {
$ ("#largeDiv"). Unbind ("Click.first");
});
});

13. Bind (),. One () executes only once, and. Trigger (' click ') is an event that mimics the user's click. the trigger () method provides a set of shorthand for the same as the Bind method, but the result is not the same, only triggering the action instead of binding the behavior: $ (" #divname "). Click ();

14.. show (). Hide (). FadeIn (). FadeOut () can be used in different forms to achieve display and hide effects. Do your own research, relatively simple.