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:
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) :
Above code highlight the text background area by "red" color .The code below is used to highlight the text color to 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) :
The html file code :
Output when highlighting background color to red :
Output when highlighting text color to blue :
Output when mouse hover changes color of text to green :
Posted on: July 26, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles