Home > Web Front-end > JS Tutorial > Summary of 6 methods to obtain elements in jquery

Summary of 6 methods to obtain elements in jquery

伊谢尔伦
Release: 2017-06-19 15:05:16
Original
2077 people have browsed it

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

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

Get the element based on the attribute value
1.$. In jQuery, $(""), this syntax is equivalent to $(document.createElement("span")), which is a usage, when selecting elements Sometimes it is also used like this: [attribute$=value], which matches elements where the given attribute ends with a certain value. Let’s take an example to illustrate:
HTML code

<input name="newsletter" /> 
<input name="milkman" /> 
<input name="jobletter" />
Copy after login

jQuery code:

$("input[name$=&#39;letter&#39;]")
Copy after login

Result:

[ <input name="newsletter" />, <input name="jobletter" /> ]
Copy after login



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

<input type="checkbox" name="newsletter" value="Hot Fuzz" /> 
<input type="checkbox" name="newsletter" value="Cold Fusion" /> 
<input type="checkbox" name="accept" value="Evil Plans" />
Copy after login

jQuery code:

$("input[name!=&#39;newsletter&#39;]").attr("checked", true);
Copy after login

Result:

[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
Copy after login



3.* . Selector: [attribute*=value], matches the given attribute to elements containing certain values. Let’s give an example:
HTML code:

<input name="man-news" /> 
<input name="milkman" /> 
<input name="letterman2" /> 
<input name="newmilk" />
Copy after login

jQuery code:

$("input[name*=&#39;man&#39;]")
Copy after login

Result:

[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
Copy after login

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 the given attribute that starts with certain values. Here is an example to illustrate:
HTML code:

<input name="newsletter" /> 
<input name="milkman" /> 
<input name="newsboy" />
Copy after login

jQuery code:

$("input[name^=&#39;news&#39;]")
Copy after login

Result:

[ <input name="newsletter" />, <input name="newsboy" /> ]
Copy after login

6 Get the element with the specified attribute and the set value has the specified string
HTML code:

<input type="checkbox" name="newsletter" value="Hot Fuzz"/> 
<input type="checkbox" name="newsletter" value="Cold Fusion" /> 
<input type="checkbox" name="accept" value="Evil Plans" />
Copy after login

jQuery code:

$("input[name$=&#39;letter&#39;][value$=&#39;zz&#39;]").attr("checked","true");支持多条件操作
Copy after login

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(), the value of the selected radio cannot be obtained directly, but only the first value of the radio tag is obtained. This may be used by jquery xpath language is related to searching, and we usually want to get the value of the selected radio. There are several methods:
1, use $("input[name='metaId']:checked") .val() gets //name represents the name attribute name in radio
2, use $(":radio:checked").val() to get //limit the page to only one set of radio tags

The above is the detailed content of Summary of 6 methods to obtain elements in jquery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template