jQuery对象，初级学习

最新推荐文章于 2024-11-12 11:19:19 发布

前端学习小分队

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量69

点赞数

文章标签：前端面试运维

本文链接：https://blog.csdn.net/weixin_45215652/article/details/121583267

版权

这篇博客通过示例展示了JavaScript中对DOM元素的操作，包括获取按钮数量、获取指定索引的按钮文本、遍历输出所有按钮文本以及查找特定按钮在所有按钮中的位置。此外，还讨论了JavaScript对象与数组的区别，并提供了伪数组对象的示例。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>测试一</button>
		<button>测试二</button>
		<button id="btn03">测试三</button>
		<button>测试四</button>
		
		<script type="text/javascript" src="JS/jquery-1.12.3.js">	</script>
		<script type="text/javascript">
			// 1.统计一共有多少个按钮
			// size()/length:包含多少个DOM元素个数
			var $buttons = $('button');
			console.log($buttons.size(),$buttons.length);
			// 2.取出第二个button文本
			// [index]/get(index)
			console.log($buttons[1].innerHTML,$buttons.get(1).innerHTML);
			// 3.输出所有buttoon标签文本
			// each遍历包含所有DOM元素
			
			// $buttons.each(function(index,domEle){
			// 	console.log(index,domEle.innerHTML,this);
			// });
			$buttons.each(function(){
				console.log(this.innerHTML);
			});
			// 4.输出“测试三”按钮是所有按钮中第几个
			//index():得到在所有兄弟元素中的下标
			console.log($('#btn03').index());
			// 伪数组：Object对象，length属性，数值下标属性 没有数组特别的方法
			// 数组方法：forEach(),push(),pop(),splice()
			console.log($buttons instanceof Array);//false
			var weiArr = {};
			weiArr.length = 0;
			weiArr[0] = "aaa";
			weiArr.length = 1;
			weiArr[1] = 'abc';
			weiArr.length = 2;
			for(var i = 0;i<weiArr.length;i++)
			{
				var obj = weiArr[i];
				console.log(i,obj);
			}
			//forEach是数组方法
			console.log(weiArr.forEach,$buttons.forEach);//undefined undefined
			
			
		</script>
	</body>
</html>