☆ 1.查找-创建-插入
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>查找节点 创建节点 插入节点</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var x=$("<li title='棒球'>棒球</li>");
$("ul").append(x);
var y=$("<li title='羽毛球'>羽毛球</li>");
$("ul").prepend(y);
var z=$("<li title='桌球'>桌球</li>");
$("ul>li:eq(1)").append(z);
var f=$("<li title='橄榄球'>橄榄球</li>");
$("ul").after(f);
var w=$("<li title='网球'>网球</li>");
$("ul").before(w);
});
</script>
</head>
<body>
<p title="你喜欢哪种运动?">你喜欢下边那种运动?</p>
<ul>
<li title="足球">足球</li>
<li title="乒乓球">乒乓球</li>
<li title="篮球">篮球</li>
</ul>
</body>
</html>
☆ 2. 删除-复制-替换
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>删除节点 复制节点和替换节点</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li:eq(0)").empty();
});
</script>
</head>
<body>
<p title="你喜欢哪种运动?">你喜欢下边那种运动?</p>
<ul>
<li title="足球">足球</li>
<li title="乒乓球">乒乓球</li>
<li title="篮球">篮球</li>
</ul>
</body>
</html>
☆ 3.包裹节点和样式操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>包裹节点和样式操作 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<style type="text/css">
.abc{
background:#aaa;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("p").addClass("abc");
$("p").removeClass("abc");
});
</script>
</script>
</head>
<body>
<p title="你喜欢运动吗?">你喜欢下边那种运动?</p>
<ul>
<li title="足球">足球</li>
<li title="乒乓球">乒乓球</li>
<li title="篮球">篮球</li>
</ul>
</body>
</html>
☆ 4 .text和html以及val
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> text和html以及val</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var s=$("p").val();
alert(s);
$("p").val("你好");
var w=$("p").val();
alert(w);
});
</script>
</head>
<body>
<p title="你喜欢运动吗?" value="yundong">你喜欢下边那种运动?</p>
<ul>
<li title="足球">足球</li>
<li title="乒乓球">乒乓球</li>
<li title="篮球">篮球</li>
</ul>
</body>
</html>
☆ 5.val的应用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>val的应用</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#t1").focus(function(){
var tValue=$("#t1").val();
if(tValue=="账号/手机号码/邮箱" || tValue==""){
$("#t1").val("");
}
});
$("#t1").blur(function(){
var a=$("#t1").val();
if(a==""){
$("#t1").val("账号/手机号码/邮箱");
}
});
});
</script>
</head>
<body>
<form>
<p>账号<input type="text" size="20" id="t1" value="账号/手机号码/邮箱"/></p>
<p>密码<input type="password" size="21"/></p>
<p>
<input type="submit" value="登录"/>
<input type="reset" value="重写"/>
</p>
</form>
</body>
</html>
☆ 6.DOM遍历节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> DOM遍历节点</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul").bind("click",function(e){
$(e.target).closest("li").css("color","red");
});
});
</script>
</head>
<body>
<p title="你喜欢运动吗?" value="yundong">你喜欢下边那种运动?</p>
<ul>
<li title="足球">足球</li>
<li title="乒乓球">乒乓球</li>
<li title="篮球">篮球</li>
</ul>
</body>
</html>
☆ 7. CSS DOM操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>css DOM操作</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:eq(0)").click(function(){
var c=$("p").css("color");
alert(c);
});
$("input:eq(1)").click(function(){
$("p").css({"font-size":"30px","background":"red"});
});
$("input:eq(2)").click(function(){
var x=$("p").height();
alert(x);
});
$("input:eq(3)").click(function(){
var y=$("p").width();
alert(y);
});
$("input:eq(4)").click(function(){
$("p").height(300);
});
$("input:eq(5)").click(function(){
$("p").width(400);
});
$("input:eq(6)").click(function(){
var off=$("p").offset();
var ot=off.top;
var of=off.left;
alert("top--"+ot+"---left"+of);
});
});
</script>
</head>
<body>
<input type="button" value="获取p标签的颜色"/>
<input type="button" value="设置p标签的颜色和字体大小"/>
<input type="button" value="获取p标签的高度"/>
<input type="button" value="获取p标签的宽度"/>
<input type="button" value="设置p标签的高度"/>
<input type="button" value="设置p标签的宽度"/>
<input type="button" value="获取p标签的上边距和左边距"/>
<p title="你喜欢运动吗?" value="yundong">你喜欢下边那种运动?</p>
<ul>
<li title="足球">足球</li>
<li title="乒乓球">乒乓球</li>
<li title="篮球">篮球</li>
</ul>
</body>
</html>