Home > Article > Web Front-end > jquery selector: the difference between hidden and [type=hidden]

jquery selector: the difference between hidden and [type=hidden]

黄舟Original: 2017-06-23 11:42:511802browse

Regarding the description of selector:hidden, the jquery description document says this: Match all invisible elements, or elements with type hidden. And [type=hidden] is to find all elements whose typeattribute is equal to hidden. There are similarities and differences between the two. :hidden matches all invisible elements, or elements of type hidden, all elements and sub-elements with style display equal to none and form elements with type="hidden" are in the search results, and [type= hidden] will only find elements whose type attribute is hidden.

So, input:hidden is to find input elements in invisible containers, including textbox, radio, checkbox, button, etc. and form elements of type="hidden". input[type=hidden] only searches for form elements with type="hidden". Such as the following example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery Demo</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function beforeHidden()
{
    $("#result").text("隐藏前：$(\"input:hidden\").length="+$("input:hidden").length+";$(\"input[type=hidden]\").length="+$("input[type=hidden]").length);
}
function afterHidden()
{
    $("#div1").hide();
    $("#result").append("<br/>隐藏后：$(\"input:hidden\").length="+$("input:hidden").length+";$(\"input[type=hidden]\").length="+$("input[type=hidden]").length);
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<div id="div1">
<input type="text"  id="txt" />
<input type="radio" id="rdo" /><label for="rdo">单选框</label>
<input type="checkbox" id="chx"/><label for="chx">复选框</label>
<br />
<input type="button" id="btn1" value="原始" onclick="beforeHidden();"/>
</div>
<input type="hidden" id="hd"/>
<input type="button" id="btn2" value="隐藏后" onclick="afterHidden();"/>
<div id="result"></div></form>
</body>
</html>

In the example, before div1 is hidden, $("input:hidden").length=1;$("input[type=hidden]").length=1, after hiding , after hiding: $("input:hidden").length=5;$("input[type=hidden]").length=1, obviously,

div1中的<input type="text"  id="txt" />
<input type="radio" id="rdo" />
<input type="checkbox" id="chx"/>
<input type="button" id="btn1" value="原始"/>

is also included, and $ ("input[type=hidden]").length has never changed.

The above is the detailed content of jquery selector: the difference between hidden and [type=hidden]. 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 to apply jQuery :hidden selector?Next article：How to apply jQuery :hidden selector?

See more

jquery selector: the difference between hidden and [type=hidden]

Related articles