This code adds a background color to all links with the name attribute

Using selectors and events for the jquery start-up tutorial
jquery offers two ways to choose the elements of HTML:

• The first is to combine CSS and XPath selectors to form a string to be transferred to the jquery constructor (for example: $ ("DIV > Ul a"));
• The second is to use several methods (methods) of the JQuery object. Both of these methods can also be combined to use together.

To test these selectors, let's try to select and modify the first ordered list in our starterkit.html.

In the beginning, we need to choose the list itself, the list has an ID called "orderedlist", the usual JavaScript notation is document.getElementById ("Orderedlist"). In jquery, We do this:

$ (document). Ready (function () {
$ ("#orderedlist"). AddClass ("Red");
});

Here, a CSS style red in Starterkit is appended to the Orderedlist (translator Keel Note: Refer to the CORE.CSS in the CSS Catalog in the test package, which defines the red style). Therefore, after you refresh the starterkit.html, you will see that the first sequence list (ordered list) background color becomes red, and the second ordered table does not change.
Now, let's add some new styles to the child nodes of the list.

$ (document). Ready (function () {
$ ("#orderedlist > Li"). addclass ("Blue");
});

In this way, all Li in the orderedlist is appended with the style "blue".

Now let's do something a little more complicated, when we put the mouse on top of the Li object and switch it off, but it only takes effect on the last element of the list.

$ (document). Ready (function () {
$ ("#orderedlist li:last"). Hover (function () {
$ (this). AddClass ("green");
}, function () {
$ (this). Removeclass ("green");
});
});

There are a number of similar CSS and XPath examples, and more examples and lists can be found here. (Translator Keel Note: The introduction to see this article, practice in the individual, want to understand more after the introduction, so this passage of a few links sooner or later is necessary to see! ）

Each onxxx event is valid, such as Onclick,onchange,onsubmit, and so on, there is the jquery equivalent representation method (translator Keel note: jquery does not like onxxx, so all changed to XXX, removed on). Other events, such as ready and hover, also provide the appropriate methods.

You can find the full list of events in visual jquery under the Events section.

With these selectors and events you can already do a lot of things, but here's a stronger good stuff!

$ (document). Ready (function () {
$ ("#orderedlist"). Find ("Li"). each (function (i) {
$ (this). HTML ($ (this). html () + "bam!" + i);
});
});

• Find () lets you make a conditional lookup in an element that has already been selected, so $ ("#orderedlist"). Find ("Li") is like $ ("#orderedlist Li").
• Each () iterates over all of the Li, and can do more processing on that basis. Most of the methods, such as addclass (), can be used with their own each ().
• In this example, HTML () is used to get each Li's HTML text, append some text, and set it as the Li HTML text. (Translator Keel Note: From this example, you can see that the. html () method is to get the HTML code of the object, and the. html (' xxx ') is the HTML code that sets ' xxx ' as the object)

Another task that is often encountered is to call some methods on a DOM element that is not covered by jquery, and imagine a reset after you have successfully committed the Ajax method:

$ (document). Ready (function () {
Use this to reset a single form
$ ("#reset"). Click (function () {
$ ("#form") [0].reset ();
});
});

(Translator Keel Note: Here the author will form the ID also written form, the source file has <form id= "form", this is a very bad wording, you can change this ID to Form1 or testform, and then use $ ("#form1") or $ ( "#testForm") to represent it, and then to test it. ）

This code selects all elements with the id "form" and, on its first call, a reset (). If you have more than one form, you can do this:

$ (document). Ready (function () {
Use this to reset several forms at once
$ ("#reset"). Click (function () {
$ ("form"). each (function () {
This.reset ();
});
});
});

(Translator Keel Note: Please be sure to personally write these codes in Custom.js and test the effect on starterkit.html to be able to experience!) Observe starterkit.html's HTML code if necessary)

After you click the Reset link, you select all the form elements in the document and perform a reset () on them.

Another problem you may have to face is that you don't want certain elements to be selected. JQuery provides the filter () and not () methods to solve this problem. Filter () reduces the selection of non-conforming items by filtering the expression, and not () is used to cancel all selected items that conform to the filter expression. Consider an unordered list, and you want to select all LI elements that have no UL child elements.

$ (document). Ready (function () {
$ ("Li"). Not ("[UL]"). CSS ("Border", "1px solid black");
});

This code selects all the LI elements and then removes the LI element without the UL sub-elements. After the browser is refreshed, all LI elements have a border, except for the LI element of the UL child element.

(Translator Keel Note: Please pay attention to experience the most convenient CSS () method, and again remind please be sure to actually test the observation effect, for example, a CSS style? Add a CSS style? Like this: $ ("Li"). Not ("[UL]"). CSS ("Border", "1px solid Black"). CSS ("Color", "red");)

The expression syntax in the above code is from XPath and can be used as a filter on child elements and attributes (elements and attributes), such as you might want to select all the links with the name attribute:

$ (document). Ready (function () {
$ ("a[@name]"). Background ("#eee");
});

This code adds a background color to all links with the name attribute. (Translator keel Note: This color is not obvious, it is recommended to write $ ("a[@name]"). Background ("red");)

The more common case is to select a link with the name, you may need to select a link with a characteristic href attribute, which may be inconsistent with the HREF's understanding under different browsers, so our partial match ("*=") replaces the exact match ("="):

$ (document). Ready (function () {
$ ("a[@href *=/content/gallery]"). Click (function () {
Do something with all links, point somewhere to/content/gallery
});
});

So far, selectors have been used to select child elements or filter elements. Another situation is to select the previous or next element, such as a FAQ page, the answer will be hidden first, when the question clicked, the answer is displayed, the jquery code is as follows:

        $ (' #faq '). Find (' dd '). Hide (). End (). Find (' DT '). Click (function () {
         var answer = $ (this). Next ();
         if (answer.is (': Visible ')) {
         & nbsp   Answer.slideup ();
         } else {
             Answer.slide Down ();
         }
     });
});

Here we use some chained expressions to reduce the amount of code, and look more intuitive and easier to understand. Like ' #faq ' only once, using the end () method, the first find () method ends (undone), so we can then continue to find (' DT ') in the back, without having to write $ (' #faq '). Find (' DT ').

In the Click event, we use $ (this). Next () 2881064151来 find the DD element immediately below the DT, which allows us to quickly select the answer below the clicked question.

(Translator Keel Note: This example is really cool, the answer in the FAQ can be shrunk!) There are a lot of places we need to digest from the idea of using next () to realize these effects, note the IF (answer.is (': Visible ') usage, pay attention to Answer.slideup (); don't know where to go check out the two must-see API documents I mentioned at the beginning.

In addition to selecting elements of the same level, you can also select the elements of the parent. You might want to try this when the user mouse moves to a link in a paragraph of the article, and its parent element-that is, this paragraph of the article-is highlighted:

$ (document). Ready (function () {
$ ("a"). Hover (function () {
$ (this). Parents ("P"). AddClass ("highlight");
}, function () {
$ (this). Parents ("P"). Removeclass ("highlight");
});
});

The test effect can be seen, moving to a paragraph of the article link, it is in the paragraph full use of the highlight style, removed and then back to the same.

(Translator Keel Note: Highlight is defined in the CORE.CSS style, you can also change it, note that there is a second function () this is the characteristics of the hover method, please check the API documentation for hover, the above also has an example of the explanation)
Let's take a look at this step before we move on: jquery makes the code shorter and easier to understand and maintain, and here is the $ (document). Ready (callback) Abbreviation:

$ (function () {
Code to execute when the DOM was ready
});

Applied to our Hello World example, this can be:

$ (function () {
$ ("a"). Click (function () {
Alert ("Hello world!");
});
});

Now that we have these basic knowledge in hand, we can further explore other aspects of things, starting with Ajax!

This code adds a background color to all links with the name attribute