码迷，mamicode.com
首页 > Web开发 > 详细

第三章 jQuery中的DOM操作

时间：2014-11-24 16:52:54      阅读：332      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   io   ar   color   os   sp   java   

http://www.cnblogs.com/shuibing/p/4064467.html

DOM(Document Object Model)文档对象模型，每张网页都能用DOM表示出来，每一份DOM都能看成一颗DOM树。

　　jQuery继承了JavaScript对DOM对象操作的特性，使开发人员能方便地操作DOM对象。

　　1.查找节点

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-1</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
     $(function () {
         var $para = $("p");         // 获取<p>节点
         var p_txt = $para.attr("title"); // 获取<p>元素节点属性title
         alert(p_txt);

         var $li = $("ul li:eq(1)");   // 获取第二个<li>元素节点
         var ul_txt = $li.attr("title"); // 获取<ul>里的第二个<li>元素节点的属性title
         var li_txt = $li.text();    // 获取第二个<li>元素节点的text

         alert(ul_txt);
         alert(li_txt);
     });
  //]]>
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣

　　2.创建节点

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-2-1</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
    var $li_1 = $("<li></li>");    //  创建第一个<li>元素
    var $li_2 = $("<li></li>");    //  创建第二个<li>元素

     var $parent = $("ul");        // 获取<ul>节点，<li>的父节点

     $parent.append($li_1);        // 添加到<ul>节点中，使之能在网页中显示
     $parent.append($li_2);        // 可以采取链式写法：$parent.append($li_1).append($li_2);
  });
  //]]>
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-2-2</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
    var $li_1 = $("<li>香蕉</li>");    //  创建一个<li>元素，包括元素节点和文本节点
                                                        //“香蕉”就是创建的文本节点。
    var $li_2 = $("<li>雪梨</li>");    //  创建一个<li>元素，包括元素节点和文本节点
                                                        //“雪梨”就是创建的文本节点。

     var $parent = $("ul");        // 获取<ul>节点。<li>的父节点

    $("ul").append($li_1);        // 添加到<ul>节点中，使之能在网页中显示
    $("ul").append($li_2);        // 添加到<ul>节点中，使之能在网页中显示

  });
  //]]>
  </script>
</head>
<body>

    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>

</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-2-3</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
    var $li_1 = $("<li title=‘香蕉‘>香蕉</li>");    //创建一个<li>元素
                                                                            //包括元素节点,文本节点和属性节点
                                                                            //其中title=‘香蕉‘ 就是创建的属性节点
    var $li_2 = $("<li title=‘雪梨‘>雪梨</li>");     //创建一个<li>元素
                                                                            //包括元素节点,文本节点和属性节点
                                                                            //其中title=‘雪梨‘ 就是创建的属性节点  

     var $parent = $("ul");        // 获取<ul>节点。<li>的父节点

     $parent.append($li_1);        // 添加到<ul>节点中，使之能在网页中显示
     $parent.append($li_2);        // 等价于：$parent.append($li_1).append($li_2);
  });
  //]]>
  </script>
</head>
<body>

    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>

</body>
</html>
bubuko.com,布布扣

　　3.插入节点

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-3-1</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
    var $li_1 = $("<li title=‘香蕉‘>香蕉</li>");    //  创建第一个<li>元素
    var $li_2 = $("<li title=‘雪梨‘>雪梨</li>");    //  创建第二个<li>元素
    var $li_3 = $("<li title=‘其它‘>其它</li>");    //  创建第三个<li>元素


    var $parent = $("ul");                    // 获取<ul>节点，即<li>的父节点
    var $two_li = $("ul li:eq(1)");             //  获取<ul>节点中第二个<li>元素节点
   
    $parent.append($li_1);                 //  append方法将创建的第一个<li>元素添加到父元素的最后面
    $parent.prepend($li_2);                 //  prepend方法将创建的第二个<li>元素添加到父元素里的最前面
    $li_3.insertAfter($two_li);               //  insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后

  });
  //]]>
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-3-2</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
    var $one_li = $("ul li:eq(1)");             //  获取<ul>节点中第二个<li>元素节点
    var $two_li = $("ul li:eq(2)");             //  获取<ul>节点中第三个<li>元素节点
    $two_li.insertBefore($one_li);    //移动节点
  });
  //]]>
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣

　　4.删除节点

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-4-1</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
     $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
  });
  //]]>
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-4-2</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
     var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
     $li.appendTo("ul");                        // 把刚才删除的又重新添加到<ul>元素里
     //所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它
  });
  //]]>
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-4-3</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      $("ul li").remove("li[title!=菠萝]");  //把<li>元素中属性title不等于"菠萝"的<li>元素删除 
  });
  //]]>
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-4-4</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
     $("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容
  });
  //]]>
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣

　　5.复制节点

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-5-1</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function(){
     $("ul li").click(function(){
         $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
     })   
  });
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-5-2</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function(){
     $("ul li").click(function(){
         $(this).clone(true).appendTo("ul"); // 注意参数true
         //可以复制自己，并且他的副本也有同样功能。 
     })   
  });
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣

　　6.替换节点

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-6</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
     $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); 
     // 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 
  });
  //]]>
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣

　　7.包裹节点

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-7-1</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      $("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来
  });
  //]]>
  </script>
</head>
<body>
    <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-7-2</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      $("strong").wrap("<b></b>");
  });
  //]]>
  </script>

</head>
<body>
    <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
    <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>

</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-7-3</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      $("strong").wrapAll("<b></b>");
  });
  //]]>
  </script>

</head>
<body>
    <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
    <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>

</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-7-4</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      $("strong").wrapInner("<b></b>");
  });
  //]]>
  </script>

</head>
<body>
    <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>

</body>
</html>
bubuko.com,布布扣

　　8.属性操作

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-8</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      //设置<p>元素的属性‘title‘
      $("input:eq(0)").click(function(){
            $("p").attr("title","选择你最喜欢的水果.");
      });
      //获取<p>元素的属性‘title‘
      $("input:eq(1)").click(function(){
            alert( $("p").attr("title") );
      });
      //删除<p>元素的属性‘title‘
      $("input:eq(2)").click(function(){
            $("p").removeAttr("title");
      });   
  });
  //]]>
  </script>
</head>
<body>
    <input type="button" value="设置<p>元素的属性‘title‘"/>
    <input type="button" value="获取<p>元素的属性‘title‘"/>
    <input type="button" value="删除<p>元素的属性‘title‘"/>

    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣

　　9.样式操作

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-9-1</title>
<style type="text/css">
.high{
 font-weight:bold;   /* 粗体字 */
 color : red;        /* 字体颜色设置红色*/
}
.another{
 font-style:italic;
 color:blue;
}
</style>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
     $(function () {
         //获取样式
         $("input:eq(0)").click(function () {
             alert($("p").attr("class"));
         });
         //设置样式
         $("input:eq(1)").click(function () {
             $("p").attr("class", "high");
         });
         //追加样式
         $("input:eq(2)").click(function () {
             $("p").addClass("another");
         });
         //删除全部样式
         $("input:eq(3)").click(function () {
             $("p").removeClass();
         });
         //删除指定样式
         $("input:eq(4)").click(function () {
             $("p").removeClass("high");
         });
         //重复切换样式
         $("input:eq(5)").click(function () {
             $("p").toggleClass("another");
         });
         //判断元素是否含有某样式
         $("input:eq(6)").click(function () {
             alert($("p").hasClass("another"));
             alert($("p").is(".another"));               //同上
         });
     });
  //]]>
  </script>
</head>
<body>
    <input type="button" value="输出class类"/>
    <input type="button" value="设置class类"/>
    <input type="button" value="追加class类"/>
    <input type="button" value="删除全部class类"/>
    <input type="button" value="删除指定class类"/>
    <input type="button" value="重复切换class类"/>
    <input type="button" value="判断元素是否含有某个class类"/>

    <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣

　　10.设置获取HTML，文本和值

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-10-1</title>
<style type="text/css">
.test{
 font-weight:bold;
 color : red;
}
.add{
 font-style:italic;
}
</style>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      //获取<p>元素的HTML代码
      $("input:eq(0)").click(function(){
            alert(  $("p").html() );
      });
      //获取<p>元素的文本
      $("input:eq(1)").click(function(){
            alert(  $("p").text() );
      });
      //设置<p>元素的HTML代码
      $("input:eq(2)").click(function(){
             $("p").html("<strong>你最喜欢的电影是?</strong>");
      });    
       //设置<p>元素的文本
      $("input:eq(3)").click(function(){
             $("p").text("你最喜欢的球星是?");
      });  
      //设置<p>元素的文本
      $("input:eq(4)").click(function(){
             $("p").text("<strong>你最喜欢的游戏是?</strong>");
      });  
      //获取按钮的value值
      $("input:eq(5)").click(function(){
             alert( $(this).val() );
      });   
      //设置按钮的value值
      $("input:eq(6)").click(function(){
            $(this).val("我被点击了!");
      });  
  });
  //]]>
  </script>
</head>
<body>
    <input type="button" value="获取<p>元素的HTML代码"/>
    <input type="button" value="获取<p>元素的文本"/>
    <input type="button" value="设置<p>元素的HTML代码"/>
    <input type="button" value="设置<p>元素的文本"/>
    <input type="button" value="设置<p>元素的文本(带HTML)"/>
    <input type="button" value="获取按钮的value值"/>
    <input type="button" value="设置按钮的value值"/>

    <p title="选择你最喜欢的水果." ><strong>你最喜欢的水果是?</strong></p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-10-2-1</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      $("#address").focus(function(){         // 地址框获得鼠标焦点
            var txt_value =  $(this).val();   // 得到当前文本框的值
            if(txt_value=="请输入邮箱地址"){  
                $(this).val("");              // 如果符合条件，则清空文本框内容
            } 
      });
      $("#address").blur(function(){          // 地址框失去鼠标焦点
              var txt_value =  $(this).val();   // 得到当前文本框的值
            if(txt_value==""){
                $(this).val("请输入邮箱地址");// 如果符合条件，则设置内容
            } 
      })

      $("#password").focus(function(){
            var txt_value =  $(this).val();
            if(txt_value=="请输入邮箱密码"){
                $(this).val("");
            } 
      });
      $("#password").blur(function(){
              var txt_value =  $(this).val();
            if(txt_value==""){
                $(this).val("请输入邮箱密码");
            } 
      })
  });
  //]]>
  </script>
</head>
<body>
    <input type="text" id="address" value="请输入邮箱地址"/>   <br/><br/>
    <input type="text" id="password" value="请输入邮箱密码"/>  <br/><br/>
    <input type="button" value="登陆"/>
</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-10-2-2</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
     $(function () {
         $("#address").focus(function () {         // 地址框获得鼠标焦点
             var txt_value = $(this).val();   // 得到当前文本框的值
             if (txt_value == this.defaultValue) {
                 $(this).val("");              // 如果符合条件，则清空文本框内容
             }
         });
         $("#address").blur(function () {          // 地址框失去鼠标焦点
             var txt_value = $(this).val();   // 得到当前文本框的值
             if (txt_value == "") {
                 $(this).val(this.defaultValue); // 如果符合条件，则设置内容
             }
         })

         $("#password").focus(function () {
             var txt_value = $(this).val();
             if (txt_value == this.defaultValue) {
                 $(this).val("");
             }
         });
         $("#password").blur(function () {
             var txt_value = $(this).val();
             if (txt_value == "") {
                 $(this).val(this.defaultValue);
             }
         })
     });
  //]]>
  </script>

</head>
<body>
    <input type="text" id="address" value="请输入邮箱地址"/>   <br/><br/>
    <input type="text" id="password" value="请输入邮箱密码"/>  <br/><br/>
    <input type="button" value="登陆"/>
</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-10-3</title>
<style type="text/css">
.test{
 font-weight:bold;
 color : red;
}
.add{
 font-style:italic;
}
</style>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      //设置单选下拉框选中
      $("input:eq(0)").click(function(){
            $("#single").val("选择2号");
      });
      //设置多选下拉框选中
      $("input:eq(1)").click(function(){
            $("#multiple").val(["选择2号", "选择3号"]);
      });
      //设置单选框和多选框选中
      $("input:eq(2)").click(function(){
             $(":checkbox").val(["check2","check3"]);
            $(":radio").val(["radio2"]);
      });    

  });
  //]]>
  </script>
</head>
<body>
    <input type="button" value="设置单选下拉框选中"/>
    <input type="button" value="设置多选下拉框选中"/>
    <input type="button" value="设置单选框和多选框选中"/>

<br/><br/>

<select id="single">
  <option>选择1号</option>
  <option>选择2号</option>
  <option>选择3号</option>
</select>

<select id="multiple" multiple="multiple" style="height:120px;">
  <option selected="selected">选择1号</option>
  <option>选择2号</option>
  <option>选择3号</option>
  <option>选择4号</option>
  <option selected="selected">选择5号</option>
</select>

<br/><br/>

<input type="checkbox" value="check1"/> 多选1
<input type="checkbox" value="check2"/> 多选2
<input type="checkbox" value="check3"/> 多选3
<input type="checkbox" value="check4"/> 多选4

<br/>

<input type="radio" value="radio1"/> 单选1
<input type="radio" value="radio2"/> 单选2
<input type="radio" value="radio3"/> 单选3

</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-10-4</title>
<style type="text/css">
.test{
 font-weight:bold;
 color : red;
}
.add{
 font-style:italic;
}
</style>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      //设置单选下拉框选中
      $("input:eq(0)").click(function(){
            $("#single option").removeAttr("selected");  //移除属性selected
            $("#single option:eq(1)").attr("selected",true); //设置属性selected
      });
      //设置多选下拉框选中
      $("input:eq(1)").click(function(){
            $("#multiple option").removeAttr("selected");  //移除属性selected
            $("#multiple option:eq(2)").attr("selected",true);//设置属性selected
            $("#multiple option:eq(3)").attr("selected",true);//设置属性selected
      });
      //设置单选框和多选框选中
      $("input:eq(2)").click(function(){
            $(":checkbox").removeAttr("checked"); //移除属性checked
            $(":radio").removeAttr("checked"); //移除属性checked
            $("[value=check2]:checkbox").attr("checked",true);//设置属性checked
            $("[value=check3]:checkbox").attr("checked",true);//设置属性checked
            $("[value=radio2]:radio").attr("checked",true);//设置属性checked
      });   
  });
  //]]>
  </script>
</head>
<body>
    <input type="button" value="设置单选下拉框选中"/>
    <input type="button" value="设置多选下拉框选中"/>
    <input type="button" value="设置单选框和多选框选中"/>

<br/><br/>

<select id="single">
  <option>选择1号</option>
  <option>选择2号</option>
  <option>选择3号</option>
</select>

<select id="multiple" multiple="multiple" style="height:120px;">
  <option selected="selected">选择1号</option>
  <option>选择2号</option>
  <option>选择3号</option>
  <option>选择4号</option>
  <option selected="selected">选择5号</option>
</select>

<br/><br/>

<input type="checkbox" value="check1"/> 多选1
<input type="checkbox" value="check2"/> 多选2
<input type="checkbox" value="check3"/> 多选3
<input type="checkbox" value="check4"/> 多选4

<br/>

<input type="radio" value="radio1" name="a"/> 单选1
<input type="radio" value="radio2" name="a"/> 单选2
<input type="radio" value="radio3" name="a"/> 单选3
</body>
</html>
bubuko.com,布布扣

　　11.遍历节点

bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-11-1</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
     var $body = $("body").children();
     var $p = $("p").children();
     var $ul = $("ul").children();
     alert( $body.length );  // <body>元素下有2个子元素
     alert( $p.length );     // <p>元素下有0个子元素
     alert( $ul.length );    // <p>元素下有3个子元素
     for(var i=0;i< $ul.length;i++){
         alert( $ul[i].innerHTML );
     }
  }); 
  //]]>
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-11-2</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
     var $p1 = $("p").next();
     alert( $p1.html() );  //  紧邻<p>元素后的同辈元素
     var $ul = $("ul").prev();
     alert( $ul.html() );  //  紧邻<ul>元素前的同辈元素
     var $p2 = $("p").siblings();
     alert( $p2.html() );  //  紧邻<p>元素的唯一同辈元素
  });
  //]]>
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-11-3</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
     $(function () {
         $(document).bind("click", function (e) {
             $(e.target).closest("li").css("color", "red");
         })
     });
  //]]>
  </script>
</head>
<body>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
bubuko.com,布布扣

　　12.CSS-DOM操作

bubuko.com,布布扣

bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-12-1</title>
<style type="text/css">
.test{
 font-weight:bold;
 color : red;
}
.add{
 font-style:italic;
}
</style>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      //获取<p>元素的color
      $("input:eq(0)").click(function(){
            alert(  $("p").css("color") );
      });
      //设置<p>元素的color
      $("input:eq(1)").click(function(){
             $("p").css("color","red")
      });
      //设置<p>元素的fontSize和backgroundColor
      $("input:eq(2)").click(function(){
             $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})
      });    
      //获取<p>元素的高度
      $("input:eq(3)").click(function(){
              alert( $("p").height() );
      });  
      //获取<p>元素的宽度
      $("input:eq(4)").click(function(){
              alert( $("p").width() );
      });   

        //获取<p>元素的高度
      $("input:eq(5)").click(function(){
              $("p").height("100px");
      });  
      //获取<p>元素的宽度
      $("input:eq(6)").click(function(){
              $("p").width("400px");
      }); 
      //获取<p>元素的的左边距和上边距
      $("input:eq(7)").click(function(){
              var offset = $("p").offset();
              var left = offset.left;
              var top =  offset.top;
              alert("left:"+left+";top:"+top);
      });  
  });
  //]]>
  </script>
</head>
<body>
    <input type="button" value="获取<p>元素的color"/>
    <input type="button" value="设置<p>元素的color"/>
    <input type="button" value="设置<p>元素的fontSize和backgroundColor"/>
    <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="选择你最喜欢的水果."><strong>你最喜欢的水果是?</strong></p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>

第三章 jQuery中的DOM操作

标签：style   blog   http   io   ar   color   os   sp   java   

原文地址：http://www.cnblogs.com/shenming/p/4118793.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！