jQuery - Selectors-alljchome-开发者的教程家园

jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery - Utilities

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - Selectors

The most important functionapty of jQuery is provided by it s Selectors. This tutorial will explain jQuery Selectors with simple examples covering all the three standard selectors.

jQuery Selectors

jQuery Selectors are used to select HTML element(s) from an HTML document. Consider an HTML document is given and you need to select all the from this document. This is where jQuery Selectors will help.

jQuery Selectors can find HTML elements (ie. Select HTML elements) based on the following:

HTML element Name

Element ID

Element Class

Element attribute name

Element attribute value

Many more criteria

The jQuery pbrary harnesses the power of Cascading Style Sheets (CSS) selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM).

jQuery Selectors works in very similar way on an HTML document pke an SQL Select Statement works on a Database to select the records.

jQuery Selector Syntax

Following is the jQuery Selector Syntax for selecting HTML elements:

$(document).ready(function(){
    $(selector)
});

A jQuery selector starts with a dollar sign $ and then we put a selector inside the braces (). Here $() is called factory function, which makes use of following three building blocks while selecting elements in a given document:

Selector Name	Description
The element Selector	Represents an HTML element name available in the DOM. For example $( p ) selects all paragraphs <p> in the document.
The #id Selector	Represents a HTML element available with the given ID in the DOM. For example $( #some-id ) selects the single element in the document that has some-id as element Id.
The .class Selector	Represents a HTML elements available with the given class in the DOM. For example $( .some-class ) selects all elements in the document that have a class of some-class.

All the above selectors can be used either on their own or in combination with other selectors. All the jQuery selectors are based on the same principle except some tweaking.

The element Selector

The jQuery element selector selects HTML element(s) based on the element name. Following is a simple syntax of an element selector:

$(document).ready(function(){
    $("Html Element Name")
});

Please note while using element name as jQuery Selector, we are not giving angle braces alongwith the element. For example, we are giving only plain p instead of .

Examples

Following is an example to select all the  elements from an HTML document and then change the background color of those paragraphs. You will not see any  element in the output generated by this example. You can also change the code to use different element names as selector and then cpck the icon to verify the result.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("p").css("background-color", "yellow");
   });
</script>
</head>
<body>
   <h1>jQuery element Selector</h1>

   <p>This is p tag</p>
   <span>This is span tag</span>
   <span>This is span tag</span>
</body>
</html>

The #id Selector

The jQuery #id selector selects an HTML element based on the element id attribute. Following is a simple syntax of a #id selector:

$(document).ready(function(){
    $("#id of the element")
});

To use jQuery #id selector, you need to make sure that id attribute should be uniquely assigned to all the DOM elements. If your elements will have similar ids then it will not produce correct result.

Examples

Following is an example to select the  element whose id is foo and change the background color of those paragraphs.. You can also change the code to use different element id attribute as selector and then cpck the icon to verify the result.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#foo").css("background-color", "yellow");
   });
</script>
</head>
<body>
   <h1>jQuery #id Selector</h1>

   <p id="foo">This is foo p tag</p>
   <span id="bar">This is bar span tag</span>
   <span id="bill">This is bill span tag</span>
</body>
</html>

The .class Selector

The jQuery .class selector selects HTML element(s) based on the element class attribute. Following is a simple syntax of a .class selector:

$(document).ready(function(){
    $(".class of the element")
});

Because a class can be assigned to multiple HTML elements with in an HTML document, so it is very much possible to find out multiple elements with a single .class selector statement.

Examples

Following is an example to select all the elements whose class is foo and change the background color of those elements. You can also change the code to use different element class name as selector and then cpck the icon to verify the result.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $(".foo").css("background-color", "yellow");
   });
</script>
</head>
<body>
   <h1>jQuery .class Selector</h1>

   <p class="foo">This is foo p tag</p>
   <p class="foo">This is one more foo p tag</p>
   <span class="bar">This is bar span tag</span>
   <span class="bill">This is bill span tag</span>
</body>
</html>

So far we have covered only three standard jQuery Selectors. For a complete detail of all these jQuery selectors, you can go to through jQuery Selectors Reference.

jQuery - Selectors

jQuery Selectors

jQuery Selector Syntax

The element Selector

Examples

The #id Selector

Examples

The .class Selector

Examples

友情链接