Query Traversing - Descendants (children method) using jQuery in Tamil

In jQuery, Query Traversing refers to the process of navigating and manipulating the Document Object Model (DOM) to select and work with specific elements on a web page. The Descendants method is a way to select all elements that are descendants of a given parent element, regardless of their level in the DOM hierarchy. The specific method you are referring to is likely the children() method, not the descendants method.

children() Method

The children() method in jQuery is used to get the immediate children of each element in the set of matched elements. It only travels a single level down the DOM tree.

Syntax

$(selector).children(filter)

selector : A string containing a selector expression to match the children against.

filter : A string containing a filter expression to narrow down the selection of children.

Keypoints

The children() method does not traverse all levels of descendants; it only selects the immediate children.
If no selector is provided, all immediate children are selected.
The filter parameter is optional and can be used to further refine the selection based on a specific condition.

Source Code

$('ul.list').children('li') selects all immediate children (<li>) of the unordered list with the class 'list'. In this case, it will select the first three list items, not the nested list items.
.css('color','green') sets the text color of the selected elements to green.
The jQuery code will change the text color of the first three list items to green, but it won't affect the nested list items. This is because the children('li') method only selects immediate children and doesn't traverse down multiple levels. The CSS style setting the text color to black for all list items will still apply to the nested list items.

<html>
	<head>
		<title>DOM Query</title>
		<style>
			li{color:black;}
		</style>
	</head>
	<body>
	<h3>Children</h3>
	<ul class='list'>
		<li>Graphic Designing</li>
		<li>Web Designing</li>
		<li>Programming</li>
		<li>
			<ul>
				<li>C Program</li>
				<li>C++ Program</li>
				<li>Java</li>
				<li>C#</li>
			</ul>
		</li>
	</ul>
	<script src="js/jquery.js"></script>
	<script>
		$("document").ready(function(){
			$('ul.list').children('li').css('color','green');
		});
	</script>
	</body>
</html>

Remember that jQuery simplifies DOM manipulation and traversal, making it easier to work with HTML documents in a more concise manner.