jQuery六章使用jQuery操作DOM

来源：互联网发布：java aes 256 cbc 编辑：程序博客网时间：2024/05/22 11:33

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

效果

0 0

jQuery六章 使用jQuery操作DOM

jQuery六章使用jQuery操作DOM