Selecting element using jQuery.

In this tutorial , we will discuss about the different methods to select elements of html page.

In this tutorial , we will discuss about the different methods to select elements of html page.

Selecting element using jQuery

In this tutorial , we will discuss about the different methods to select elements of html page. The jQuery has two ways to select elements. The first uses a combination of CSS and XPath selectors passed as a string to the jQuery constructor (eg. $("div > ul a")). The second uses several methods of the jQuery object. Both approaches can be combined.

jQuery selector is very powerful feature of this framework and it allows you to perform many different types of operations on the DOM object of web page. In the current tutorial I will show you how to apply the different css styles to the "orderedlist" in HTML page.

jQuery allows you to:

Select the element by id
Apply the different operations, interceptors, css etc..
You can also use the jQuery selector to find a particular element in HTML page and perform the different operations using JavaSript

Following video tutorial show you how we can apply different css to DOM elements in the HTML page.

Here is the video of “How to use the jQuery selector?”:

For example ,we want to select a list which has an ID "orderedlist" in the given html code. We can do it by two different ways :

First , by highlighting background color of the text, using following code lines (custom.js) :

$(document).ready(function() {
$("#orderedlist").addClass("red");
});

Above code highlight the text background area by "red" color .The code below is used to highlight the text color to blue :

$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});

In Second way, when you hover the mouse on text, the text color changes to green to show selection. The code for this is(custom.js) :

$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});

The html file code :

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
</head>
<body>
<h1>jQuery selector example</h1>
<h3>
<ol id="orderedlist">
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ol></h3>
<p>When you hover mouse on third element ,it's color changes to green to show selection</p>
</body>
</html>

style.css

ol, li{
margin: 0;
padding: 0;
}
li { margin-left: 20px; }

.red { background-color: red; }
.blue { color: blue; }
.green { color: green; }

hover {
background-color: #fc7;
}

OUTPUT :

Output when highlighting background color to red :