jQuery #id selector:
<body>
<input type="button" value="Click Me" id="button1" />
</body>
</html>
<script type="text/javascript">
$('document').ready(function () {
$('#button1').click(function () {
alert('Button One Clicked');
});
});
</script>
jQuery Element Selector
Selects all the tr elements on the page and changes their background colour to red
$(document).ready(function () {
$('tr').css('backgroundColor', 'blue');
});
Changes the background color of even rows to grey and odd rows to yellow on both the tables.
$(document).ready(function () {
$('tr:even').css('backgroundColor', 'gray');
$('tr:odd').css('backgroundColor', 'yellow');
});
Alerts the HTML content of the table
$(document).ready(function () {
alert($('table').html());
});
Alerts the HTML content of each table row
$(document).ready(function () {
$('table tr').each(function () {
alert($(this).html());
});
});
Select and changes the background colour of all the div, span , paragraph and anchor elements
$(document).ready(function () {
$('div, span, a, p').css('backgroundColor', 'yellow');
});
jQuery class selector
<body>
<span class="small">
Span 1
</span>
<br /><br />
<div class="small">
Div 1
</div>
<br />
<span class="big">
Span 2
</span>
<p class="big">This is a paragraph</p>
</body>
Selects all elements with class "small" or "big" and sets 5px solid red border
$(document).ready(function () {
$('.small,.big').css('border', '5px solid red');
});
Selects all elements with class "small" and all span elements with class "big" and sets 5px solid red border
$(document).ready(function () {
$('.small,span.big').css('border', '5px solid red');
});
Selects all elements with class small that are nested in a an element with id=div2and sets 5px solid red border
$(document).ready(function () {
$('#div2 .small').css('border', '5px solid red');
});
Selects all elements that have both the classes - small and big. There should be no space between the class names.
$(document).ready(function () {
$('.small.big').css('border', '5px solid red');
});
If you have a space between the two class names then we are trying to find descendants.
$(document).ready(function () {
$('.small .big').css('border', '5px solid red');
});
Selects all elements that have both the classes - small and big is by using filter method.
$(document).ready(function () {
$('.small').filter('.big').css('border', '5px solid red');
});
No comments:
Post a Comment