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

本文通过实例演示了如何使用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

nrsc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值