jQuery core function 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">
.first {
color: #f90;
}
.second {
color: #f00;
min-height: 20px;
border: #949 1px solid;
margin: 5px 0px;
}
.three {
float:right;
}
</style>
</head>
<body>
<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"></div>
<div class="second"></div>
<div class="second"></div>
<div class="second" id="stop">Stop here</div>
<div class="second"></div>
<div class="second"></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">
$("<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
}
});
});
</script>
</body>
</html>
No comments :
Post a Comment