<!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內容。不能用于xml，但可以用于xhtml
//alert($("div").html());
//設置每個元素的 html內容。
//$("div[id='test2']").html("Hello World");
$("div").html(function(index, html) {
return html + index;
});
});
</script>
</head>
<body>
<div>
<p>Hello</p>
</div>
<div id="test2">中華</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() {
//對Html,xml都有效。
//text()取得所有匹配元素的內容 ，包括子元素。
//text()<b></b>轉化為實體。
$("div").text(function(index, text) {
return $("p").text() + text + index + "<b>我靠</b";
});
});
</script>
</head>
<body>
<p>
<b>Test</b> Paragraph.
</p>
<p>Paraparagraph</p>
<div>我是div:</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() {
//獲得單個select 的值和多選select的值。
/*
$("p").append(
"<b>Single:</b> " + $("#single").val() + " <b>Multiple:</b> "
+ $("#multiple").val().join(", "));
*/
// alert($("input").val());
//設置文本框 的值。
$("input[id]").val("hello World");
$("#single").val("Single2");
$("#multiple").val([ "Multiple", "Multiple3" ]);
$("input").val([ "check2", "radio1" ]);
$(":text.items").val(function() {
return this.value + " " + this.className;
});
});
</script>
</head>
<body>
<p></p>
<br />
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<input type="text" value="some text" />
<input id="test2" type="text" />
<input type="checkbox" value="check1" /> check1
<input type="checkbox" value="check2" /> check2
<input type="radio" value="radio1" /> radio1
<input type="radio" value="radio2" /> radio2
<input type="text" class="items" />
</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() {
//想把dom文檔中元素副本加到其他元素上時很有用。
//$("b").clone().prependTo("p");
//clone(true)，深copy
$("button").click(function() {
$(this).clone(true).insertAfter(this);
});
});
</script>
</head>
<body>
<b>Hello</b>
<p>, how are you?</p>
<button>Clone Me!</button>
</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() {
//alert($("p").css("color"));
//如果屬性名包含 "-"的話，必須使用引號:
/*
$("p").css({
color : "#ff0011",
background : "blue"
});
*/
//$("p").css({ "margin-left": "10px", "background-color": "blue" });
//$("p").css("color", "red");
$("div").click(function() {
$(this).css({
width : function(index, value) {
return parseFloat(value) * 1.2;
},
height : function(index, value) {
return parseFloat(value) * 1.2;
},
background : "green"
});
});
});
</script>
</head>
<body>
<p>how are you</p>
<div>how</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() {
//請確保在 <body> 元素的onload事件中沒有注冊函數，否則不會觸發$(document).ready()事件。
//可以在同一個頁面中無限次地使用$(document).ready()事件。其中注冊的函數會按照（代碼中的）先后順序依次執行。
//獲取匹配元素在當前窗口的相對偏移。top left
/*var p = $("p:last");
var offset = p.offset();
p.html("left: " + offset.left + " ,top " + offset.top);
p.offset({
top : 10,
left : 30
});
*/
//position元素相對于父元素的偏移。只對可見元素有效。
//$("p:last").html($("p:first").position().left);
//相對滾動條頂部的偏移。
//$("p:last").html($("p:first").scrollTop());
//$("p:first").scrollLeft(300);
//$("p:last").html($("p:first").height());//19
//內部區域的高度。
//$("p:last").html($("p:first").innerHeight());//19
$("p:last").html($("p:first").outerHeight());//19
});
</script>
</head>
<body>
<p>Hello</p>
<p>2nd Paragraph</p>
請確保在 body元素的onload事件中沒有注冊函數，否則不會觸發$(document).ready()事件。
//可以在同一個頁面中無限次地使用$(document).ready()事件。其中注冊的函數會按照（代碼中的）先后順序依次執行。
</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 class="wrap"><p>Test Paragraph.</p></div>
//$("p").wrap("<div class='green'></div>");
//$("p").wrap(document.getElementById("content"));
/*$("p").wrap(function() {
return "<div class='green'/>"
});
*/
//$("p").unwrap();
//將每個匹配元素的子內容包裹起來。
$("p").wrapInner("<b></b>");
});
</script>
</head>
<body>
<p>Test Paragraph.</p>
<div id="content" class="green"></div>
<div>
<p>Hello</p>
<p>cruel</p>
<p>World</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() {
//$("p").empty();
//$("p").remove();//how are 沒刪除
$("p").remove(".hello");//刪除class="hello"
//這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素
//detach表示游離態。
$("p").detach();
});
</script>
</head>
<body>
<p>
Hello, <span>Person</span> <a href="#">and person</a>
</p>
<p class="hello">Hello</p>
how are
<p>you?</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() {
//$("p").append("<b>Hello</b>");
/*
$("p").append(function(index, html) {
return html + " append"
});
*/
//注意之前 <p>I would like to say:</p>這一段就不存在了。
//$("p").appendTo("div");
//$("<p/>").appendTo("div").addClass("green").end().addClass("red");
//[ <p><b>Hello</b>I would like to say: </p> ]
//$("p").prepend("<b>Hello</b>");
});
</script>
</head>
<body>
<p>I would like to say:</p>
<div></div>
<div></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").replaceWith("<b>Paragraph</b>")
$("<b>Paragraph</b>").replaceAll("p");
});
</script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</body>
</html>