027_jQuery DOM 元素方法

最新推荐文章于 2024-03-18 11:02:23 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-03-18 11:02:23 发布

阅读量172

点赞数

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

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/112418977

版权

jQuery学习专栏收录该内容

37 篇文章

订阅专栏

本文主要介绍了jQuery的几个常用方法，包括get()方法，可取得匹配的DOM元素集合或通过下标访问dom对象；index()方法能获得匹配元素相对同胞元素或选择器的index位置；size()方法返回匹配元素数量；toArray()方法以数组形式返回匹配元素，还给出了相关代码及效果图。

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

1. get()方法

1.1. 语法

$(selector).get(index)

1.2. 参数

1.3. jQuery中的get()函数是取得当前页面中所有匹配的DOM元素集合。这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象, 而实际上是元素数组)。如果你想要直接操作DOM 对象而不是jQuery对象, 这个函数非常有用。

1.4. 其实get()还有一个用处是可以直接通过下标值访问其下标值对应的dom对象, 还记得get()返回的是一个array<element>吧, 已经是一个array对象了, 然可以像操作数组一样以下标去取值了。

1.5. get()方法的返回值: Array<Element>, 一个DOM数组。

1.6. get(index)方法的返回值: 数组元素。

2. index()方法

2.1. index()方法获得第一个匹配元素相对于其同胞元素的index位置。

2.2. 语法

$(selector).index()

2.3. 获得元素相对于选择器的index位置。该元素可以通过DOM元素或jQuery选择器来指定。

2.4. 语法

$(selector).index(element)

2.5. 参数

3. size()方法

3.1. size()方法返回被jQuery选择器匹配的元素的数量。

3.2. 语法

$(selector).size()

4. toArray()方法

4.1. toArray()方法以数组的形式返回jQuery选择器匹配的元素。

4.2. 语法

$(selector).toArray()

5. 例子

5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery DOM 元素方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){	
				var arr = $('li').get();
				var item2 = $('li').get(1);
				var se = $('ul').size();
				var ul = $('ul');
				var ulArr = ul.toArray();

				$('li').click(function(){
					$(this).css({"background-color": "red"});
				});
			});
		</script>
	</head>
	<body> 
  		列表1:
  		<ul id="first">
			<li>list1 item 1</li>
			<li>list1 item 2</li>
			<li>list1 item 3</li>
  		</ul>
		列表2:
  		<ul id="second">
			<li>list2 item 1</li>
			<li>list2 item 2</li>
			<li>list2 item 3</li>
  		</ul>
	</body>
</html>

5.2. 效果图