首页 > 代码库 > 第三章 jQuery中的DOM操作

第三章 jQuery中的DOM操作

2024-08-04 02:41:03   218人阅读

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

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

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

　　1.查找节点

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

　　2.创建节点

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

　　3.插入节点

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

　　4.删除节点

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

　　5.复制节点

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

　　6.替换节点

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

　　7.包裹节点

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

　　8.属性操作

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

　　9.样式操作

<!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="http://www.mamicode.com/输出class类"/>    <input type="button" value="http://www.mamicode.com/设置class类"/>    <input type="button" value="http://www.mamicode.com/追加class类"/>    <input type="button" value="http://www.mamicode.com/删除全部class类"/>    <input type="button" value="http://www.mamicode.com/删除指定class类"/>    <input type="button" value="http://www.mamicode.com/重复切换class类"/>    <input type="button" value="http://www.mamicode.com/判断元素是否含有某个class类"/>    <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p>    <ul>      <li title=‘苹果‘>苹果</li>      <li title=‘橘子‘>橘子</li>      <li title=‘菠萝‘>菠萝</li>    </ul></body></html>

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

<!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="http://www.mamicode.com/设置
元素的HTML代码"/>    <input type="button" value="http://www.mamicode.com/设置
元素的文本"/>    <input type="button" value="http://www.mamicode.com/设置
元素的文本(带HTML)"/>    <input type="button" value="http://www.mamicode.com/获取按钮的value值"/>    <input type="button" value="http://www.mamicode.com/设置按钮的value值"/>    <p title="选择你最喜欢的水果." ><strong>你最喜欢的水果是?</strong></p>    <ul>      <li title=‘苹果‘>苹果</li>      <li title=‘橘子‘>橘子</li>      <li title=‘菠萝‘>菠萝</li>    </ul></body></html> 
<!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> 
<!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> 
<!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="http://www.mamicode.com/check1"/> 多选1<input type="checkbox" value="http://www.mamicode.com/check2"/> 多选2<input type="checkbox" value="http://www.mamicode.com/check3"/> 多选3<input type="checkbox" value="http://www.mamicode.com/check4"/> 多选4<br/><input type="radio" value="http://www.mamicode.com/radio1"/> 单选1<input type="radio" value="http://www.mamicode.com/radio2"/> 单选2<input type="radio" value="http://www.mamicode.com/radio3"/> 单选3</body></html> 
<!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=http://www.mamicode.com/check2]:checkbox").attr("checked",true);//设置属性checked            $("[value=http://www.mamicode.com/check3]:checkbox").attr("checked",true);//设置属性checked            $("[value=http://www.mamicode.com/radio2]:radio").attr("checked",true);//设置属性checked      });     });  //]]>  </script></head><body>    <input type="button" value="http://www.mamicode.com/设置单选下拉框选中"/>    <input type="button" value="http://www.mamicode.com/设置多选下拉框选中"/>    <input type="button" value="http://www.mamicode.com/设置单选框和多选框选中"/><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="http://www.mamicode.com/check1"/> 多选1<input type="checkbox" value="http://www.mamicode.com/check2"/> 多选2<input type="checkbox" value="http://www.mamicode.com/check3"/> 多选3<input type="checkbox" value="http://www.mamicode.com/check4"/> 多选4<br/><input type="radio" value="http://www.mamicode.com/radio1" name="a"/> 单选1<input type="radio" value="http://www.mamicode.com/radio2" name="a"/> 单选2<input type="radio" value="http://www.mamicode.com/radio3" name="a"/> 单选3</body></html>

　　11.遍历节点

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

　　12.CSS-DOM操作

<!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="http://www.mamicode.com/获取
元素的color"/>    <input type="button" value="http://www.mamicode.com/设置
元素的color"/>    <input type="button" value="http://www.mamicode.com/设置
元素的fontSize和backgroundColor"/>    <input type="button" value="http://www.mamicode.com/获取
元素的高度"/>    <input type="button" value="http://www.mamicode.com/获取
元素的宽度"/>    <input type="button" value="http://www.mamicode.com/设置
元素的高度"/>    <input type="button" value="http://www.mamicode.com/设置
元素的宽度"/>    <input type="button" value="http://www.mamicode.com/获取
元素的的左边距和上边距"/>    <p title="选择你最喜欢的水果."><strong>你最喜欢的水果是?</strong></p>    <ul>      <li title=‘苹果‘>苹果</li>      <li title=‘橘子‘>橘子</li>      <li title=‘菠萝‘>菠萝</li>    </ul></body></html>

第三章 jQuery中的DOM操作


联系
我们