萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery DOM操作實例

jQuery DOM操作實例

 本文用代碼的方式詳細講解了jQuery的DOM操作,具體操作方法請詳細參看代碼中的注釋部份

都來加深印象吧,大家都知道jQuery很好使用,因為它簡化了javascript代碼,更重要的是它還兼容基本上所有的浏覽器,網頁開發最頭疼的就是這個了,所以jQuery也因此深受碼農的喜愛,不過首先你得要記住它才能更好的使用它不是嗎,過久了沒用的屬性方法也會淡忘的,下面是jQuery的DOM操作方法屬性的詳解,看看加深下印象。   例子雖丑功能還俱全呢!   代碼如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <title></title>     <style type="text/css">         body {             /*color: purple;*/         }         .a{             color:red;         }         .b {             color:purple;         }     </style>     <script src="script/jquery-1.4.1.js"></script> </head> <body>     <p id="div">class</p>     <div id="all" class="a" >all     <input type="text" value="text" name="text" id="text"/>         <p id="p">p</p>         <ul id="ul">             <li id="a">蘋果</li>             <li id="b">臍橙</li>             <li id="c">柚子</li>         </ul>         <div id="d">             <p>內容</p>         </div>         <input type="button" value="鼠標懸浮效果" id="over" />     </div>     <script type="text/javascript">         $().ready(function () {             var p = $("#p");             //alert(p.attr("id"));//attr("屬性名")獲取屬性,attr("屬性名","屬性值")設置屬性             //p.attr("title","title");//設置屬性             //p.removeAttr("id");//刪除指定元素屬性名的元素屬性             //$("#all").attr("class", "class");//設置class屬性,如此設置屬性會替換前面的class屬性(class='class')             //$("#all").addClass("class");//設置class屬性,在原來的class屬性裡面追加一個class(class='all class')如果一個class裡面有相同的屬性(比如color),那麼後者會覆蓋前者             //$("#all").removeClass("all");//刪除指定的class屬性             //$("#all").removeClass();//移除class裡面所有的class屬性             //$("#all").toggle(//交替方法             //    function () {             //        $(this).css("color","red");             //},  function () {             //    $(this).css("color","purple");             //});             //$("#div").click(function () { $("#all").toggle();});//用於顯示隱藏交替指定的元素             //$("#all").click(function () { $("#div").text("class屬性為:"+$("#all").attr("class"));});             //$("#all").click(function () {             //    $("#all").toggleClass("b")             //});             //alert($("#all").hasClass("all"));//判斷是否有此class屬性             //alert($("#all").is(".all"));//效果同上               //alert($("#all").html());//同等於InnerHTML效果             //$("#all").html("設置成功");             //alert($("#all").text());//獲取所有的文本內容             //$("#all").text("設置成功");             //alert($("[name='text']:eq(0)").val());//同等於value屬性(val("設置屬性值"))               var newP = $("<p id='newP'>newP</p>");//創建元素,創建單個元素時因(<p/>)加上/             //p.append(newP);//追加元素到p內部後面(<p id='p'>p<p id='newP'>newP</p></p>)             //newP.appendTo(p);//將newP追加到p內部後面             //p.prepend(newP);//追加元素到p內部前面(<p id='p'><p id='newP'>newP</p>p</p>)             //newP.prependTo(p);//將newp追加到p內部前面               //p.after(newP);//追加元素到p元素的後面(<p id='p'>p</p><p id='newP'>newP</p>)             //newP.insertAfter(p);//將newP追加到p元素的後面             //p.before(newP);//追加到p元素的前面             //newP.insertBefore(p);//將newP追加到p元素前面             //蘋果  臍橙  柚子 移動屬性節點             var a = $("#a");             var c = $("#c");             //c.insertBefore(a);//把c(柚子)元素移動到a(蘋果)元素的前面             //a.remove();//刪除節點(所有的後代節點也將被刪除)             //a.remove();             //c.after(a);//刪除元素在添加回去             //$("ul>li").remove("li[id='a']");//根據條件刪除指定元素             //a.empty();//清空元素裡面的所有             //a.clone().insertAfter(c);//把復制的節點a(蘋果)添加到c(柚子)的後面               //$("#d").replaceWith("<span>span</span>");//把id為#d元素裡面的所有文本元素替換成指定的內容文本             //$("<span>span</span>").replaceAll("#d");//同上,只是順序反了               //$("#ul").wrap("<b></b>");//把id為#ul的元素用<b>標簽包裹起來(如果假設有多個ul元素的話此方法會將每個ul都用一個<b>包裹起來)             //$("#ul").wrapAll("<b></b>");//把id為#ul的元素用<b>標簽包裹起來(如果假設有多個ul元素的話此方法會將所有的ul用一個<b>包裹起來)             //$("#ul").wrapInner("<b></b>")//將
copyright © 萬盛學電腦網 all rights reserved