本文用代碼的方式詳細講解了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>")//將指定元素裡面的內容用一個<b>標簽包裹起來 //alert($("#ul").children().length);//獲取所有的子元素(next()是獲取下一個同輩節點，prev()獲取上一個同輩節點，siblings()獲取所有的同輩節點) //$("#ul").closest("ul").css("color","red");//檢索是否與當前元素匹配，如果部匹配則返回到父元素檢索,否則返回空 //alert($("#ul").css("height"));//css方法獲取的高度可能有auto，且帶有px，與css設置相關聯，而用height()獲取的高度是元素在頁面上的實際高度，且不帶px，width也是一樣 //offset()方法 var ul = $("#ul").offset(); //alert(ul.left);//獲取元素離視窗的偏移值(top) //position()方法 var ul = $("#ul").position(); //alert(ul.left);//獲取絕對定位的偏移值 //$("#ul").scrollTop() $("#ul").scrollLeft()獲取滾動條距離頂端和左側的位置距離 //$("#ul").scrollTop(300) $("#ul").scrollLeft(300)設置滾動條距離頂端和左側的位置距離 //alert(("aabaa").slice(-2));//slice()返回前兩個字符串，2為返回索引開始後面的字符串 $("#over").mouseover(function (e) { var tool = $("<div id='tool'>懸浮的內容</div>"); $("body").append(tool); tool.css("position", "absolute").css("top", e.pageY+"px").css("left", e.pageX + "px"); //tool.css({ "top": e.pageY + "px", "left": e.pageX + "px" }).show(); //alert(e.pageX+" "+e.pageY); }).mouseout(function () { $("#tool").remove(); }); }); </script> </body> </html>