Home Web Front-end JS Tutorial jquery selector (common selector description)_jquery

jquery selector (common selector description)_jquery

May 16, 2016 pm 06:19 PM
Selector

Basic selector:

$("#myELement") Select the element whose id value is equal to myElement. The id value cannot be repeated. There can only be one id value myElement in the document, so what you get is The only element

$("div")                                                                                                                  ,                                       out out out  through           through  -             off out of div tag element is returned. >
$("*") Select all elements in the document

You can use a variety of selection methods for joint selection: For example, $("#myELement,div,.myclass")


Cascading selector:

$("form input") Select all input elements in form elements
$("#main > *") Select all child elements with the id value of main

$("label input") Select the next input element node of all label elements

After testing, the selector returns the label after the label All input tag elements directly followed by an input tag

$("#prev ~ div") Sibling selector

This selector returns all the tag elements whose id is prev. DIV tags of the same parent element


Basic filtering selector:

$ ("tr: first") Select the first


🎜>$("tr:last")                                                                                                                                                                              Select the last of all tr ​​elements

$("input:not(:checked) span")                               All input elements

$("tr:even") Select the 0th, 2nd, 4th... elements of all tr ​​elements (note: because when multiple elements are selected, Array, so the sequence number starts from 0)

$("tr:odd")                                                                                                                                                                                                                                        can select the 1st, 3rd, 5th... ... elements of all tr ​​elements

$ ("TD: EQ (2)") Select the TD element with a serial number 2 in all TD elements

$ ("td: gt (4)") Select all TDs with a sequence number in the TD element greater than 4 Element $ ("td: ll (4)") Select all TD elements with a serial number in the TD element less than 4

$ (": header")

$ ("div:animated")


Content filter selector:


$("div:contains('John')") Select all divs that contain John text Elements
$("td:empty") Select all empty (not including text nodes) td element array
$("div:has(p)") Select all div elements containing p tags

$("td:parent") Select all element arrays with td as the parent node


Visual filter selector:


$("div:hidden") Select all hidden div elements
$("div:visible") Select all visible div elements

Attribute filter selector:


$("div") Select all div elements containing the id attribute
$("input[name='newsletter']") Select All input elements whose name attribute is equal to 'newsletter'
$("input[name!='newsletter']") Select all input elements whose name attribute is not equal to 'newsletter'

$("input[name^='news']") Select all input elements whose name attribute starts with 'news'

$("input[name$='news']") Select all Input elements whose name attribute ends with 'news'

$("input[name*='man']") Select all input elements whose name attribute contains 'news'

$( "input[name$='man']") You can use multiple attributes for joint selection. This selector gets all the


child elements that contain the id attribute and the attribute ends with man. Filter selector:


$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n 1)" )

$("div span:first-child") Returns an array of the first child nodes of all div elements

$("div span:last-child") Returns all The array of the last node of the div element

$("div button:only-child") Returns the array of all child nodes that have only one child node in all divs

Form element selector:

$(":input") Select all form input elements, including input, textarea, select and button

$(":text") Select all text input elements

$(":password") Select all password input elements

$(":radio") Select all radio input elements

$(":checkbox")                                                                                           can select all checkbox input elements

$ (":submit")                                                         can be selected in all. Elements

$(":reset") Select all reset input elements

$(":button") Select all button input elements

$(":file ") Choose all File input elements

$ (":: hidden ") Select all types of INPUT elements or forms of hidden or forms of the hidden domain


Form unit element filter selection:
$(":enabled")                                                                                       can select all operable form elements                                                                                                 can select all the form elements that are not operable
$(":disabled")                     $(":checked") Select all checked form elements

$("select option:selected") Select all selected elements in the child elements of select
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is the identifier of the id selector in css What is the identifier of the id selector in css Sep 22, 2022 pm 03:57 PM

In CSS, the identifier of the id selector is "#". You can specify a specific style for the HTML element marked with a specific id attribute value. The syntax structure is "#ID value {attribute: attribute value;}". The ID attribute is unique and non-repeatable in the entire page; the ID attribute value should not start with a number. IDs starting with numbers will not work in Mozilla/Firefox browsers.

Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3 Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3 Nov 20, 2023 am 11:20 AM

Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3. The specific code example is as follows: HTML code: <divid="container"><divclass="item"&gt ;First child element</div><divclass="item"&

What to do if the javascript selector fails What to do if the javascript selector fails Feb 10, 2023 am 10:15 AM

The JavaScript selector fails because the code is not standardized. The solution is: 1. Remove the imported JS code and the ID selector method will be effective; 2. Just introduce the specified JS code before introducing "jquery.js".

css pseudo-selector learning pseudo-class selector analysis css pseudo-selector learning pseudo-class selector analysis Aug 03, 2022 am 11:26 AM

In the previous article "Css Pseudo-Selector Learning - Pseudo-Element Selector Analysis", we learned about pseudo-element selectors, and today we take a closer look at pseudo-class selectors. I hope it will be helpful to everyone!

Do selectors in css include hypertext tag selectors? Do selectors in css include hypertext tag selectors? Sep 01, 2022 pm 05:25 PM

Not included. CSS selectors include: 1. Tag selector, which locates specific HTML elements through the element name of the HTML page; 2. Class selector, which locates specific HTML elements through the value of the class attribute of the HTML element; 3. ID selector, which Locate specific HTML elements through the value of the id attribute of the HTML element; 4. The wildcard selector "*" can refer to all types of tag elements, including custom elements; 5. The attribute selector uses the existing attribute name of the HTML element or attribute value to locate a specific HTML element.

In-depth analysis of is and where selectors: improving CSS programming level In-depth analysis of is and where selectors: improving CSS programming level Sep 08, 2023 pm 08:22 PM

In-depth analysis of is and where selectors: improving the level of CSS programming Introduction: In the process of CSS programming, selectors are an essential element. They allow us to select and style elements in an HTML document based on specific criteria. In this article, we will take a deep dive into two commonly used selectors namely: is selector and where selector. By understanding their working principles and usage scenarios, we can greatly improve the level of CSS programming. 1. is selector is selector is a very powerful choice

From beginner to proficient: Master the skills of using is and where selectors From beginner to proficient: Master the skills of using is and where selectors Sep 08, 2023 am 09:15 AM

From beginner to proficient: Master the skills of using is and where selectors Introduction: In the process of data processing and analysis, the selector is a very important tool. Through selectors, we can extract the required data from the data set according to specific conditions. This article will introduce the usage skills of is and where selectors to help readers quickly master the powerful functions of these two selectors. 1. Use of the is selector The is selector is a basic selector that allows us to select the data set based on given conditions.

Learn about the selectors supported by lxml in one article Learn about the selectors supported by lxml in one article Jan 13, 2024 pm 02:08 PM

lxml is a powerful Python library for processing XML and HTML documents. As a parsing tool, it provides a variety of selectors to help users easily extract the required data from documents. This article will introduce the selectors supported by lxml in detail. lxml supports the following selectors: Tag selector (ElementTagSelector): Select elements by tag name. For example, select elements with a specific tag name by using <tagname>

See all articles