$para.attr("title"); 實例：
<script type="text/javascript"> //<![CDATA[ $(function(){ var $para = $("p"); // 獲取<p>節點 var $li = $("ul li:eq(1)"); // 獲取第二個<li>元素節點 var p_txt = $para.attr("title"); // 輸出<p>元素節點屬性title 着重學習的 獲取元素的 標題實現 var ul_txt = $li.attr("title"); // 獲取<ul>里的第二個<li>元素節點的屬性title var li_txt = $li.text(); // 輸出第二個<li>元素節點的text alert(ul_txt); alert(li_txt); alert(p_txt); }); //]]> </script> <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p> <ul> <li title='蘋果'>蘋果</li> <li title='橘子'>橘子</li> <li title='菠蘿'>菠蘿</li> </ul>
創建節點append($li_1);
<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> <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p> <ul> <li title='蘋果'>蘋果</li> <li title='橘子'>橘子</li> <li title='菠蘿'>菠蘿</li> </ul>
插入節點實現prepend($li_2); insertAfter($two_li);
<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> <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p> <ul> <li title='蘋果'>蘋果</li> <li title='橘子'>橘子</li> <li title='菠蘿'>菠蘿</li> </ul>
移動節點insertBefore()
<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>
$(function(){ $("ul li:eq(1)").remove(); // 獲取第二個<li>元素節點后，將它從網頁中刪除。 }); $(function(){ var $li = $("ul li:eq(1)").remove(); // 獲取第二個<li>元素節點后，將它從網頁中刪除。 $li.appendTo("ul"); // 把剛才刪除的又重新添加到<ul>元素里 //所以，刪除只是從網頁中刪除，在jQuery對象中，這個元素還是存在的，我們可以重新獲取它 }); $(function(){ $("ul li").remove("li[title!=菠蘿]"); //把<li>元素中屬性title不等於"菠蘿"的<li>元素刪除 }); $(function(){ $("ul li").click(function(){ alert( $(this).html() ); }) var $li = $("ul li:eq(1)").remove(); // 獲取第二個<li>元素節點后，將它從網頁中刪除。 $li.appendTo("ul"); }); $(function(){ $("ul li:eq(1)").empty(); // 找到第二個<li>元素節點后，清空此元素里的內容 });
復制節點實現
$(function(){ $("ul li").click(function(){ $(this).clone().appendTo("ul"); // 復制當前點擊的節點，並將它追加到<ul>元素 }) }); $(function(){ $("ul li").click(function(){ $(this).clone(true).appendTo("ul"); // 注意參數true //可以復制自己，並且他的副本也有同樣功能。 }) });
替換節點
<script type="text/javascript"> //<![CDATA[ $(function(){ $("p").replaceWith("<strong>你最不喜歡的水果是?</strong>"); // 同樣的實現： $("<strong>你最不喜歡的水果是?</strong>").replaceAll("p"); }); //]]> </script> <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p> <ul> <li title='蘋果'>蘋果</li> <li title='橘子'>橘子</li> <li title='菠蘿'>菠蘿</li> </ul>
包裹節點
1 $(function(){ $("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起來 }); 2 <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> 3 <script type="text/javascript"> //<![CDATA[ $(function(){ $("strong").wrapAll("<b></b>"); //把b標簽包裹在一塊 }); //]]> </script> </head> <body> <strong title="選擇你最喜歡的水果." >你最喜歡的水果是?</strong> <strong title="選擇你最喜歡的水果." >你最喜歡的水果是?</strong> <ul> <li title='蘋果'>蘋果</li> <li title='橘子'>橘子</li> <li title='菠蘿'>菠蘿</li> </ul> </body> 加載之后實現 <b><strong title="選擇你最喜歡的水果.">你最喜歡的水果是?</strong><strong title="選擇你最喜歡的水果.">你最喜歡的水果是?</strong></b> <div>中間的元素</div> // 注意實現之后 <ul> <li title="蘋果">蘋果</li> <li title="橘子">橘子</li> <li title="菠蘿">菠蘿</li> </ul> 4 <script type="text/javascript"> //<![CDATA[ $(function(){ $("strong").wrapInner("<b></b>"); }); //]]> </script>
屬性操作實現
<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> $(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"); }); });
樣式操作：
<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.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>
設置獲取HTML 值操作實現
<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.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>
<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> <input type="text" id="address" value="請輸入郵箱地址"/> <br/><br/> <input type="text" id="password" value="請輸入郵箱密碼"/> <br/><br/> <input type="button" value="登錄"/>
$("#address").focus(function(){ // 地址框獲得鼠標焦點
var txt_value = $(this).val(); // 得到當前文本框的值
if(txt_value==this.defaultValue){ //注意意思是默認 <input type="text" value="timelesszhuang" />
$(this).val(""); // 如果符合條件，則清空文本框內容
}
});
input 標簽 中 checkbox radiobutton select
<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.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>
遍歷節點樹
$(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 ); } });
$(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>元素的唯一同輩元素
});
$(function(){
$(document).bind("click", function (e) { ///////////格外注意一下這個 function（e）
$(e.target).closest("li").css("color","red");
})
});
<body>
<p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
</body>
parent() parents() closest()
-
$(function(){ //parent $("input:eq(0)").click(function(){ resetStyle(); $('.item-1').parent().css('background-color', 'red'); }); //parents $("input:eq(1)").click(function(){ resetStyle(); $('.item-1').parents('ul').css('background-color', 'red'); }); //closest $("input:eq(2)").click(function(){ resetStyle(); $('.item-1').closest('ul').css('background-color', 'red'); }); function resetStyle(){ $("*").removeAttr("style"); } }); //]]> <body> <input type="button" value="parent()"/> <input type="button" value="parents()"/> <input type="button" value="closest()"/> <ul id="one" class="level-1"> <li class="item-i">I</li> <li id="ii" class="item-ii">II <ul class="level-2"> <li class="item-a"> <a href="#" class="item-1">Home</a> </li> <li class="item-b"> <a href="#" class="item-2">Product</a> </li> <li class="item-c"> <a href="#" class="item-3">About</a> </li> </ul> </li> <li class="item-iii">III</li> </ul> </body>