<!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>