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