Find the parent element of each paragraph with a class “selected”.
Download jquery-1.3.2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").parent(".selected").css("background", "yellow");
});
</script>
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>
Output :
Hello
Hello Again
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var newText = $("p").text().split(" ").join("</div><div>");
$("p").html(newText).find("div").hover(
function () { $(this).addClass("y"); },
function () { $(this).removeClass("y"); });
});
</script>
<style>
.y { background:yellow; }
</style>
<p>a ab abc</p>
Output :
a
ab
abc
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").one('click', function () {
if ($(this).is(":contains('Hello')")) {
$("p").text("It's the Hello div.");
}else{
$("p").text("It's NOT the Hello div.");
}
$("p").hide().slideDown("slow");
});
});
</script>
Click to see the text.
<div>Hello</div>
<div>World</div>
<div>Hello World</div>
<div>World</div>
<div>Hello</div>
<div>Hello</div>
<p></p>
Output :
Click to see the text.
Hello
World
Hello World
World
Hello
Hello
It’s the Hello div.
Make all visible divs turn yellow on click.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
});
</script>
<div>click me</div>
Output :
click me
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:hidden").show(3000);
});
</script>
<div style="display:none;">Hello</div>
<div class="starthidden">World</div>
Output :
Hello
World
Contains(text) matches elements which contain the given text.
Download jquery-1.3.2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:contains('F')").css("background-color", "#bbbbff");
});
</script>
<table>
<tr><td>First</td></tr>
<tr><td>Middle</td></tr>
<tr><td>Last</td></tr>
</table>
Output :
First
Middle
Last
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td:empty").text("Was empty!").css('background', 'red');
});
</script>
<table>
<tr><td>First</td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
Matches elements which contain the given text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:contains('J')").css("text-decoration", "underline");
});
</script>
<style>
div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
</style>
<div>Java</div>
<div>C#</div>
<div>JavaScript</div>
<div>CSS</div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").remove(":contains('Hello')");
});
</script>
<p class="abc">Hello World</p>
Copyright © 2010 PHP code. net. All Rights Reserved. Designed By: Web Design Company