jQuery several selectors and examples detailed _jquery_ Script home
Script house Common server software
Quick navigation
Your location: Home page → Network programming → JavaScript → javascript class library → jquery→ jQuery selector

Several selectors and examples of jQuery detailed explanation

Updated: May 19, 2023 10:06:14 Author: Wisdom Haohai
This article mainly introduces the jQuery selectors detailed solution,Query selector based on the element id, class, type, attribute, attribute value, etc. "find" (or select) HTML elements, it is based on the existing CSS selectors, in addition, it has some custom selectors, need friends can refer to the next

The jQuery selector allows you to manipulate groups of HTML elements or individual elements.

jQuery selector

The jQuery selector allows you to manipulate groups of HTML elements or individual elements.

The jQuery selector "finds" (or selects) HTML elements based on their id, class, type, attribute, attribute value, and so on. It is based on existing CSS selectors, in addition to which it has a number of custom selectors.

All selectors in jQuery start with a dollar sign: $().

Element selector

The jQuery element selector selects elements based on their name.

Select all <p> elements in the page:

$("p")

Living example

After the user clicks the button, all <p> elements are hidden:

Living example

$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });

#id selector

The jQuery #id selector selects the specified element through the id attribute of the HTML element.

The id of the element on the page should be unique, so you need to go through the #id selector to select the unique element on the page.

The syntax for selecting elements by id is as follows:

$("#test")

Living example

When the user clicks the button, the element with the id="test" attribute is hidden:

Living example

$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });

.class selector

The jQuery class selector can look for elements by the specified class.

The syntax is as follows:

$(".test")

Living example

All elements with the class="test" attribute are hidden after the user clicks the button:

Living example

$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });

More examples 

grammar Description Living example
$(" * ") Select all elements Online instance
$(this) Selects the current HTML element Online instance
$("p.intro") Select the <p> element whose class is intro Online instance
$("p:first") Select the first <p> element Online instance
$("ul li:first") Select the first <li> element of the first <ul> element Online instance
$("ul li:first-child") Selects the first <li> element of each <ul> element Online instance
$("[href]") Select the element with the href attribute Online instance
$("a[target='_blank']") Selects all <a> elements whose target attribute value is equal to "_blank" Online instance
$("a[target!='_blank']") Selects all <a> elements whose target attribute value is not equal to "_blank" Online instance
$(":button") Select all <input> elements and <button> elements whose type="button" Online instance
$("tr:even") Select the <tr> element in an even position Online instance
$("tr:odd") Select the <tr> element in an odd position Online instance

Use jQuery functions in separate files

If your website contains many pages and you want your jQuery functions to be easy to maintain, put your jQuery functions in a separate.js file.

When we demonstrate jQuery in this tutorial, we add functions directly to the <head> section. However, it would be better to put them in a separate file, like this (using the src attribute to reference the file) :

Living example

The < head > < script SRC = "/ / cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" > < / script > < script src="my_jquery_functions.js"></script> </head>

To this article about jQuery several selectors detailed explanation of the article is introduced to this, more related jQuery selector content please search script House previous articles or continue to browse the following related articles hope that you will support script House in the future!

Articles you may be interested in:

Related article

Latest comments