jQuery Contents and Visibility Selectors examples
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="/lib/jquery/jquery-1.2.6.js"></script>
<style type="text/css" media="screen">
div {
border: #ddd 1px solid;
min-height: 20px;
margin: 3px;
}
table, td {
border: #ddd 1px solid;
}
.first {
font-weight: bold;
}
.hider {}
.starthidden {}
</style>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
<table>
<tr><td>TD #0</td><td></td></tr>
<tr><td>TD #2</td><td></td></tr>
<tr><td></td><td>TD#5</td></tr>
</table>
<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>
<span></span>
<div></div>
<div style="display:none;" class="hider">Hider!</div>
<div></div>
<div class="starthidden">Hider!</div>
<div></div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<span> </span>
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
<script type="text/javascript" charset="utf-8">
$("div:contains('John')").css("text-decoration", "underline");
$("p").contents().not("[nodeType=1]").wrap("<b/>");
$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');
$("div:has(p)").addClass("first");
$("td:parent").fadeTo(1500, 0.5);
// in some browsers :hidden includes head, title, script, etc... so limit to body
$("span:first").text("Found " + $(":hidden", document.body).length + " hidden elements total.");
$("div:hidden").filter('.hider').show(1000);
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
$("button").click(function () {
$("div:hidden").show("fast");
});
</script>
</body>
</html>
No comments :
Post a Comment