Home  >  Article  >  Web Front-end  >  jquery search method call

jquery search method call

WBOY
WBOYOriginal
2023-05-12 09:59:38499browse

jQuery is one of the most popular JavaScript libraries, providing a rich set of methods and functions to manipulate HTML, CSS and DOM. Among them, the search method is one of the most basic and commonly used methods. This article will introduce jQuery's search method and how to call it.

1. Basic selector

jQuery’s basic selector method is used to select HTML elements. The following is the calling method of the basic selector:

1. Select by element name

$("elementName") //elementName is the name of the HTML element, such as $("div")

2. Select by class name

$(".className") //className is the class name defined in CSS, such as $(".main")

3 .Select by ID

$("#id") //id is the ID of the HTML element, such as $("#header")

4.Select

## by attribute #$("[attribute=value]") //attribute is the attribute name, which can be class, id or any custom attribute; value is the attribute value, such as $("[type='submit']")

2. Hierarchical selector

The hierarchical selector method is used to select HTML elements with parent-child or sibling relationships. The following is the calling method of hierarchical selector:

1. Select child elements

$("parent child") //parent is the parent element and child is the child element, such as $(". wrapper p")

2. Select direct child elements

$("parent > child") //parent is the parent element and child is the child element, such as $(".wrapper > ; p")

3. Select adjacent sibling elements

$("prev next") //prev is the previous sibling element, next is the next sibling element, such as $(" #header p")

4. Select all sibling elements

$("prev ~ siblings") //prev is the previous sibling element, siblings are all subsequent sibling elements, such as $( ".main ~ li")

3. Filter selector

The filter selector method is used to filter and select elements that meet the conditions in the selected element collection. The following is the calling method of the filter selector:

1. Select the first element

$("selector:first") //selector is any selector, such as $("p: first")

2. Select the last element

$("selector:last") //selector is any selector, such as $("p:last")

3. Select elements with odd numbers

$("selector:odd") //selector is any selector, such as $("li:odd")

4. Select even numbers Serial number element

$("selector:even") //selector is any selector, such as $("li:even")

5. Select the element containing the specified text

$("selector:contains(text)") //selector is any selector, text is the included text, such as $("p:contains('Hello World')")

4. Attribute filtering

The attribute filtering method is used to filter elements that meet the conditions in the selected element collection. The following is the calling method of attribute filtering:

1. Select the element with the specified attribute

$("selector[attribute]") //selector is any selector, attribute is the attribute name, such as $("a[href]")

2. Select the element with the specified attribute and the attribute value contains the specified text

$("selector[attribute*=value]") //selector is Any selector, attribute is the attribute name, value is the included text, such as $("a[href*='https']")

3. Select the element with the specified attribute and the attribute value starts with the specified text

$("selector[attribute^=value]") //selector is any selector, attribute is the attribute name, and value is the starting text, such as $("input[type^='text'] ")

4. Select the element with the specified attribute and the attribute value ending with the specified text

$("selector[attribute$=value]") //selector is any selector and attribute is Attribute name, value is the text at the end, such as $("img[src$='.jpg']")

5. Form filter

The form filter method is used in the form Filter elements that meet the criteria. The following is how to call the form filter:

1. Select all form elements

$(":input") //For example, $(":input")

2. Select all text input boxes

$("input:text") //such as $("input:text")

3. Select all password input boxes

$("input:password") //Such as $("input:password")

4. Select all radio button boxes

$("input:radio") //Such as $("input:radio")

5.Select all checkboxes

$("input:checkbox") //such as $("input:checkbox")

6. Other selectors

In addition to the basic selectors, hierarchical selectors, filter selectors, attribute filters and form filters introduced above, jQuery also provides content selectors, visibility selectors, etc. and state selectors and more powerful selector methods. The calling methods of these methods are similar to the calling methods above and will not be described again here.

Summary

This article introduces jQuery's search method and its calling method, including basic selectors, hierarchical selectors, filter selectors, attribute filters, form filters and other selectors. In actual development, it is very important to be proficient in these methods and functions, which can greatly improve development efficiency and code quality, and is also an important means to improve competitiveness.

The above is the detailed content of jquery search method call. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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
Previous article:How jquery loads scriptsNext article:How jquery loads scripts