<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//以元素在html文檔中出現的順序來排序。而不是簡單的添加。
//$("p").add("span").addClass("green");
//動態生成一個元素添加至匹配的元素中。
/*
$("p").add("<span>second</span>").text(function(index, html) {
alert(html);//打印Hello,second
});
*/
$("div>p").add(document.getElementById("a")).html(function(index,html){
alert(html);
});
});
</script>
</head>
<body>
<p>Hello</p>
<span>Hello Again</span>
<div>
<p>Hello</p>
<p>
<span id="a">Hello Again</span>
</p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//取得一個包含元素集合中的每一個元素的的所有子元素的元素集合。
$(".one").children().hover(function() {
$(this).addClass("green");
});
/*
$("div").children(".selected").html(function() {
alert($(this).text());
});
*/
/*
$(document).bind("click", function(e) {
$(e.target).closest("li").toggleClass("green");
});
*/
});
</script>
</head>
<body>
<p>Hello</p>
<div class="one">
<span><font>Hello Again</font> </span>
<p>I love</p>
<div class="two">two</div>
<div class="three">three</div>
</div>
<p>And Again</p>
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<p>And Again</p>
</div>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//查找匹配元素內部所有子節點，如果不iframe，則查找文檔內容。
//find()搜索與指定表達式匹配的元素。一般用來找出正在處理元素的 后代元素。
//$("p").contents().not("[nodeType=1]").wrap("<b/>");
$("iframe").contents().find("body").append("I'm in an iframe!");
});
</script>
</head>
<body>
<p>
Hello <a href="http://ejohn.org/">John</a>, how are you doing?
</p>
<iframe src="/demo.html" width="300" height="100"></iframe>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//查找當前元素之后 的所有元素，直到遇到匹配的那個元素為止。
//$("#term-2").nextUntil("dt").addClass("green");
//$("#term-2").parent();//所有匹配元素的唯 一父元素的元素集合。
//$("#term-2").parents();//所有匹配元素的祖 先元素的元素集合（不含根元素。）
//匹配所有元素的同級的前一個元素的集合。
$("p").prev();
//包含匹配元素集合中每個元素的所有唯一同輩元素的元素集合。
$("p").siblings();
});
</script>
</head>
<body>
<dl>
<dt>term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt>term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
<p>Hello</p>
<div>
<span>Hello Again</span>
</div>
<p>And Again</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//even雙數的意思
//匹配父元素下第N個子或奇偶元素nth-child()從1開始。
//$("ul li:nth-child(2)").addClass("green");
//$("ul li:nth-child(even)").addClass("green");
//$("ul li:nth-child(odd)").addClass("green");
//$("ul li:nth-child(3n+1)").addClass("green");
//匹配第一個子元素。如果父元素是集合的話，那么將為每一個父元素匹配第一個子元素。
//$("ul li:first-child").addClass("green");
//$("ul li:last-child").addClass("green");
$("ul li:only-child").addClass("green");
});
</script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<ul>
<li>Glen</li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//匹配所有input textarea,select button元素。
//$(":input").addClass("green");
//匹配所有<input type="text"/>
//$(":text").addClass("green");
//<input type="password" />
//$(":password").addClass("green");
//<input type="radio" />
//$(":radio").addClass("green");
//<input type="checkbox" />
//$(":checkbox").addClass("green");
//<input type="submit" />
//$(":submit").addClass("green");
//<input type="image" />
//$(":image").addClass("green");
//<input type="reset" />
//$(":reset").addClass("green");
//<input type="button" /> <button></button>
//$(":button").addClass("green");
//<input type="file" />
//$(":file").addClass("green");
//不知道怎么測試
//$("input:hidden")
});
</script>
</head>
<body>
<form>
<input type="text" /> <input type="checkbox" /> <input type="radio" />
<input type="image" /> <input type="file" /> <input type="submit" />
<input type="reset" /> <input type="password" /> <input
type="button" /> <select><option />
</select>
<textarea></textarea>
<button></button>
<input type="text" name="email" /> <input type="hidden" name="id" />
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//[ <input name="id" /> ]
//$("input:enabled").addClass("green");
//<input name="email" disabled="disabled" />
//$("input:disabled").addClass("green");
//$("input:checked").addClass("green");
/*
$(":checkbox").click(function() {
$("input:checked").addClass("green");
$("input:not(:checked)").removeClass("green");
});
*/
$("select option:selected").addClass("green");
});
</script>
</head>
<body>
<form>
<input name="email" disabled="disabled" /> <input name="id" /> <input
type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" /> <input
type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</select>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//選取所有div，以及內部的p
$("div").find("p").andSelf().addClass("green");
$("div").find("p").end();//回到$("div");
});
</script>
</head>
<body>
<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<script type="text/javascript">
$(function() {
//取得第一個匹配元素的屬性值。如果沒有相應的屬性值，返回#ff0000
//alert($("img").attr("src"));
//img alt表示圖像不無法顯示時的替代文本。
//將一個k-v形式的對象設置為所有匹配元素的屬性。
/*
$("img").attr({
src : "test.jpg",
alt : "Test Image"
});
*/
//為所有匹配元素設置 一個屬性
//$("img").attr("src", "test.jpg");
//為所有匹配的元素設置一個計算的屬性值 。
/*
$("img").attr("alt", function() {
return this.src;
});
*/
$("img").removeAttr("src");
});
</script>
</head>
<body>
<img src="test.jpg" />
<br />
<img />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//為每個匹配元素加上class
//$("p").addClass("green");
//function接受兩個參數index和class
/*
$("ul li").addClass(function(index, cls) {
alert(cls);
alert(index);
return ;
});
*/
//removeClass(function())
/*
$("ul li").removeClass(function(index, cls) {
$(this).removeClass(cls);
alert(index);
});
*/
//如果有就刪除，如果沒有就添加
//$("ul li").toggleClass("green");
//swtich(Boolean)，用于決定元素是否包含class的bool
/*
var count = 0;
$("ul li").click(function() {
$(this).toggleClass("green", count++ % 3 == 0);
});
*/
//toggleClass(function(),switch);
var count = 0;
$("ul li").toggleClass(function(index, cls) {
alert(index);
}, false);
});
</script>
</head>
<body>
<p>Hello</p>
<ul>
<li class="green">Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//從0開始。獲取第N個元素。
//$("p").eq(1).addClass("green");
//hasClass檢查當前元素是否含有特定的類。
/*
$("div").click(function() {
if ($(this).hasClass("green"))
$(this).animate({
left : -10
}, "slow");
});
*/
//篩選出與指定表達式匹配的元素集合,多個條件用","
//$("p").filter(".selected,:first").addClass("green");
//篩選出與指定函數返回值匹配的元素集合
//$("ol",this)構造了一個jquery對象。
/*
$("div p").filter(function(index) {
return $("ol", this).length == 0;
}).addClass("red");
*/
//檢查當前元素集合，至少有一個元素符合則返回true
var b = $("div[id='test2'] input[type='checkbox']").parent().is("form");
alert(b);
});
</script>
</head>
<body>
<p>This is just a test.</p>
<p>So is this</p>
<div class="green">a div</div>
<div></div>
<p>Hello</p>
<p>Hello Again</p>
<p class="selected">And Again</p>
<div>
<p>
<ol>
<li>Hello</li>
</ol>
</p>
<p>How are you?</p>
</div>
<div id="test2">
<form>
<input type="checkbox" />
</form>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red {
background-color: red;
}
.green {
background: green;
}
</style>
<script type="text/javascript">
$(function() {
//將一組元素轉換成其他數組。
/*
$("p").append($("input").map(function() {
return $(this).val();
}).get().join(", "));
*/
//$("li").has("ul").addClass("green");
// $("p").not($("#selected")[0]).css("background-color", "yellow");
//slice選擇一個匹配的子集。
//如果本身$("div")有子元素x,再加入x的話，不會增長？是的。
$("div p").slice(0, 1).wrapInner("<b></b>").appendTo($("div"));
});
</script>
</head>
<body>
<p>
<b>Values: </b>
</p>
<form>
<input type="text" name="name" value="John" /> <input type="text"
name="password" value="password" /> <input type="text" name="url"
value="http://ejohn.org/" />
</form>
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li id="not1">list item 2-a</li>
<li>list item 2-b</li>
</ul></li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
<p>Hello</p>
<p id="selected">Hello Again</p>
<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
</body>
</html>