关于选择器: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. JAVA程序的基本结构

    java程序(类)其实是一个静态方法库,或者是定义了一个数据类型.所以会遵循7种语法:     1.原始数据类型:             ---整型:byte.short.int.long ---浮 ...

  2. TF之NN：matplotlib动态演示深度学习之tensorflow将神经网络系统自动学习并优化修正并且将输出结果可视化—Jason niu

    import tensorflow as tf import numpy as np import matplotlib.pyplot as plt def add_layer(inputs, in_ ...

  3. JAVA首次课堂测试总结

    暑期生活已经结束,新的学期也已经开始,而暑期放假之前约定的JAVA首次课堂测试也如期的到来,本次测试真的可以学到和多东西,也有很多感想. 首先体会最深的就是系主任所说的软件工程不是那么好学的,真的需要 ...

  4. 解决java编译错误：编码GBK的不可映射字符

    新建java文件,存储时Encoding选择了UTF-8, 由于语句中包含中文,javac编译时报错,提示"编码GBK的不可映射字符": 解决办法: 1.使用javac -enco ...

  5. XamarinAndroid组件教程RecylerView适配器使用动画

    XamarinAndroid组件教程RecylerView适配器使用动画 为RecylerView使用RecylerViewAnimators组件中提供的适配器动画,需要使用RecyclerView类 ...

  6. pyhthon 利用爬虫结合阿里大于短信接口实现短信发送天气预报

    # -*- coding: utf-8 -*- ''''' SDK for alidayu requires: python3.x, requests @author: raptor.zh@gmail ...

  7. 潭州课堂25班：Ph201805201 django 项目 第三十二课 后台站点管理(课堂笔记）

    一.后台站点模版抽取 1.获取静态站点模版 可以使用git clone到本地 git clone https://github.com/almasaeed2010/AdminLTE.git 也可以在g ...

  8. Hibernate的核心接口

    Hibernate5个核心接口 所有Hibernate应用中都会访问Hibernate的5个核心接口 Configuration接口:配置Hibernate,根启动Hibernate,创建Sessio ...

  9. Linux下nginx的使用

    day02 .远程连接服务器故障排查 )道路是否通畅 )是否有劫财劫色 xxxxxx no route to host xxxx )洗浴中心是否提供你想要的服务 sshd远程连接服务 == ip 端口 ...

  10. MQ基本概念

    MQ的基本概念 1) 队列管理器 队列管理器是MQ系统中最上层的一个概念,由它为我们提供基于队列的消息服务. 2) 消息 在MQ中,我们把应用程序交由MQ传输的数据定义为消息,我们可以定义消息的内容并 ...