第三篇 jQuery操作DOM

3-1 DOM页面文档

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

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

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

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

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

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

删除元素属性，removeAttr（name）

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取或设置元素的值</title>
<style type="text/css">
  body{ font-size:12px; text-align:center;}
  div{ padding:3px; margin:3px; width:120px; float:left;}
  .txt{ border:#666 1px solid; padding:3px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  //val()
  //val().join(",")
  //val(array) --参数为数组，其作用是设置元素被选中
  //**$(":radio").val(["radio2","radio3"]) --ID号为radio2和radio3的单选框被选中
  $(function(){
      $("select").change(function(){//设置列表框change事件
          //获取列表框所选中的全部选项的值
          var strSel = $("select").val().join(",");
          $("#p1").html(strSel); //显示列表框所选中的全部选项的值
          })
      $("input").change(function(){
          var strText = $("input").val();
          $("#p2").html(strText);
          })
      $("input").focus(function(){//设置文本框focus事件
          $("input").val("");//清空文本框的值
          })  
      })
</script>
</head>
<body>
  <div>
    <select multiple="multiple" style="height:96px; width:85px;">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
      <option value="5">Item 5</option>
      <option value="6">Item 6</option>
    </select>
    <p id="p1"></p>
  </div>
  <div>
    <input type="text"  class="txt" />
    <p id="p2"></p>
  </div>
</body>
</html>

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

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

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

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态创建节点元素</title>
<style type="text/css">
  body{ font-size:13px;}
  ul{ padding:0px; list-style:none;}
  ul li{ line-height:2.0em;}
  .divL{ float:left; width:200px; background-color:#eee; border:solid 1px #666; margin:5px; padding:0px 8px 0px 8px;}
  .divR{ float:left; width:200px; display:none; border:solid 1px #ccc; margin:5px; padding:0px 8px 0px 8px;}
  .txt{ border:#666 1px solid; padding:3px; width:120px;}
  .btn{ border:#666 1px solid; padding:2px; width:60px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  //创建节点
  //var $div = $("<div title = '11'>2222</div>");
  //$("body").append($div);
  $(function(){
      $("#Button1").click(function(){
          //
          var $str1 = $("#select1").val();
          var $str2 = $("#text1").val();
          var $str3 = $("#select2").val();
          var $str4 = $("#text2").val();
          
          var $div = $("<"+$str1 +" " + $str3 + "='" + $str4 +"'>" + $str2+"</"+$str1+">");
          $(".divR").show().append($div);
          })
      })

</script>
</head>
<body>
  <div class="divL"><p></p>
    <ul>
      <li>元素名：
        <select id="select1">
          <option value="p">p</option>
          <option value="div">div</option>
        </select>
      </li>
      <li>内容为：
        <input type="text" id="text1" class="txt" />
      </li>
      <li>属性名：
        <select id="select2">
          <option value="title">title</option>
        </select>
      </li>
      <li>属性值:
        <input type="text" id="text2" class="txt" />
      </li>
      <li style="text-align:center; padding-top:5px;"><input id="Button1" type="button" value="创建" class="btn" /></li>
    </ul>
  </div>
  <div class="divR"></div>
</body>
</html>

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态插入节点方法,外部插入节点</title>
<style type="text/css">
  body{ font-size:13px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  //外部插入节点
  //after(content) --向所选择的元素外部后面插入内容
  //after(function) --向所选择的元素外部后面插入function函数所返回的内容
  //before(content) --向所选择的元素外部前面插入内容
  //before(function) --向所选择的元素外部前面插入function函数所返回的内容
  //insertAfter(content) --将所选择的元素插入另一个指定的元素外部后面
  //insertBefore(content) --将所选择的元素插入另一个指定的元素外部前面
  $(function(){
      $("span").after(retHtml);
       function retHtml(){
          var str = "<b>Write Less Do More</b>";
          return str;
          }
      })
</script>
</head>
<body>
  <span>jQuery</span>
</body>
</html>

3-14 复制元素节点

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

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

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>替换元素节点</title>
<style type="text/css">
  body{ font-size:13px;}
  span{ font-weight:bold;}
  p{ background-color:#eee; padding:5px; width:200px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  //replaceWith(content) --将所有选择的元素替换成指定的html或DOM元素，其中参数content为被所选择元素替换的内容
  //replaceAll(selector) --将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素
  //**区别：在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。完成替换，被替换元素中的全部事件都将消失。

  $(function(){
      $("#Span1").replaceWith("<span title='replaceWith'>陶国荣</span>");
      $("<span title='replaceAll'>xxx@163.cpm</span>").replaceAll("#Span2");
      })
    //一旦完成替换，被替换元素中的全部事件都将消失。
  
</script>
</head>
<body>
  <p>姓名：<span id="Span1"></span></p>
  <p>邮箱：<span id="Span2"></span></p>
</body>
</html>

3-16 包裹元素节点

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

3-17 遍历元素

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

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

3-18 删除元素

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

posted @ 2017-04-28 08:55 youguess 阅读(257) 评论(0) 编辑收藏举报

刷新页面返回顶部

youguess

第三篇 jQuery操作DOM

公告