Detailed explanation of jQuery selector usage examples

Detailed explanation of jQuery selector usage examples_jquery

WBOY

Release： 2016-05-16 15:25:18

Original

1412 people have browsed it

The examples in this article describe the usage of jQuery selector. Share it with everyone for your reference, the details are as follows:

jQuery uses two methods to select html elements. The first one uses CSS and Xpath selectors to combine to form a string that is sent to jQuery's constructor (such as: $("div > ul a")) ; The second method is to use several methods of the jQuery object. These two methods can also be used in combination.

There are many ways to select using CSS and XPath selectors. For detailed CSS selectors, please refer to the relevant articles on this site.

First, let’s look at getting the element through its ID: $( "#id" ). Add # in front of the name to indicate that it is an id. Be careful not to lose the quotation marks.

Add a span element with the id of msg to the page and display helloworld in the span element. This can be achieved as follows:

<html>
<head>
  <title>Hello</title>
  <script src="jquery-1.2.5.js" type="text/javascript"></script>
   <script type="text/javascript">
    $( function() {
     $("#msg").html("Hello, world."); } );
   </script>
  </head>
<body>
  <span id="msg"/>
</body>
</html>

Copy after login

Note: #id needs to be enclosed in quotes, and the html function with parameters is used to assign a value to the innerHTML of the element.

Next example:

For example, we have a list whose ID is orderedlist, then the jQuery to get the reference of this list is $("#orderedlist"), and add a class attribute $("#orderedlist") with a value of red. addClass("red"), the addClass function is used to add CSS settings to elements. Get the reference of the last li in the list, $( "#orderedlist li:last" ).

The following example changes the content of the last li to hello, world.

<html>
<head>
  <title>Hello</title>
  <script src="jquery-1.2.5.js" type="text/javascript"></script>
  <script type="text/javascript">
    $( function() {
     alert("wait");
     $( "#orderedlist li:last" ).html("hello, world.");
    } );
  </script>
</head>
<body>
  <ol id="orderedlist">
   <li>First element</li>
   <li>Second element</li>
   <li>Third element</li>
  </ol>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone in jQuery programming.