<html>
<head>
<title>day0100.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
a{
color:#999;
text-decoration:none;
}
dl{
width:200px;
}
dl dd{
width:200px;
line-height:30px;
}
dl dt{
display:block;
height:25px;
line-height:25px;
background-color:#00F;
color:#fff;
text-align:center;
}
.tye{
background:pink;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("dd").click(function(){
//$("dd").css({"background":"pink"});
//$(this).addClass("tye");
$(this).toggleClass("tye");
});
});
</script>
</head>
<body>
<dl>
<dt>新手上路</dt>
<dd class="tye"><a href="#" >注册登录</a></dd>
<dd><a href="#">易付宝账户激活</a></dd>
<dd><a href="#">易付宝实名认证</a></dd>
<dd><a href="#">密码相关</a></dd>
<dd><a href="#">会员购买</a></dd>
</dl>
</body>
</html>
效果
<!DOCTYPE html>
<html>
<head>
<title>day0200.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$(function(){
//添加节点
//添加到结尾
/*$("#d").click(function(){
var jq=$("<li>3333</li>");
$("ul").append(jq);
});
*/
//添加到开头
/*$("#d").click(function(){
var jq=$("<li>3333</li>");
$("ul").prepend(jq);
});
*/
//替换
/*$("#a").click(function(){
$("li:eq(0)").replaceWith("<li>ppp</li>");
});*/
$("#u").click(function(){
//var jq=$("<li>3333</li>");
$("ul li:eq(0)").clone(true).appendTo("ul");
});
});
</script>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
</ul>
<input type="button" id="d" value="添加"/>
<input type="button" id="a" value="替换"/>
<input type="button" id="u" value="克隆"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>kh4.html</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
#listbox{
margin:10px;
padding:15px;
border:1px solid #CCCCCC;
color:#0066FF;
}
dl{
display:block;
float:left;
margin:15px;
}
dd{
font-size:14px;
color:#663300;
}
dd a{
text-decoration:none;
font-size:14px;
color:#FF3300;
}
dd a:hover{
text-decoration:underline;
}
.clear{
clear:both;
height:0px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".add").live("click",function(){
var myid=$("<dl>"
+"<dt><img src='images/p1.jpg' /></dt>"
+"<dd>街机三国</dd>"
+"<dd>"+"<a class='del' href='javascript:void(0);'>删除</a>"+"</dd>"
+"</dl>");
$("#listbox").append(myid);
});
$(".del").bind("click",function(){
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<div id='listbox'>
<dl>
<dt><img src="images/p1.jpg" /></dt>
<dd>街机三国</dd>
<dd><a class='del' href='javascript:void(0);'>删除</a></dd>
</dl>
<dl>
<dt><img src="images/p2.jpg" /></dt>
<dd>霸域</dd>
<dd><a class='del' href='javascript:void(0);'>删除</a></dd>
</dl>
<dl>
<dt><img src="images/p3.jpg" /></dt>
<dd>斗破乾坤</dd>
<dd><a class='del' href='javascript:void(0);'>删除</a></dd>
</dl>
<div class='clear'></div>
</div>
<input type="button" value='新增游戏' class='add'/>
</body>
</html>
效果
<!DOCTYPE html>
<html>
<head>
<title>sj3.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css" >
*{
font-size:12px;
}
tr{
text-align:center;
height:40px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".newone").live("click",function(){
var myid=$("<tr bgcolor='#FAF3E9'>"
+"<td>"
+"<input type='checkbox'/>"
+"</td>"
+"<td>张三</td>"
+"<td>男</td>"
+"<td>6565654315321321</td>"
+"<td>短工</td>"
+"<td>18625455412</td>"
+"<td>1995-12-09</td>"
+"<td>10,000.00</td>"
+"<td>"
+"<img class='add' src='images/add.jpg' />"
+"<img class='del' src='images/del.jpg' />"
+"</td>"
+"</tr>");
$("table").append(myid);
});
$(".del").bind("click",function(){
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<table width="800" >
<tr class='ee' bgcolor="#EBE7DC">
<td><input type="checkbox"/></td>
<td>姓名</td>
<td>性别</td>
<td>卡号</td>
<td>会员级别</td>
<td>电话号码</td>
<td>出生年月日</td>
<td>消费金额</td>
<td> </td>
</tr>
<tr bgcolor="#FAF3E9">
<td><input type="checkbox"/></td>
<td>张三</td>
<td>男</td>
<td>6565654315321321</td>
<td>短工</td>
<td>18625455412</td>
<td>1995-12-09</td>
<td>10,000.00</td>
<td>
<img class='add' src="images/add.jpg" />
<img class='del' src="images/del.jpg" />
</td>
</tr>
<tr bgcolor="#FEFAF7">
<td><input type="checkbox"/></td>
<td>张三</td>
<td>男</td>
<td>6565654315321321</td>
<td>短工</td>
<td>18625455412</td>
<td>1995-12-09</td>
<td>10,000.00</td>
<td>
<img class='add' src="images/add.jpg" />
<img class='del' src="images/del.jpg" />
</td>
</tr>
<tr bgcolor="#FAF3E9">
<td><input type="checkbox"/></td>
<td>张三</td>
<td>男</td>
<td>6565654315321321</td>
<td>短工</td>
<td>18625455412</td>
<td>1995-12-09</td>
<td>10,000.00</td>
<td>
<img class='add' src="images/add.jpg" />
<img class='del' src="images/del.jpg" />
</td>
</tr>
</table>
<a href="#" class='newone'>新增</a>
</body>
</html>
效果
2096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
