036-jQuery DOM element method

1. get() method

1.1. Syntax

$(selector).get(index)

1.2. Parameters

1.3. The get() function in jQuery is to obtain a collection of all matching DOM elements in the current page. This is a backward compatible way to get all matching elements (different from jQuery objects, which are actually arrays of elements). This function is very useful if you want to directly manipulate DOM objects instead of jQuery objects.

1.4. In fact, another use of get() is that you can directly access the dom object corresponding to its subscript value through the subscript value. Remember that get() returns an array<element>, it is already an array object, but You can subscript the value like an array.

1.5. The return value of the get() method: Array<Element>, a DOM array.

1.6. The return value of the get(index) method: array element.

2. index() method

2.1. The index() method obtains the index position of the first matched element relative to its sibling element.

2.2. Syntax

$(selector).index()

2.3. Get the index position of the element relative to the selector. This element can be specified by DOM element or jQuery selector.

2.4. Syntax

$(selector).index(element)

2.5. Parameters

3. size() method

3.1. The size() method returns the number of elements matched by the jQuery selector.

3.2. Syntax

$(selector).size()

4. toArray() method

4.1. The toArray() method returns the elements matched by the jQuery selector in the form of an array.

4.2. Syntax

$(selector).toArray()

5. Examples

<!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>

 

Guess you like

Origin blog.csdn.net/aihiao/article/details/112418977