jQuery对象——jQuery学习(2)

最新推荐文章于 2022-11-29 20:06:40 发布

白菜苗

最新推荐文章于 2022-11-29 20:06:40 发布

阅读量93

点赞数

分类专栏： jQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_43682519/article/details/116936730

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象；

2、基本行为：

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

代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery对象</title>
</head>
<body>
	<button>测试一</button>
	<button>测试二</button>
	<button id="btn3">测试三</button>
	<button>测试四</button>

	<!-- 
	需求 
	需求1：统计一共有多少个按钮；
	需求2：取出第二个button的文本；
	需求3：输出所有button标签文本；
	需求4：输出“测试三”按钮是所有按钮的第几个。 
	-->

	<!--
	 伪数组：
	 Object对象；
	 Length属性；
	 数组下标属性；
	 没有数组特别方法：foreach(),push(),splice()等等
	 -->

	<script type="text/javascript" src="jquery-3.4.1/jquery-3.4.1.js"></script>
	<script type="text/javascript" >
		//需求1：统计一共有多少个按钮；
		var buttons = $('button');
		//console.log(buttons.size(),buttons.length)  1.8版本以后没有size()了
		console.log(buttons.length);

		//需求2：取出第二个button的文本；
		console.log(buttons[1].innerHTML,buttons.get(1).innerHTML);

		//需求3：输出所有button标签文本；
		buttons.each(function(index,domEle){
			console.log(index,domEle.innerHTML,this) //this是dom元素本身
		}) 

		buttons.each(function(){
			console.log(this.innerHTML);
		})

		//需求4：输出“测试三”按钮是所有按钮的第几个。
		console.log($('#btn3').index());
	</script>
</body>
</html>

白菜苗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery对象——jQuery学习(2)

1、jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象；2、基本行为：size()/length():包含的DOM元素个数；[index]/get(index):得到对应位置的dom元素；each()：遍历包含的所有dom元素；index():得到在所在兄弟元素中的下标。代码示例：<!DOCTYPE html><html><head> <title>jQuery对象</title></head>
复制链接

扫一扫