Home >Web Front-end >JS Tutorial >Get elements based on attributes or attribute values ​​in JQuery (6 ways to get them)_jquery

Get elements based on attributes or attribute values ​​in JQuery (6 ways to get them)_jquery

WBOY
WBOYOriginal
2016-05-16 17:43:331236browse

Get elements based on attributes

1. For example, if you want to get the element with id attribute in the p tag of the page

Copy code The code is as follows:

$("p[id]").css("color","red");

Get the element according to the attribute value
1.$. In jQuery, $(""), this syntax is equivalent to $(document.createElement("span")). This is a usage, and it is also used like this when selecting elements: [attribute$ =value], matches elements whose given attribute ends with some value. Let’s take an example to illustrate:
HTML code
Copy code The code is as follows:





jQuery Code:
Copy code The code is as follows:

$("input[name$='letter ']")

Result:
[ , ]

2 .!. Selector: [attribute!=value], matches all elements that do not contain the specified attribute, or the attribute is not equal to a specific value. This selector is equivalent to: not ([attr=value]).
Example:
HTML code
Copy code The code is as follows:





jQuery code:
Copy Code The code is as follows:

$("input[name!='newsletter']").attr("checked", true);

Result:
[ ]

3.*. Selector: [attribute*=value], matches the given attribute to elements containing certain values. Let’s take an example:
HTML code:
Copy code The code is as follows:






jQuery code:
Copy code The code is as follows:

$("input[name*='man']")

Result:
[ , < input name="milkman" />, ]

4.@. Matches elements containing the given attribute. Note that in jQuery 1.3, the leading @ symbol has been deprecated! If you want to be compatible with the latest version, simply remove the @ symbol
.

5.^. Selector: [attribute^=value], matches elements whose given attributes start with certain values. Here is an example to illustrate:
HTML code:
Copy code The code is as follows:




jQuery code:
Copy code The code is as follows:

$("input[name^='news']")

Result:
[ , ]

6 Get the element with the specified attribute and the specified string in the set value
HTML code:
Copy code The code is as follows:





jQuery code:
Copy code The code is as follows:

$("input[name$='letter'][value$='zz']") .attr("checked","true"); supports multi-condition operations

Of course, it can also be obtained based on the id attribute or other attributes, such as $("input[id=id1]" ).css("color",red);
In jquery, when using $("input[name='metaId']").val() you cannot directly get the value of the selected radio, you just get the radio The first value of the label, this may be related to jquery using the xpath language for search, and we usually want to get the value of the selected radio. There are the following methods:
1, use $(”input[name= 'metaId']:checked").val() to obtain //name represents the name attribute name in radio
2, use $(":radio:checked").val() to obtain //limit the page to only one set of radios Label
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