How to get the selected element in jquery

As a very commonly used JavaScript library in web development, jQuery has a powerful and rich API that can easily obtain and operate elements in web pages. jQuery provides a series of selectors for selecting elements in HTML documents. In actual development, we need to obtain the selected element based on the user's operation. This article will introduce how to obtain the selected element in jQuery.

1. Basic Selector

The basic selector is jQuery’s most basic selector. Through basic selectors, we can select all DOM elements, element types, classes, IDs, etc. The following are commonly used basic selectors:

1. *：选择所有元素
2. #id：根据id选择元素
3. .class：根据class选择元素
4. element：选择元素类型
5. [attribute]：选择有某个属性的元素
6. [attribute=value]：选择某个属性等于给定值的元素

2. Hierarchical selector

The hierarchical selector can be used to select elements nested within a specified element or element group. The following are commonly used hierarchical selectors:

1. ancestor descendant：选择某元素内的后代元素
2. parent > child：选择某元素的直接子元素
3. prev + next：选择某元素之后的紧邻的兄弟元素
4. prev ~ siblings：选择某元素之后的所有兄弟元素

3. Filter selector

The filter selector can select elements based on their status, including whether the selector has a certain attribute and whether the element is in Conditions such as a certain state (such as visible or disabled), node location, etc. The following are commonly used filter selectors:

1. :first、:last：选择第一个、最后一个元素
2. :not(selector)：选择不符合条件的元素
3. :even、:odd：选择偶数或奇数元素
4. :disabled、:enabled：选择被禁用、可用的元素
5. :checked：选择被选中的元素
6. :selected：选择被选择的元素

4. Get the selected element

There are two main ways to get the selected element in jQuery:

1. Use the val() method of the form element

When the element we select is a form element (such as input, textarea, etc.), we can directly use the val() method to get the value of the selected element, code As follows:

var value = $("input:checkbox:checked").val();

The above code parameter input:checkbox:checked means that all checked checkbox elements are selected, and then use the val() method to obtain their values.

2. Using selectors and event handling functions

When the element we select is not a form element, we can get the selected element through the selector and event handling function. The code is as follows:

// 给被选中的元素绑定click事件
$("p").click(function() {
  $(this).toggleClass("selected");
});

// 获取被选中的元素
var selected = $("p.selected");

In the above code, we use the click() method to bind the click event to the selected element. When an element is clicked, the selected class name will be added or removed from the element. Indicates that the element is selected or unchecked. Finally we use the selector to get the selected element.

Summary: To obtain the selected element in jQuery, you can use basic selectors, hierarchical selectors and filter selectors, or you can obtain the selected element through the val() method and event handling function of the form element. Mastering these methods can make it easier for us to operate elements in web pages.

The above is the detailed content of How to get the selected element in jquery. For more information, please follow other related articles on the PHP Chinese website!