036-jQuery DOM 元素方法

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. 例子

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

		<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(){
					alert($(this).index());
				});
			});
		</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>

036-jQuery DOM 元素方法

猜你喜欢