首页 > 代码库 > 第三章 jQuery中的DOM操作
第三章 jQuery中的DOM操作
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="输出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>
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="设置<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>
<!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="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>
<!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="设置单选下拉框选中"/> <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>
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="获取<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>
PS：参考文献《锋利的jQuery》
第三章 jQuery中的DOM操作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。