都來加深印象吧,大家都知道jQuery很好使用,因為它簡化了javascript程式碼,更重要的是它還相容基本上所有的瀏覽器,網頁開發最頭痛的就是這個了,所以jQuery也因此深受碼農的喜愛,不過首先你得要記住它才能更好的使用它不是嗎,過久了沒用的屬性方法也會淡忘的,下面是jQuery的DOM操作方法屬性的詳解,看看加深下印象。 例子雖醜功能還俱全呢! 複製程式碼 程式碼如下: <br> body {<br> /*color: purple;*/<br> }<br> .a{<br> color:red;<br> }<br> .b {<br> color:purple;<br> }<br> class all p 苹果 脐橙 柚子 内容 <br> $().ready(function () {<br> var p = $("#p");<br> //alert(p.attr("id"));//attr("属性名")获取属性,attr("属性名","属性值")设置属性<br> //p.attr("title","title");//设置属性<br> //p.removeAttr("id");//删除指定元素属性名的元素属性<br> //$("#all").attr("class", "class");//设置class属性,如此设置属性会替换前面的class属性(class='class')<br> //$("#all").addClass("class");//设置class属性,在原来的class属性里面追加一个class(class='all class')如果一个class里面有相同的属性(比如color),那么后者会覆盖前者<br> //$("#all").removeClass("all");//删除指定的class属性<br> //$("#all").removeClass();//移除class里面所有的class属性<br> //$("#all").toggle(//交替方法<br> // function () {<br> // $(this).css("color","red");<br> //}, function () {<br> // $(this).css("color","purple");<br> //});<br> //$("#div").click(function () { $("#all").toggle();});//用于显示隐藏交替指定的元素<br> //$("#all").click(function () { $("#div").text("class属性为:"+$("#all").attr("class"));});<br> //$("#all").click(function () {<br> // $("#all").toggleClass("b")<br> //});<br> //alert($("#all").hasClass("all"));//判断是否有此class属性<br> //alert($("#all").is(".all"));//效果同上 <p> //alert($("#all").html());//同等于InnerHTML效果<br> //$("#all").html("设置成功");<br> //alert($("#all").text());//获取所有的文本内容<br> //$("#all").text("设置成功");<br> //alert($("[name='text']:eq(0)").val());//同等于value属性(val("设置属性值"))</p> <p> var newP = $("<p id='newP'>newP</p>");//创建元素,创建单个元素时因(<p/>)加上/<br> //p.append(newP);//追加元素到p内部后面(<p id='p'>p<p id='newP'>newP</p></p>)<br> //newP.appendTo(p);//将newP追加到p内部后面<br> //p.prepend(newP);//追加元素到p内部前面(<p id='p'><p id='newP'>newP</p>p</p>)<br> //newP.prependTo(p);//将newp追加到p内部前面</p> <p> //p.after(newP);//追加元素到p元素的后面(<p id='p'>p</p><p id='newP'>newP</p>)<br> //newP.insertAfter(p);//将newP追加到p元素的后面<br> //p.before(newP);//追加到p元素的前面<br> //newP.insertBefore(p);//将newP追加到p元素前面<br> //苹果 脐橙 柚子 移动属性节点<br> var a = $("#a");<br> var c = $("#c");<br> //c.insertBefore(a);//把c(柚子)元素移动到a(苹果)元素的前面<br> //a.remove();//删除节点(所有的后代节点也将被删除)<br> //a.remove();<br> //c.after(a);//删除元素在添加回去<br> //$("ul>li").remove("li[id='a']");//根据条件删除指定元素<br> //a.empty();//清空元素里面的所有<br> //a.clone().insertAfter(c);//把复制的节点a(苹果)添加到c(柚子)的后面</p> <p> //$("#d").replaceWith("<span>span</span>");//把id为#d元素里面的所有文本元素替换成指定的内容文本<br> //$("<span>span</span>").replaceAll("#d");//同上,只是顺序反了</p> <p> //$("#ul").wrap("<b></b>");//把id为#ul的元素用<b>标签包裹起来(如果假设有多个ul元素的话此方法会将每个ul都用一个<b>包裹起来)<br> //$("#ul").wrapAll("<b></b>");//把id为#ul的元素用<b>标签包裹起来(如果假设有多个ul元素的话此方法会将所有的ul用一个<b>包裹起来)<br> //$("#ul").wrapInner("<b></b>")//将指定元素里面的内容用一个<b>标签包裹起来</p> <p> //alert($("#ul").children().length);//获取所有的子元素(next()是获取下一个同辈节点,prev()获取上一个同辈节点,siblings()获取所有的同辈节点)<br> //$("#ul").closest("ul").css("color","red");//检索是否与当前元素匹配,如果部匹配则返回到父元素检索,否则返回空<br> //alert($("#ul").css("height"));//css方法获取的高度可能有auto,且带有px,与css设置相关联,而用height()获取的高度是元素在页面上的实际高度,且不带px,width也是一样</p> <p> //offset()方法<br> var ul = $("#ul").視窗的偏移值( top)<br> //position()方法<br> var ul = $(" 取得絕對定位的偏移值<br> //$("#ul").scrollTop() $("#ul").scrollLeft()取得捲軸距離頂端與左側的位置距離<br> .scrollTop(300) $("#ul").scrollLeft(300)設定捲軸距離頂端和左側的位置距離<br> //alert(("aabaa").slice(-2);// //alert(("aabaa").slice(-2);///// slice()回傳前兩個字串,2為回傳索引開始後面的字串<br> $("#over").mouseover(function (e) {<br> 'tool'>懸浮的內容</p> </div>");<br> $("body").append(tool);<br> " , e.pageY "px").css("left", e.pageX "px");<br> //tool.css({ "top": e.page "px", "Yleft"px". pageX "px" }).show();<br> //alert(e.pageX " " e.pageY);<br> $("#tool") .remove();<br> });<br> });<br>