Wednesday, October 01, 2008

jQuery Contents and Visibility Selectors examples

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<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 {}
<div>John Resig</div>

<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

<p>Hello <a href="">John</a>, how are you doing?</p>
<tr><td>TD #0</td><td></td></tr>
<tr><td>TD #2</td><td></td></tr>

<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>

<div style="display:none;" class="hider">Hider!</div>

<div class="starthidden">Hider!</div>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
<span> </span>
<button>Show hidden to see they don't change</button>
<div class="starthidden"></div>

<div style="display:none;"></div>

<script type="text/javascript" charset="utf-8">
$("div:contains('John')").css("text-decoration", "underline");
$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');
$("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.");
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");

$("div:visible").click(function () {
$(this).css("background", "yellow");
$("button").click(function () {

No comments :