ID Selector
$(document).ready(function () {
$('#divClassusingID').css('background', '#000567');
});
Code:
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#divClassusingID').css('background', '#000567');
});
</script>
<div>
<div id="divClassusingID" style="width:400px">
adf
</div>
</div>
Class Selector
$(document).ready(function () {
$('.divClassusingID').css('background', '#000567');
});
Code:
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.divClassusingID').css('background', '#000567');
});
</script>
<div>
<div class="divClassusingID" style="width:400px">
hi uday
</div>
</div>
Element Selector
$(document).ready(function () {
$('.divClassusingID').css('background', '#000567');
});
Code:
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('p').css('font-size', '40px');
});
</script>
<div>
<div class="divClassusingID" style="width:400px">
<p> hi uday</p>
</div>
</div>
output:
Apply css to Form Selector
<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('form *').css('color', '#FF99CC');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="divClassusingID" style="width:400px">
<p> hi uday</p>
adsfasf
</div>
</div>
</form>
</body>
Select Multiple Elements
$('p, div').css('color', '#FF99CC');
It applys css color to paragraph and div
<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('p, div').css('color', '#FF99CC');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="divClassusingID" style="width:400px">
<p> hi uday</p>
<div> hi uday</div>
</div>
</div>
</form>
</body>
</html>
Output:
The parent > child (immediate child element)
$(document).ready(function () {
$('div > p').css('color', '#FF99CC');
})
It is going to apply styles to paragraph in div.
<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div > p').css('color', '#FF99CC');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="divClassusingID" style="width:400px">
<p> hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
</div>
<p>hi uday </p>
</form>
</body>
</html>
Output:
:first and :last
:first : It will find the first element.
:last : It will find the last element
<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('p:first').css('color', '#FF99CC');
$('p:last').css('color', '#FF99CC');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="divClassusingID" style="width:400px">
<p> hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
</div>
<p>hi uday </p>
</form>
</body>
output:
:even and :odd
Now, i want to find out the even and odd elements.
Here , the index starts with 0.
<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('tr:even').css('color', '#FF99CC');
$('tr:odd').css('color', '#0000FF');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="divClassusingID" style="width:400px">
<table>
<tr><td>hi uday</td></tr>
<tr> <td>hi uday</td> </tr>
<tr> <td>hi uday</td> </tr>
<tr><td>hi uday</td> </tr>
<tr><td>hi uday</td></tr>
<tr><td>hi uday</td></tr>
<tr> <td>hi uday</td></tr>
<tr><td>hi uday</td> </tr>
</table>
</div>
</form>
Output:
$(document).ready(function () {
$('#divClassusingID').css('background', '#000567');
});
Code:
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#divClassusingID').css('background', '#000567');
});
</script>
<div>
<div id="divClassusingID" style="width:400px">
adf
</div>
</div>
Class Selector
$(document).ready(function () {
$('.divClassusingID').css('background', '#000567');
});
Code:
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.divClassusingID').css('background', '#000567');
});
</script>
<div>
<div class="divClassusingID" style="width:400px">
hi uday
</div>
</div>
Element Selector
$(document).ready(function () {
$('.divClassusingID').css('background', '#000567');
});
Code:
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('p').css('font-size', '40px');
});
</script>
<div>
<div class="divClassusingID" style="width:400px">
<p> hi uday</p>
</div>
</div>
output:
Apply css to Form Selector
<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('form *').css('color', '#FF99CC');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="divClassusingID" style="width:400px">
<p> hi uday</p>
adsfasf
</div>
</div>
</form>
</body>
Select Multiple Elements
$('p, div').css('color', '#FF99CC');
It applys css color to paragraph and div
<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('p, div').css('color', '#FF99CC');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="divClassusingID" style="width:400px">
<p> hi uday</p>
<div> hi uday</div>
</div>
</div>
</form>
</body>
</html>
Output:
The parent > child (immediate child element)
$(document).ready(function () {
$('div > p').css('color', '#FF99CC');
})
It is going to apply styles to paragraph in div.
<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div > p').css('color', '#FF99CC');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="divClassusingID" style="width:400px">
<p> hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
</div>
<p>hi uday </p>
</form>
</body>
</html>
Output:
:first : It will find the first element.
:last : It will find the last element
<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('p:first').css('color', '#FF99CC');
$('p:last').css('color', '#FF99CC');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="divClassusingID" style="width:400px">
<p> hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
</div>
<p>hi uday </p>
</form>
</body>
output:
:even and :odd
Now, i want to find out the even and odd elements.
Here , the index starts with 0.
<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('tr:even').css('color', '#FF99CC');
$('tr:odd').css('color', '#0000FF');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="divClassusingID" style="width:400px">
<table>
<tr><td>hi uday</td></tr>
<tr> <td>hi uday</td> </tr>
<tr> <td>hi uday</td> </tr>
<tr><td>hi uday</td> </tr>
<tr><td>hi uday</td></tr>
<tr><td>hi uday</td></tr>
<tr> <td>hi uday</td></tr>
<tr><td>hi uday</td> </tr>
</table>
</div>
</form>
Output:
No comments:
Post a Comment