JQuery absolute entry page 1/2

1. jQuery GO
JQuery provides a powerful way to read and process the document DOM, making it easy to operate the document DOM dynamically.
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("A"). click (function (){
Alert ("Hello world! ");
});
});

Clicking any connection in the document triggers the alert () event.
$ Is an alias for the jQuery class. Therefore, $ () constructs a new jQuery object. The function click () is a method of this jQuery object. It binds a click event to all selected tags (all a tags here ), the provided alert method is executed when the event is triggered. this encoding method is more similar to separation of structure and behavior.
2. selector and event
JQuery provides two methods to select html elements. The first method is to combine CSS with the Xpath selector to form a string to be transmitted to the jQuery Constructor (for example: $ ("div> ul a"); the second is to use several methods of the jQuery object ). These two methods can also be combined for hybrid use.
Copy codeThe Code is as follows:
<Ul id = "orderedlist">
<Li> food </li>
<Li> clothing </li>
<Li> electronics </li>
</Ul>

Use jQuery to search for ul in the document as follows: replace js document. getElementById ('orderlist ');
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("# Orderedlist"). addClass ("red ");
});

$ ("#...") To find the element of the specified ID.
Add a style for its subnodes as follows:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("# Orderedlist> li"). addClass ("blue ");
});

When you move the mouse over or remove the <li> item, the style is switched as follows:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("# Orderedlist li: last"). hover (function (){
$ (This). addClass ("green ");
}, Function (){
$ (This). removeClass ("green ");
});
});

$ (# Orderedlist li) differs from $ ("# orderedlist> li"). The former is all matched child elements under the parent element, only the matching elements in its child elements.
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("# Orderedlist"). find ("li"). each (function (I ){
Certificate (this).html (certificate (this).html () + "BAM! "+ I );
});
});

Find () allows you to search for conditions in the selected element, so $ ("# orderedlist). find (" li ") is like $ (" # orderedlist li. The each () method iterates all the li resources and can perform more processing on this basis. Most methods, such as addClass (), can use their own each (). In this example, html () is used to obtain the html text of each li, append some text, and set it to the html text of li.
To reset a form after an ajax request is submitted, follow these steps:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
// Use this to reset a single form
$ ("# Reset"). click (function (){
$ ("# Form") [0]. reset ();
});
});

Of course, you can reset a form.
Copy codeThe Code is as follows:
$ (Document). ready (function (){
// Use this to reset several forms at once
$ ("# Reset"). click (function (){
$ ("Form"). each (function (){
This. reset ();
});
});
});

Filter Selector
Another problem you may want to face is that you do not want certain elements to be selected. JQuery provides the filter () and not () methods to solve this problem. Filter () uses a filter expression to reduce the selected items that do not match. not () is used to cancel all selected items that match the filter expression. consider an unordered list. You want to select all li elements without ul sub-elements.
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("Li"). not ("[ul]" ).css ("border", "1px solid black ");
});

In the above Code, the [expression] syntax comes from XPath and can be used as a filter on the child elements and attributes (elements and attributes). For example, you may want to select all links with the name attribute:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("A [name]"). background ("# eee"); // the original file is "$ (" a [@ name] "). background ("# eee"); "in jQuery1.2 and later versions, the @ symbol should be removed
});

A more common scenario is to select links by name. You may need to select a link with the href attribute, which may have different href understandings in different browsers, therefore, our partial match ("* =") [contains] instead of full match ("= "):
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("A [href * =/content/gallery]"). click (function (){
// Do something with all links that point somewhere to/content/gallery
});
});

Up to now, selectors are used to select child elements or filter elements. Another scenario is to select the previous or next element. For example, on a FAQ page, the answer is hidden first. When a question is clicked, the answer is displayed. The jQuery code is as follows:Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ('# Faq'). find ('dd'). hide (). end (). find ('dt'). click (function (){
Var answer = $ (this). next ();
If (answer. is (': visable ')){
Answer. slideUp ();
} Else {
Answer. slideDown ();
}
});
});

Here we use some chained expressions to reduce the amount of code, and it looks more intuitive and easier to understand. Like '# faq', it is selected only once. Using the end () method, the first find () method will end (undone ), therefore, we can continue to find ('dt') later without writing $ ('# faq '). find ('dt ').