Share on Google+Share on Google+

Selecting element using jQuery.

Ads
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 :

 

Output when highlighting text color to blue :

 

 

Output when mouse hover changes color of text to green :

 

Click Download Source Code

Download Source Code

Click here to see demo

Advertisements

Posted on: July 26, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Ads

Advertisement