cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery :hidden选择器如何应用？

jQuery :hidden选择器如何应用？

黄舟
黄舟asal
2017-06-23 11:41:021362semak imbas

概述

匹配所有不可见元素，或者type为hidden的元素

示例

描述:

查找隐藏的 tr

HTML 代码:

<table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>

jQuery 代码:

$("tr:hidden")

结果:

[ <tr style="display:none"><td>Value 1</td></tr> ]

描述:

匹配type为hidden的元素

HTML 代码:

<form> <input type="text" name="email" /> <input type="hidden" name="id" /> </form>

jQuery 代码:

$("input:hidden")

结果:

[ <input type="hidden" name="id" /> ]

此选择器一般也要和其他选择器配合使用，比如类选择器和元素选择器等等。例如:

$("div:hidden").css({display:"block",color:"blue"})

以上代码能够将隐藏的div元素设置为可见，并且将里面的字体颜色设置为蓝色。
如果不和其他选择器配合使用，则默认状态是和*选择器配合使用，例如$(":hidden")等同于$("*:hidden")。

实例代码:






 
 
 
 
 
 

我是后来才可见的
 

我是本来就是可见的

以上代码可以将隐藏的div设置为可见，并且将里面的文本颜色设置为蓝色。

实例二:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<style type="text/css">
.display {
display:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $(":hidden").css({display:"block",color:"blue"}); 
  }) 
}) 
</script>
</head>
<body>
<div class="display">我是后来才可见的</div>
<div>我是本来就是可见的</div>
<p class="display">我原来也是不可见的</p>
<button>点击查看效果</button>
</body>
</html>

由于以上代码并没有指定与:hidden选择器相配合使用的选择器，所以就默认和*选择器配合使用，于是代码能够让所有隐藏的元素可见，并且将其中的文本颜色设置为蓝色。

Atas ialah kandungan terperinci jQuery :hidden选择器如何应用？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery选择器:parent的使用案例详解Artikel seterusnya：jquery选择器:hidden和[type=hidden]两者之间的区别

Artikel berkaitan

Lihat lagi