Home > Web Front-end > JS Tutorial > body text

How to select the first child element in jquery

青灯夜游
Release: 2021-11-19 14:42:39
Original
6269 people have browsed it

Jquery method to select the child element: 1. Use the children() method to get all direct child elements of the specified element, the syntax is "$("specified element").children()"; 2. Use eq () method selects sub-elements based on index numbers, the syntax is "sub-element.eq(index)".

How to select the first child element in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

jquery selects the child element

In jquery, you can use the children() eq() method to select the child element

  • The children() method returns all direct child elements of the selected element.

  • eq() method returns the element with the specified index number of the selected element. Index numbers start with 0, so the index number of the first element is 0 (not 1).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function(){
			  $("button").click(function(){
				$("div").children().eq(1).css("background-color","yellow");
			  });
			});
		</script>
	</head>
	<body>

		<div>
			<p>这是 div 元素中的段落。</p>
			<p>这是 div 元素中的段落。</p>
			<p>这是 div 元素中的段落。</p>
		</div>
		<button>选择div元素的第2个子元素</button>

	</body>
</html>
Copy after login

How to select the first child element in jquery

Recommended related video tutorials: jQuery Tutorial (Video)

The above is the detailed content of How to select the first child element in jquery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template