HTML_jQuery中关于this的理解2 (jQuery遍历,可见性过滤选择器__hidden)

最新推荐文章于 2021-03-17 12:15:01 发布

原创最新推荐文章于 2021-03-17 12:15:01 发布 · 662 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML_jQuery中关于this的理 #jQuery遍历 #可见性过滤选择器__hidden

HTML_jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文通过实例演示了如何使用jQuery来选取所有隐藏的文本输入框并打印其值，同时介绍了两种实现方法：一种是通过jQuery对象的方法，另一种是通过全局函数的方式。此外，还展示了如何遍历JavaScript数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>yoyo.html</title>
		<style type="text/css">
			div input{
				display: none;
			}
		</style>
		
		
		<!--导入jquery-->
		<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
		<script type="text/javascript">
			$(function() {
		//需求: 选取所有的文本隐藏域, 并打印它们的值		
			
				$("#b1").click(function(){
				//方式1:使用jq对象的方法	
					//[ele0,ele1,ele2,ele3]   dom对象
					$("input:hidden").each(function(index,ele){
						//这里应该明确,遍历得到的ele为dom对象,所以这里可以直接用this表示当前对象,然后.属性名获得属性值
						//或者将this封装成jq对象$(this),然后利用jq对象.val()方法获得属性值
						alert(index+"   "+ele.value+"   "+this.value+"  "+$(this).val());
					});
				});
				
				
				$("#b2").click(function(){
				//方式2:全局函数
					$.each($("input:hidden"), function(index,ele){
						//此处的ele获得的 也是dom对象,与方式1相同
						alert(index+"   "+ele.value+"   "+this.value+"  "+$(this).val());
					});
				});
				
				//遍历普通的js 数组
				var arr = [3,"tom",false];//数组不想写new,可以这样简写
				
				$("#b3").click(function(){
					//全局函数遍历js对象(数组)
//					$.each(arr, function(index,ele) {
//						alert(index+"   "+ele+"   "+this);  //注意这里获取的ele直接就是数组中的元素 
//					});
					//由于方式1只能遍历jq对象所以为了遍历js对象,可以先将js对象转成jq对象,然后使用方式1
					$(arr).each(function(index,ele){
						alert(index+"   "+ele+"   "+this);
					});//each
				});//按钮3,遍历普通js数组
			});//页面加载成功时间
		</script>
	</head>
	<body>

		<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b1" />
		<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b2" />
		<input type="button" value=" 遍历数组" id="b3" />
		<br /><br />

		<!--文本隐藏域-->
		<input type="hidden" value="hidden_1">
		<input type="hidden" value="hidden_2">
		<input type="hidden" value="hidden_3">
		<input type="hidden" value="hidden_4">
		<div>
			<input type="text" name="date" id="date" value="哈哈哈哈" />
		</div>
		
		<!--还有一个注意点:
			可见性过滤器有两个,一个是visible(可见的,没什么可说的) 另一个是hidden,
			hidden为选择不可见的,这里的不可见一般有两种情况,一种就是文本隐藏域,如62-65行代码
			另一种是指css样式中 定义元素的显示类型关键字  display 的值为none的情况
			
			即:(hidden不可见) 主要针对的是 文本隐藏域和指定display=none
		-->
	</body>

</html>