Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what are the entry knowledge points of jQuery". In the daily operation, I believe that many people have doubts about the entry knowledge points of jQuery. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the entry knowledge points of jQuery?" Next, please follow the editor to study!

JQuery provides two ways to select html's elements, the first is to use CSS and Xpath selectors to combine to form a string to pass to the jQuery constructor (for example: $("div > ul a"); the second is to use several methods (methods) of the jQuery object. These two methods can also be combined and mixed.

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

At first, we need to choose the list itself. The list has an ID called "orderedlist", and the usual javascript is written as document.getElementById ("orderedlist"). In jQuery, we do this:

$(document) .ready (function () {

$("# orderedlist") .addClass ("red")

})

Here, a CSS-style red from starterkit is attached to orderedlist. So, after you refresh the starterkit.html, you will see that the background color of the first ordered list (ordered list) turns red, while the second ordered list does not change.

Now, let's add some new styles to the child nodes of list.

$(document) .ready (function () {

$("# orderedlist > li") .addClass ("blue")

})

In this way, all li in orderedlist have the style "blue" attached.

Now let's do a more complicated one, switching styles when the mouse is over and away from the li object, but it only works 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 large number of similar examples of CSS and XPath, and more examples and lists can be found here.

Every onXXX event is valid, such as onclick,onchange,onsubmit, etc., and there is an jQuery equivalent representation. Other events, such as ready and hover, also provide methods.

You can find a list of all events at Visual jQuery, under Events.

You can already do a lot of things with these selectors and events, but here's a stronger good thing!

$(document) .ready (function () {

$("# orderedlist") .find ("li") .each (function (I) {

$(this) .html ($(this) .html () + "BAM!" + I)

})

})

Find () lets you do a conditional search in the element you have selected, so $("# orderedlist). Find (" li ") is like $(" # orderedlist li "). The each () method iterates over all the li and can do more processing on that basis. Most methods, such as addClass (), can use their own each (). In this example, html () is used to get the html text of each li, append some text, and set it to the html text of li.

Another task you often encounter is to call some methods on DOM elements that are not overridden by jQuery, and imagine a reset after you have successfully submitted it in AJAX:

$(document) .ready (function () {

/ / use this to reset a single form

$("# reset") .click (function () {

$("# form") [0] .reset ()

})

})

This code selects all the elements whose ID is "form" and call a reset () on the first one. 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 ()

})

})

})

So after you click the Reset link, you select all the form elements in the document and execute reset () on all of them.

Another problem you may have to face is that you don't want certain elements to be selected. JQuery provides filter () and not () methods to solve this problem. Filter () reduces non-conforming selections by filtering expressions, while not () cancels all selections that conform to filtered expressions. Consider an unordered list where you want to select all li elements that have no ul child elements.

$(document) .ready (function () {

$("li") .not (": has (ul)") .css ("border", "1px solid black"); / / the original text is $("li") .not ("[ul]") .css ("border", "1px solid black")

})

This code selects all the li elements and then goes to the li element except for the ul child element. After refreshing the browser, all li elements have a border, with the exception of the li element of the ul child element.

The [expression] syntax in the above code is derived from XPath and can be used as a filter on child elements and attributes (elements and attributes). For example, you may want to select all links with the name attribute:

$(document) .ready (function () {

$("a [name]"). Css ("background-color", "# eee"); / / the original text is "$(" a [@ name] "). Background (" # eee ");" in jQuery1.2 and above, the @ symbol should be removed and the background method is replaced by the css method.

})

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

It is more common to use name to select a link. You may need to select a link with a characteristic href attribute, which may have a different understanding of href in different browsers, so our partial match ("* =") instead of an exact match ("="):

$(document) .ready (function () {

$("a [href*=/content/gallery]") .click (function () {

/ / do something with all links that point somewhere to / content/gallery

})

})

Until now, selectors have been used to select child elements or filter elements. In another case, if you select the previous or next element, such as a FAQ page, the answer will be hidden first. When the question is clicked, the answer will be displayed. The jQuery code is as follows:

$(document) .ready (function () {

$('# faq'). Find ('dd'). Hide (). End (). Find (' dt') .click (function () {

Var answer=$ (this) .next ()

If (answer.is (': visible')) {

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' only selected once, with the end () method, the first find () method ends (undone), so we can continue to find ('dt') later without having to write $(' # faq'). Find ('dt').

In the click event, we use $(this). Next () to find a dd element immediately below the dt, which allows us to quickly select the answer under the clicked question.

In addition to selecting elements of the same level, you can also select elements of the parent. You may want to highlight its parent element-- that is, this paragraph of the article-- when the user hovers over a link in a paragraph of the article. Try this:

$(document) .ready (function () {

$("a") .hover (function () {

$(this) .addClass ("p") ("highlight")

}, function () {

$(this) .removeClass ("p") ("highlight")

})

})

As can be seen from the test results, when you move to a link in a section of the article, the segment it is in is all in highlight style, and then it is restored to its original form after removal.

Before we move on, let's take a look at this step: jQuery makes the code shorter and easier to understand and maintain. here's the acronym for $(document) .ready (callback):

$(function () {)

/ / code to execute when the DOM is ready

})

When applied to our Hello world example, you can do this:

$(function () {)

$("a") .click (function () {

Alert ("Hello world!")

})

})

At this point, the study of "what are the basic knowledge points of jQuery" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.