jquery-1.2.6 contents and visibility selectors examples

css

div {
    border: #ddd 1px solid;
    min-height: 20px;
    margin: 3px;
}
table, td {
    border: #ddd 1px solid;
}
.first {
    font-weight: bold;
}

html

<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" src="/lib/jquery/jquery-1.2.6.js"></script>

javascript

$("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");
});