jquery选择器:hidden和[type=hidden]两者之间的区别-js教程-PHP中文网

首页

web前端

js教程

jquery选择器:hidden和[type=hidden]两者之间的区别

Jun 23, 2017 am 11:42 AM

jquery type 选择器

关于选择器:hidden的说明，在jquery说明文档中是这样说的：匹配所有不可见元素，或者type为hidden的元素。而[type=hidden]是查找所有type属性等于hidden的元素。两者是有相同之处和不同之处的。:hidden匹配所有不可见元素，或者type为hidden的元素，所有样式display等于none的元素和子元素以及type="hidden"的表单元素都在查找的结果中，而[type=hidden]则只查找type属性为hidden的元素。

所以，input:hidden是查找不可见容器中的input元素，包括，textbox,radio,checkbox,button等和type="hidden"的表单元素。input[type=hidden]仅仅查找type="hidden"的表单元素。如以下例子：

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;
&lt;title&gt;jquery Demo&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function beforeHidden()
{
    $(&quot;#result&quot;).text(&quot;隐藏前：$(\&quot;input:hidden\&quot;).length=&quot;+$(&quot;input:hidden&quot;).length+&quot;;$(\&quot;input[type=hidden]\&quot;).length=&quot;+$(&quot;input[type=hidden]&quot;).length);
}
function afterHidden()
{
    $(&quot;#div1&quot;).hide();
    $(&quot;#result&quot;).append(&quot;&lt;br/&gt;隐藏后：$(\&quot;input:hidden\&quot;).length=&quot;+$(&quot;input:hidden&quot;).length+&quot;;$(\&quot;input[type=hidden]\&quot;).length=&quot;+$(&quot;input[type=hidden]&quot;).length);
}
&lt;/script&gt;
&lt;/head&gt;
 
&lt;body&gt;
&lt;form id=&quot;form1&quot; name=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
&lt;div id=&quot;div1&quot;&gt;
&lt;input type=&quot;text&quot;  id=&quot;txt&quot; /&gt;
&lt;input type=&quot;radio&quot; id=&quot;rdo&quot; /&gt;&lt;label for=&quot;rdo&quot;&gt;单选框&lt;/label&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;chx&quot;/&gt;&lt;label for=&quot;chx&quot;&gt;复选框&lt;/label&gt;
&lt;br /&gt;
&lt;input type=&quot;button&quot; id=&quot;btn1&quot; value=&quot;原始&quot; onclick=&quot;beforeHidden();&quot;/&gt;
&lt;/div&gt;
&lt;input type=&quot;hidden&quot; id=&quot;hd&quot;/&gt;
&lt;input type=&quot;button&quot; id=&quot;btn2&quot; value=&quot;隐藏后&quot; onclick=&quot;afterHidden();&quot;/&gt;
&lt;div id=&quot;result&quot;&gt;&lt;/div&gt;&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

登录后复制

例子中，div1被隐藏前，$("input:hidden").length=1;$("input[type=hidden]").length=1，隐藏后，隐藏后：$("input:hidden").length=5;$("input[type=hidden]").length=1，显然，

div1中的&lt;input type=&quot;text&quot;  id=&quot;txt&quot; /&gt;
&lt;input type=&quot;radio&quot; id=&quot;rdo&quot; /&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;chx&quot;/&gt;
&lt;input type=&quot;button&quot; id=&quot;btn1&quot; value=&quot;原始&quot;/&gt;

登录后复制

也被包含进来了，而$("input[type=hidden]").length始终没有变。

以上是jquery选择器:hidden和[type=hidden]两者之间的区别的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn