jquery-1.2.6 core function examples

css

.first {
    color: #f90;
}
.second {
    color: #f00;
    min-height: 20px;
    border: #949 1px solid;
    margin: 5px 0px;
}
.three {
    float:right;
}

html

<div>Click here</div>
<div>to iterate through</div>
<div>these divs.</div>

<div id="d1">div#d1</div>
<div class="first">div.first</div>
<div class="first">div.first</div>
<div class="first">div.first</div>
<p>one</p> <div><p>two</p></div> <p>three</p>
To do list: <span class="three">(click here to change)</span>
<ul>
    <li>Eat</li>
    <li>Sleep</li>
    <li>Be merry</li>
</ul>
<button>Change colors</button>
<span>this span innerText will be changed.</span>
<div class="second"></div>
<div class="second"></div>
<div class="second" id="stop">Stop here</div>
<div class="second"></div>
<div class="second"></div>

<input type="checkbox" name="t1" value="test1" id="t1"/>
<script type="text/javascript" charset="utf-8" src="/lib/jquery/jquery-1.2.6.js"></script>

javascript

$("<div><p>Hello</p></div>").appendTo("body");
// Does NOT work in IE:
// $("<input/>").attr("type", "checkbox").appendTo("body");
// Does work in IE:
$("<input type='checkbox'/>").appendTo("div.first");
$("<input type='checkbox'/>").insertBefore("#d1");
$(".first").hide();
$(function() {
    console.log("document ready");
});
$("div > p").css("border", "1px solid gray");
$('input:checkbox').get(0).checked = true;
$(document.body).click(function() {
    $("div").each(function(i) {
        console.log(i);
        if (i == 2) return true; // skip this step
        if (i == 5) return false; // break loop
        if (this.style.color != "blue") {
            this.style.color = "blue";
        } else {
            this.style.color = "";
        }
    });
});
$("span.three").click(function() {
    $("li").each(function() {
        $(this).toggleClass("first");
    });
});
$("button").click(function() {
    $("div.second").each(function(index, domEle) {
        // this == domEle, $(this) == jQuery Object
        $(domEle).css("backgroundColor", "yellow");
        if ($(this).is("#stop")) {
            $("span").not(".three").text("Stopped at div index #" + index);
            return false; // break loop
        }
    });
});