3-1 DOM页面文档

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>DOM 树状文档</title>
  6. <style type="text/css">
  7.   body{ font-size:13px;}
  8.   table,div,p,ul{ width:280px; border:solid 1px #666; margin:10px 0px 10px 0px; padding:0px; background-color:#eee;}
  9. </style>
  10. </head>
  11. <body>
  12.  <table>
  13.    <tr><td>TD1</td></tr>
  14.    <tr><td>TD2</td></tr>
  15.  </table>
  16.  <div>Div</div>
  17.  <p>P</p>
  18.  <div><span>Span</span></div>
  19.  <ul>
  20.    <li>Li1</li>
  21.    <li>Li2</li>
  22.  </ul>
  23. </body>
  24. </html>

3-2 获取元素的属性 attr()

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>获取元素的属性</title>
  6. <style type="text/css">
  7.   body{ font-size:12px;}
  8.   div{ float:left; padding:10px;}
  9.   img{ border:solid 1px #ccc; padding:3px; float:left;}
  10. </style>
  11. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  12. <script>
  13.   $(function(){
  14.       //attr(name) ----获取元素的属性
  15.       var imgSrc = $("img").attr("src");
  16.       var imgTitle = $("img").attr("title");
  17.       $("#divAlt").html( imgSrc +"<br />"+imgTitle );
  18.       })
  19. </script>
  20. </head>
  21. <body>
  22.   <img alt="" title="一副画" src="img/1.png" />
  23.   <div id="divAlt"></div>
  24. </body>
  25. </html>

3-3 设置元素的属性 attr(key,valus),attr({key:value,key:value})

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>设置元素的属性</title>
  6. <style type="text/css">
  7.   body{ font-size:12px;}
  8.   .clsSpn{ float:left; padding-top:10px; padding-left:10px;}
  9.   .clsImg{ border:solid 1px #ccc; padding:3px; float:left;}
  10. </style>
  11. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  12. <script>
  13.   $(function(){
  14.       $("img").attr("alt","111"); //设置alt属性
  15.       $("img").attr("src","img/3.png"); //设置src属性
  16.       $("img").attr("title","test"); //设置title属性
  17.       $("img").attr({src:"img/2.png",title:"111"});//同时设置两个属性
  18.  
  19.       $("img").addClass("clsImg");//增加样式
  20.       $("span").html("加载完毕");
  21.       })
  22. </script>
  23. </head>
  24. <body>
  25.   <img alt="" src="img/1.png" style="float:left;" />
  26.   <span class="clsSpn">正在加载图片...</span>
  27. </body>
  28. </html>

3-4 设置元素属性（二），带函数  attr(key,function(index))

删除元素属性，removeAttr（name）

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>设置元素的属性(二)</title>
  6. <style type="text/css">
  7.   body{ font-size:12px;}
  8.   .clsSpn{ float:left; padding-top:10px; padding-left:10px;}
  9.   .clsImg{ border:solid 1px #ccc; padding:3px; float:left;}
  10. </style>
  11. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  12. <script>
  13.   //attr()
  14.   //removeAttr()
  15.   $(function(){
  16.       $("img").attr("src", function(){
  17.           return "img/" + Math.floor(Math.random()*2+1)+".png";
  18.           });
  19.       $("img").attr("title","1qaz");//
  20.       $("img").addClass("clsImg");
  21.       $("img").removeAttr("style");
  22.       })
  23. </script>
  24. </head>
  25. <body>
  26.   <img alt="" src="img/1.png" style="float:left;" />
  27. </body>
  28. </html>

3-5 获取或设置元素的内容 html(),html(val),text(),text(val)

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>获取或设置元素的内容</title>
  6. <style type="text/css">
  7.   body{ font-size:15px; text-align:center;}
  8.   div{ border:solid 1px #666; padding:5px; width:220px; margin:5px;}
  9. </style>
  10. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  11. <script>
  12.   //html(val) --类似innerHTML，获取或设置元素的HTML内容
  13.   //text(val) --类似innerText，获取或设置元素的文本内容
  14.   $(function(){
  15.       var strHtml = $("#divShow").html(); //获取html内容
  16.       var strText = $("#divShow").text(); //获取文本内容
  17.       $("#divHTML").html(strHtml); //设置html内容
  18.       $("#divText").text(strText); //设置文本内容
  19.       })
  20. </script>
  21. </head>
  22. <body>
  23.   <div id="divShow"><b><i>Write Less Do More</i></b></div>
  24.   <div id="divHTML"></div>
  25.   <div id="divText"></div>
  26. </body>
  27. </html>

3-6 获取或设置元素的值  val(val) --该方法常用于表单中获取或设置对象的值。

通过val()方法还可以获取select标记中的多个选项值，语法：val().join(",")

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>获取或设置元素的值</title>
  6. <style type="text/css">
  7.   body{ font-size:12px; text-align:center;}
  8.   div{ padding:3px; margin:3px; width:120px; float:left;}
  9.   .txt{ border:#666 1px solid; padding:3px;}
  10. </style>
  11. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  12. <script>
  13.   //val()
  14.   //val().join(",")
  15.   //val(array) --参数为数组，其作用是设置元素被选中
  16.   //**$(":radio").val(["radio2","radio3"]) --ID号为radio2和radio3的单选框被选中
  17.   $(function(){
  18.       $("select").change(function(){//设置列表框change事件
  19.           //获取列表框所选中的全部选项的值
  20.           var strSel = $("select").val().join(",");
  21.           $("#p1").html(strSel); //显示列表框所选中的全部选项的值
  22.           })
  23.       $("input").change(function(){
  24.           var strText = $("input").val();
  25.           $("#p2").html(strText);
  26.           })
  27.       $("input").focus(function(){//设置文本框focus事件
  28.           $("input").val("");//清空文本框的值
  29.           })
  30.       })
  31. </script>
  32. </head>
  33. <body>
  34.   <div>
  35.     <select multiple="multiple" style="height:96px; width:85px;">
  36.       <option value="1">Item 1</option>
  37.       <option value="2">Item 2</option>
  38.       <option value="3">Item 3</option>
  39.       <option value="4">Item 4</option>
  40.       <option value="5">Item 5</option>
  41.       <option value="6">Item 6</option>
  42.     </select>
  43.     <p id="p1"></p>
  44.   </div>
  45.   <div>
  46.     <input type="text"  class="txt" />
  47.     <p id="p2"></p>
  48.   </div>
  49. </body>
  50. </html>

3-7  直接设置元素样式值  css(name,value)

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>直接设置元素样式值</title>
  6. <style type="text/css">
  7.   body{ font-size:15px;}
  8.   p{  padding:5px; width:220px;}
  9. </style>
  10. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  11. <script>
  12.   //css(name,value)
  13.   $(function(){
  14.       $("p").click(function(){
  15.           $(this).css("font-weight","bold");
  16.           $(this).css("font-style","italic");
  17.           $(this).css("background-color","#eee");
  18.           })
  19.       })
  20. </script>
  21. </head>
  22. <body>
  23.   <p>Write Less Do More</p>
  24. </body>
  25. </html>

3-8  增加css类别  addClass(class),addClass(class1  class2  ......)

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>增加css类别</title>
  6. <style type="text/css">
  7.   body{ font-size:15px;}
  8.   p{ padding:5px; width:220px;}
  9.   .cls1{ font-weight:bold; font-style:italic;}
  10.   .cls2{ border:solid 1px #666; background-color:red;}
  11. </style>
  12. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  13. <script>
  14.   //addClass(class0 class1......)
  15.   $(function(){
  16.       $("p").click(function(){
  17.           $(this).addClass("cls1 cls2");
  18.           })
  19.       })
  20. </script>
  21. </head>
  22. <body>
  23.   <p>Write Less Do More</p>
  24. </body>
  25. </html>

3-9  类别切换,删除类别

toggleClass(class) --当元素中含有名称为class的Css类别时，删除该类别，否则增加一个该名称的CSS类别。

removeClass(class) --$("p").removeClass("cls0");

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>类别切换,删除类别</title>
  6. <style type="text/css">
  7.   .clsImg{ border:solid 1px #666; padding:3px;}
  8. </style>
  9. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  10. <script>
  11.   //toggleClass(class) --当元素中含有名称为class的Css类别时，删除该类别，否则增加一个该名称的CSS类别。
      //**toggleClass()可以实现类别间的切换，而css()或addClass()方法仅是增加新的元素样式，并不能实现类别的切换功能。
  12.   //removeClass(class) --$("p").removeClass("cls0");
  13.   $(function(){
  14.       $("img").click(function(){
  15.           $(this).toggleClass("clsImg");
  16.           })
  17.       })
  18. </script>
  19. </head>
  20. <body>
  21.   <img src="img/1.png" alt="" title="jQuery" />
  22. </body>
  23. </html>

3-10  动态创建节点元素  --$("body").append($div);

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>动态创建节点元素</title>
  6. <style type="text/css">
  7.   body{ font-size:13px;}
  8.   ul{ padding:0px; list-style:none;}
  9.   ul li{ line-height:2.0em;}
  10.   .divL{ float:left; width:200px; background-color:#eee; border:solid 1px #666; margin:5px; padding:0px 8px 0px 8px;}
  11.   .divR{ float:left; width:200px; display:none; border:solid 1px #ccc; margin:5px; padding:0px 8px 0px 8px;}
  12.   .txt{ border:#666 1px solid; padding:3px; width:120px;}
  13.   .btn{ border:#666 1px solid; padding:2px; width:60px;}
  14. </style>
  15. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  16. <script>
  17.   //创建节点
  18.   //var $div = $("<div title = '11'>2222</div>");
  19.   //$("body").append($div);
  20.   $(function(){
  21.       $("#Button1").click(function(){
  22.           //
  23.           var $str1 = $("#select1").val();
  24.           var $str2 = $("#text1").val();
  25.           var $str3 = $("#select2").val();
  26.           var $str4 = $("#text2").val();
  27.  
  28.           var $div = $("<"+$str1 +" " + $str3 + "='" + $str4 +"'>" + $str2+"</"+$str1+">");
  29.           $(".divR").show().append($div);
  30.           })
  31.       })
  32.  
  33. </script>
  34. </head>
  35. <body>
  36.   <div class="divL"><p></p>
  37.     <ul>
  38.       <li>元素名：
  39.         <select id="select1">
  40.           <option value="p">p</option>
  41.           <option value="div">div</option>
  42.         </select>
  43.       </li>
  44.       <li>内容为：
  45.         <input type="text" id="text1" class="txt" />
  46.       </li>
  47.       <li>属性名：
  48.         <select id="select2">
  49.           <option value="title">title</option>
  50.         </select>
  51.       </li>
  52.       <li>属性值:
  53.         <input type="text" id="text2" class="txt" />
  54.       </li>
  55.       <li style="text-align:center; padding-top:5px;"><input id="Button1" type="button" value="创建" class="btn" /></li>
  56.     </ul>
  57.   </div>
  58.   <div class="divR"></div>
  59. </body>
  60. </html>

3-11  动态插入节点方法,内部插入节点方法（一）

append(content) --向所选择的元素内部插入内容
  append(function(index,html)) --向所选择的元素内部插入function函数所返回的内容
  appendTo(content) --把所选择的元素追加到另一个指定的元素集合中
  prepend(content) --向每个所选择的元素内部前置内容
  prepend(function(index,html)) --向所选择的元素内部前置function函数所返回的内容
  prependTo(content) --将所选择的元素前置到另一个指定的元素集合中

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>动态插入节点方法,内部插入节点方法（一）</title>
  6. <style type="text/css">
  7.   body{ font-size:13px;}
  8. </style>
  9. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  10. <script>
  11.   //内部插入节点方法
  12.   //append(content) --向所选择的元素内部插入内容
  13.   //append(function(index,html)) --向所选择的元素内部插入function函数所返回的内容
  14.   //appendTo(content) --把所选择的元素追加到另一个指定的元素集合中
  15.   //prepend(content) --向每个所选择的元素内部前置内容
  16.   //prepend(function(index,html)) --向所选择的元素内部前置function函数所返回的内容
  17.   //prependTo(content) --将所选择的元素前置到另一个指定的元素集合中
  18.   $(function(){
  19.       $("div").append(retHtml);
  20.       function retHtml(){
  21.           var str = "<b>Write Less Do More</b>";
  22.           return str;
  23.           }
  24.       })
  25. </script>
  26. </head>
  27. <body>
  28.   <div>jQuery</div>
  29. </body>
  30. </html>

3-12  动态插入节点方法,内部插入节点方法（二）

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>动态插入节点方法,内部插入节点方法（二）</title>
  6. <style type="text/css">
  7.   body{ font-size:13px;}
  8.   img{ border:solid 1px #ccc; padding:3px; margin:5px;}
  9.   span{ background-color:#999; }
  10. </style>
  11. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  12. <script>
  13.   //appendTo(content) --该方法用于将一个元素插入另一个指定的元素内容中
  14.   //$("span").appendTo($("div")); --即将span标记插入div标记中
  15.   $(function(){
  16.       $("img").appendTo($("span"));
  17.       })
  18.  
  19. </script>
  20. </head>
  21. <body>
  22.   <img title="test" src="img/1.png" />
  23.   <span><img title="test2" src="img/2.png" /></span>
  24. </body>
  25. </html>

3-13  动态插入节点方法,外部插入节点

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>动态插入节点方法,外部插入节点</title>
  6. <style type="text/css">
  7.   body{ font-size:13px;}
  8. </style>
  9. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  10. <script>
  11.   //外部插入节点
  12.   //after(content) --向所选择的元素外部后面插入内容
  13.   //after(function) --向所选择的元素外部后面插入function函数所返回的内容
  14.   //before(content) --向所选择的元素外部前面插入内容
  15.   //before(function) --向所选择的元素外部前面插入function函数所返回的内容
  16.   //insertAfter(content) --将所选择的元素插入另一个指定的元素外部后面
  17.   //insertBefore(content) --将所选择的元素插入另一个指定的元素外部前面
  18.   $(function(){
  19.       $("span").after(retHtml);
  20.        function retHtml(){
  21.           var str = "<b>Write Less Do More</b>";
  22.           return str;
  23.           }
  24.       })
  25. </script>
  26. </head>
  27. <body>
  28.   <span>jQuery</span>
  29. </body>
  30. </html>

3-14  复制元素节点

clone() --该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。

clone(true) --参数设置为true就可以复制元素的所有事件处理。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>复制元素节点</title>
  6. <style type="text/css">
  7.   img{ border:solid 1px #ccc; padding:3px; margin:5px;}
  8. </style>
  9. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  10. <script>
  11.   //clone() --该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。
  12.   //clone(true) --参数设置为true就可以复制元素的所有事件处理。
  13.   $(function(){
  14.       $("img").click(function(){
  15.           $(this).clone(true).appendTo("span");
  16.           })
  17.       })
  18. </script>
  19. </head>
  20. <body>
  21.   <span><img title="test" src="img/3.png" /></span>
  22. </body>
  23. </html>

3-15  替换元素节点

replaceWith(content) --将所有选择的元素替换成指定的html或DOM元素，其中参数content为被所选择元素替换的内容

  replaceAll(selector) --将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>替换元素节点</title>
  5. <style type="text/css">
  6.   body{ font-size:13px;}
  7.   span{ font-weight:bold;}
  8.   p{ background-color:#eee; padding:5px; width:200px;}
  9. </style>
  10. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  11. <script>
  12.   //replaceWith(content) --将所有选择的元素替换成指定的html或DOM元素，其中参数content为被所选择元素替换的内容
  13.   //replaceAll(selector) --将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素
      //**区别：在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。完成替换，被替换元素中的全部事件都将消失。
  14.   $(function(){
  15.       $("#Span1").replaceWith("<span title='replaceWith'>陶国荣</span>");
  16.       $("<span title='replaceAll'>xxx@163.cpm</span>").replaceAll("#Span2");
  17.       })
  18.     //一旦完成替换，被替换元素中的全部事件都将消失。
  20. </script>
  21. </head>
  22. <body>
  23.   <p>姓名：<span id="Span1"></span></p>
  24.   <p>邮箱：<span id="Span2"></span></p>
  25. </body>
  26. </html>

3-16  包裹元素节点

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>包裹元素节点</title>
  6. <style type="text/css">
  7.   body{ font-size:13px;}
  8.   p{ background-color:#eee; padding:5px; width:200px;}
  9. </style>
  10. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  11. <script>
  12.   //wrap(html) --把所有选择的元素用其他字符串代码包裹起来
  13.   //wrap(elem) --把所有选择的元素用其他DOM元素包装起来
  14.   //wrap(fn) --把所有选择的元素用function函数返回的代码包裹起来
  15.   //unwrap()  --移除所选元素的父元素或包裹标记
  16.   //wrapAll(html) --把所有元素用单个元素包裹起来
  17.   //wrapAll(elem) --把所有选择的元素用单个DOM元素包裹起来
  18.   //wrapInner(html) --把所有选择的元素的子内容（包括文本节点）用字符串代码包裹起来
  19.   //wrapInner(elem) --把所有选择的元素的子内容（包括文本节点）用DOM元素包裹起来
  20.   //wrapInner(fn) --把所有选择的元素的子内容（包括文本节点）用function函数返回的代码包裹起来
  21.   $(function(){
  22.       $("p").wrap("<b></b>");
  23.       $("span").wrapInner("<i></i>");
  24.       })
  25. </script>
  26. </head>
  27. <body>
  28.   <p>111：<span>111111</span></p>
  29.   <p>222:<span>222222</span></p>
  30. </body>
  31. </html>

3-17  遍历元素

对同一标记的全部元素进行统一操作，jquery中，可以直接使用each()方法实现元素的遍历。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>遍历元素</title>
  6. <style type="text/css">
  7.   body{ font-size:13px;}
  8.   img{ border:solid 1px #ccc; padding:3px; margin:5px; width:143px; height:101px;}
  9. </style>
  10. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  11. <script>
  12.   //each(callback) --callback是一个function函数，该函数可以接受一个形参index，此形参为遍历元素的序号(从0开始)，如果需要访问元素中的属性，可以借助形参index,配合this关键字来实现元素属性的设置或获取。
  13.   $(function(){
  14.       $("img").each(function(index) {
  15.         //
  16.         this.title = "第"+index+"的图片，alt内容是"+this.alt;
  17.       });
  18.   })
  19. </script>
  20. </head>
  21. <body>
  22.   <p>
  23.     <img src="img/1.png" alt="1" />
  24.     <img src="img/2.png" alt="2" />
  25.     <img src="img/3.png" alt="3" />
  26.   </p>
  27. </body>
  28. </html>

3-18  删除元素

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>删除元素</title>
  6. <style type="text/css">
  7.   body{ font-size:13px;}
  8.   ul{ width:200px;}
  9.   ul li{ list-style:none; padding:0px; height:23px;}
  10.   span{ padding-left:20px;}
  11.   .btn{ border:#666 1px solid; padding:2px; width:60px;}
  12. </style>
  13. <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  14. <script>
  15.   //remove()，remove([expr])--expr为可选项，如果接受参数，则该参数为栓选元素的jQuery表达式，通过该表达式获取指定的元素，并进行删除
  16.   //empty() --清空全部的节点或节点所包括的所有后代元素，并非删除节点和元素
  17.   $(function(){
  18.     $("ul li:first").css("font-weight","bold");
  19.     $("#Button1").click(function(){
  20.       $("ul li").remove("li[title=t]");
  21.       $("ul li:eq(1)").remove();
  22.     })
  23.   })
  24.  
  25. </script>
  26. </head>
  27. <body>
  28.   <ul>
  29.     <li>学号</li>
  30.     <li title="t">1001</li>
  31.     <li>1002</li>
  32.     <li>1003</li>
  33.     <li style="text-align:center; padding-top:5px;"><input id="Button1" type="button" value="删除" class="btn" /></li>
  34.   </ul>
  35. </body>
  36. </html>

第三篇 jQuery操作DOM的更多相关文章

  1. 三、jquery操作DOM

    DOM(Document Object Model, 文档对象模型)为文档提供了一种结构化的表示方法,通过该方法可以改变文档的内容和展示形式.在实际运用中,DOM更像是桥梁,通过它可以实现跨平台.跨语 ...

  2. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  3. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  4. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  5. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  6. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  7. *jquery操作DOM总结 (原创：最全、最系统、实例展示)

    jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...

  8. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

  9. jQuery权威指南（第2版） 学习一 jQuery操作DOM

    jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...

随机推荐

  1. flask 第六篇 flask内置的session

    Flask中的Session非常的奇怪,他会将你的SessionID存放在客户端的Cookie中,使用起来也非常的奇怪 1. Flask 中 session 是需要 secret_key 的 from ...

  2. ［转］java常量池理解总结

    一.相关概念 什么是常量用final修饰的成员变量表示常量,值一旦给定就无法改变!final修饰的变量有三种:静态变量.实例变量和局部变量,分别表示三种类型的常量. Class文件中的常量池在Clas ...

  3. 如何使用Heartbeat，组建一个高可用性的mysql集群

    转了好多次帖子,其实就是为了使用heartbeat来搭建mysql集群,网上很多都是用make来生成RPM来安装,我也找了很多资料,mysql 自带的cluster用户不满意,只能再次vmware虚拟 ...

  4. 使用Aria2+Aria2Ng+OneIndex+OneDrive建立不限流量/离线BT下载/在线观看网盘/在线存储分享平台

    获取OneDrive 自行搜索或者宝购买 安装 1.安装宝塔 #Centos系统 yum install -y wget && wget -O install.sh http://do ...

  5. kernel hacking的一些网站

    很全面的网站,下面的网站基本都可以从该地址找到. 新手必备 subscrible/unsubscrible mail list mail list archive kernel git mainlin ...

  6. Get web site source code

    public String getPageSource() { StringBuffer sb = new StringBuffer(); try { // 构建一URL对象 URL url = ne ...

  7. WebView的用法

    基本用法 布局文件配置WebView <WebView android:id="@+id/wv_news_detail" android:layout_width=" ...

  8. Linux搭建ftp服务器简单教程及使用方法

    参考文章:https://www.waitig.com/linux-or-centos-install-vsftpd-and-setup-it.html 步骤概括如下: 安装:yum install ...

  9. JAVA记事本的图形用户界面应用程序含加密

    JAVA记事本的图形用户界面应用程序 加密 题目简介: 整体分析: 实验代码: import java.awt.EventQueue; import java.awt.event.ActionEven ...

  10. flask 学习 (五)

    之前照着书去做的时候经常出现一些小问题,由于对于flask核心内容还不甚了解,我觉定先从更简单的做起,再根据别的需要对搭建的网站进行扩展. 上网找了一下,发现这位http://zhanghonglun ...