Home > Web Front-end > Front-end Q&A > How to find hidden elements in jquery

How to find hidden elements in jquery

青灯夜游
Release: 2022-04-29 12:52:13
Original
3963 people have browsed it

Two implementation methods: 1. Use ":hidden" and the syntax "$(":hidden")" to directly select hidden elements; 2. ":visible" and ":not()" Used in conjunction with the syntax "$(":not(:visible)")", you can select elements outside of the displayed state, that is, select hidden elements.

How to find hidden elements in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

jquery can use the following two methods to find hidden elements:

  • Use directly :hidden selector

  • Use: visible and :not() selectors

1. Use the :hidden selector

: The function of the :hidden selector is to select hidden elements .

Example: Show hidden elements

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$(":hidden").show(3500);
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<p>这是另外一个段落。</p>
		<p style="display:none;">这是一个隐藏段落。</p>
		<div style="display:none;">这是隐藏的 div 元素。</div>

	</body>
</html>
Copy after login

How to find hidden elements in jquery

2. Use :visible and :not() selectors

  • : The visible selector selects each element that is currently visible.

  • : The not() selector selects all elements except the specified element.

":visible" and ":not()" are used together to select elements outside the display state, which is to select hidden elements.

Example: Show hidden elements

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$(":not(:visible)").fadeToggle(3500);
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<p>这是另外一个段落。</p>
		<p style="display:none;">这是一个隐藏段落。</p>
		<div style="display:none;">这是隐藏的 div 元素。</div>

	</body>
</html>
Copy after login

How to find hidden elements in jquery

[Recommended learning: jQuery video tutorial, web front-end video

The above is the detailed content of How to find hidden elements in jquery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template