关于选择器: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"的表单元素。如以下例子：

<!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>

例子中，div1被隐藏前，$("input:hidden").length=1;$("input[type=hidden]").length=1，隐藏后，隐藏后：$("input:hidden").length=5;$("input[type=hidden]").length=1，显然，div1中的<input type="text"  id="txt" />
<input type="radio" id="rdo" />
<input type="checkbox" id="chx"/>
<input type="button" id="btn1" value="原始"/>也被包含进来了，而$("input[type=hidden]").length始终没有变。

jquery中选择器input:hidden和input[type=hidden]的区别的更多相关文章

  1. jquery中选择器的 html() text() val() attr() 方法的区别与使用方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jquery中innerwidth，outerwidth，outerwidth和width的区别

    在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...

  3. jquery中ready函数,$(function(){})与自执行函数的区别

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 详解jQuery中 .bind() vs .live() vs .delegate() vs .on() 的区别

    转载自:http://zhuzhichao.com/2013/12/differences-between-jquery-bind-vs-live/ 我见过很多开发者很困惑关于jQuery中的.bin ...

  5. 在JQuery中$(document.body)和这个$("body") 这两的区别在哪里？

    两种写法代表的是同一个对象 $("body") 是一个选择器,jQuery 会从 DOM 顶端开始搜索,直到找到标签为 body 的元素. 而 $(document.body) 中 ...

  6. jQuery中append()、prepend()与after()、before()的区别

    转载 未曾见海  https://www.cnblogs.com/afei-qwerty/p/6682963.html 在jQuery中,添加元素有append(),prepend() 和 after ...

  7. jquery中append、prepend, before和after方法的区别（一）

    原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该 ...

  8. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  9. jQuery中操作属性的方法attr与prop的区别

    attr 与 prop 都可以对某个属性进行获取和设置的操作,二者的用法相同: <script src = 'jQuery.js'></script> <script&g ...

随机推荐

  1. 分布式服务框架XXL-RPC

    <分布式服务框架XXL-RPC>      一.简介 1.1 概述 XXL-RPC 是一个分布式服务框架,提供稳定高性能的RPC远程服务调用功能.拥有"高性能.分布式.注册中心. ...

  2. UML图快速入门

    UML(Unified Modeling Language)统一建模语言的概念已经出现了近20年,虽然并不是所有的概念都非常有实践意义,但常见的用例图.类图.序列图和状态图却实实在在非常有效,是项目中 ...

  3. VMware5.5-虚拟交换机

    虚拟交换机 即为[VM(ESXI内部.ESXI外部.ESXI之间等)]的各功能.提供的网桥 虚拟机选项负责虚机间的通讯 Vmkernel选项负责主机间的通讯 标准交换机 添加拓扑中vmotion的虚拟 ...

  4. java 日期递增

    public static void main(String[] args) throws ParseException { // 方法一 // Format f = new SimpleDateFo ...

  5. orz gzy

    然而orz gzy内嵌不进去...

  6. JavaScript基础笔记（十）表单脚本

    表单脚本 一.表单基础知识 JavaScript中表单对应的是HTMLFormElement类型,该类型继承自HTMLElement类型. 通过document.forms可以获得所有表单元素,通过数 ...

  7. 2190 ACM 数学概率论的乘法和加法原则

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2190 思路:明显我们要寻找 边长为n和边长为n-1,n-2,n-3·····的规律,这样得出一个递推公式就 ...

  8. JavaScript—异步提交表单的6种方式

    FormData的详细介绍及使用请点击此处,那里对FormData的方法和事件已经表述的非常清楚,这里就不再浪费时间在介绍一遍了.本文主要针对FormData对象的使用以及异步文件上传进行详细的说明. ...

  9. [AMPPZ2014]Jaskinia

    [AMPPZ2014]Jaskinia 题目大意: 一个\(n(n\le3\times10^5)\)的树,\(m(m\le3\times10^5)\)个约束条件\((a_i,b_i,d_i)\).请你 ...

  10. [CC-MCO16306]Fluffy and Alternating Subsequence

    [CC-MCO16306]Fluffy and Alternating Subsequence 题目大意: 给定一个\(1\sim n(n\le3\times10^5)\)的排列\(a\). 对于一个 ...