Post
Ask Question

JQuery Using Selectors

JQuery using selectors

In this article we will look how to use Jquery selectors available for accessing DOM.

So let's get started.

I create an HTML file and add downloaded jquery-1.4.2.min.js file to below html file named as JQuerySelectors.html. 

JQuerySelectors.html

 <html>
 <head>
 <title>JQuery Sample HTML Page</title>
 <script src="jquery-1.4.2.min.js" type="text/javascript">
 </script>
 <script language="javascript" type="text/javascript">
 $(document).ready(function() {
 $('#div1').hide();
 });
 </script>
 </head>
 <body>
 <div>
 <div id="div1">This is a Section.</div>
 <div>This is next Section.</div>
 <div>This is Last Section.</div>
 </div>
 </body>
 </html>


Here is a list of selectors, their syntax and brief description.

JQUERY450.jpg
 

We can select elements based on attributes using below syntax:

$('div [attr-name^=test]') - Selects all div tags with attribute value equal to test.

Now, we will look into custom selectors provided by JQuery. Custom selectors starts with :. Few of them are :even, :odd, :eq etc. We can use :even, :odd for styling alternate rows in a table using below syntax:

$('tr:odd').addClass('alternate');// Adds CSS class
Or
$('tr:nth-child(even)').addClass('alternate');

We can use custom selectors with form's elements like checkbox, textbox etc as shown below:

$(':button:disabled') - Select all disabled buttons

JQUERy470.jpg

JQuery460.jpg

Summary

In this article you have seen how to using Jquery selectors available for accessing DOM.

I hope this article was helpful!

Resources

Here are some useful related resources:


Similar Articles