jQuery对象使用

最新推荐文章于 2023-08-12 10:47:33 发布

原创最新推荐文章于 2023-08-12 10:47:33 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文介绍了jQuery对象的基本行为，包括长度属性、获取DOM元素、遍历和索引方法。通过示例展示了如何使用jQuery进行DOM操作，如统计元素数量、获取特定元素的文本和遍历所有元素。

jQuery对象是一个包含所有匹配的任意多个dom元素的为数组对象
基本行为：

length:包含的dom元素个数
[index]/get(index):得到对应位置的DOM元素
each():遍历包含的所有DOM元素
index():得到在所有兄弟元素中的下标
用法如下：

<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//统计一共有多少个按钮
			console.log($('button').length);

			//取出第二个button的文本
		
			console.log($('button')[1].innerHTML);
			console.log($('button').get(1).innerHTML);
			//输出所有button标签的文本
			$('button').each(function(){
				console.log(this.innerHTML);
				//console.log($(this).html());
			});
			$('button').each(function(index,domEle){
				//console.log(this.innerHTML);
				//console.log($(this).html());
				console.log(index,domEle.innerHTML);
			});
			//输出测试三按钮是所有按钮中的第几个
			console.log($('#btn3').index()+1);
			});
			/*伪数组
			 * Object对象
			 * length属性
			 * 数组下标属性
			 * 上面的button就是伪数组
			 */
		</script>
	</head>
	<body>
		<button>测试一</button>
		<button>测试二</button>
		<button id="btn3">测试三</button>
		<button>测试四</button>
	</body>