當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQuery DOM基本操作

發(fā)布時間：2025/3/21 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery DOM基本操作小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

DOM操作的分類 DOM Core 并不專屬于javascript，任何一種支持DOM的程序設(shè)計語言都可以使用它。它的用途并非僅限與處理網(wǎng)頁，也可以用來處理任何一種使用標記語言編寫出來的文檔。例如XML javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法，這些都是Dom Core的組成部分。使用DOM Core來獲取表單對象的方法 ?document.getElementByTagName("from"); 使用DOM Core來獲取某元素的src屬性的方法： ?element.getAttribute("src"); 構(gòu)建DOM元素 <body> ??你最喜歡的水果是? ??<ul> ????<li title='蘋果'>蘋果</li> ????<li title='橘子'>橘子</li> ????<li title='菠蘿'>菠蘿</li> ??</ul> </body> 使用jQeruy在文檔數(shù)上查找節(jié)點非常容易，可以通過在第2章介紹的jQuery選擇器來完成。 ???1.查找元素節(jié)點 ????獲取元素節(jié)點并打印出它的文本內(nèi)容，jQuery代碼如下: ????var $li = $("ul li:eq(1)");?? 獲取<ul>里第2個<li> 節(jié)點 ????var li_txt=$li.text();??????? //獲取第2個<li>元素節(jié)點的文本內(nèi)容 ????alert(li_txt);??????????????? //打印文本內(nèi)容，這里會打印出橘子 ????? ????以上代碼獲取了<ul>元素里第2個<li>節(jié)點，并將它的文本內(nèi)容"橘子"打印出來 ???2.查找屬性節(jié)點 ???利用jQuery 選擇器查找到需要的元素后，就可以使用attr()方法來獲取它的各種屬性的值.attr()方法得參數(shù)可以是一個，也可以是兩個。當參數(shù)是一個時，則是要查詢的屬性的名字。 ???獲取屬性節(jié)點并打印出它的文本內(nèi)容，jQuery代碼如下： ???var $para = $("p");??? //獲取節(jié)點 ???var p_txt=$para.attr("title");? //獲取元素節(jié)點屬性title ???alert(p_txt);??? //打印title屬性值 ?創(chuàng)建節(jié)點 ??在dom 操作中，常常需要動態(tài)創(chuàng)建HTML內(nèi)容，是文檔在瀏覽器里面的呈現(xiàn)效果發(fā)生變法，并且達到各種各樣的人機交互的目的。 ??1. 創(chuàng)建元素節(jié)點 ??例如要創(chuàng)建兩個<li>元素節(jié)點，并且要把它們作為<ul>元素節(jié)點的子節(jié)點添加到DOM節(jié)點樹上。 ??(1)創(chuàng)建兩個<li>新元素。 ??(2)將這兩個新元素插入文檔中。 ???第(1)個步驟可以使用jQuery的工廠函數(shù)$()來完成。 ???$(html); ???$(html)方法會根據(jù)傳入的HTML標記字符串，創(chuàng)建一個DOM對象，并將這個DOM對象包裝成一個jQuery對象后返回。 ???首先創(chuàng)建兩個<li>元素,jQuery代碼如下:?? ???$("ul").append($li_1);?? //添加到<ul>節(jié)點中，使之能在網(wǎng)頁中顯示 ???$("ul").append($li_2);?? //可以采取鏈式寫法:$("ul").append($li_1).append($li_2); ?????注意事項： ???????(1)動態(tài)創(chuàng)建的新元素節(jié)點不會被自動添加到文檔中，而是需要使用其他方法將其插入文檔中。 ???????(2)當創(chuàng)建單個元素時，要注意閉合標簽和使用標準的XHTML格式。 ????????例如創(chuàng)建一個 元素，使用$("")或者(""),但是不要使用$("")或者大寫的$(""); ???2.創(chuàng)建文檔節(jié)點 ???var $li_1= $("<li>香蕉</li>");? //創(chuàng)建一個<li> 元素，包括元素節(jié)點和文本節(jié)點，香蕉就是創(chuàng)建的文本節(jié)點 ???var $li_2 =$("<li>雪梨</li>");? //創(chuàng)建一個<li> 元素，包括元素節(jié)點和文本節(jié)點，雪梨就是創(chuàng)建的文本節(jié)點。 ???$("ul").append($li_1);????????? //添加到<ul>節(jié)點中，使之能在網(wǎng)頁中顯示 ???$("ul").append($li_2);????????? //添加到<ul>節(jié)點中，使之能在網(wǎng)頁中顯示 ???以上代碼所示，創(chuàng)建文本節(jié)點就是在創(chuàng)建元素節(jié)點時直接把文本內(nèi)容寫出來，然后使用append()等方法將他們添加到文檔中就可以了。 ??????注意事項： ???????無論$(html)中的HTML代碼多么復雜，都要使用相同的方式來創(chuàng)建。 ???????例如$("<li>這是一個<a href='#'>復雜的組合</a></li>"); ???3.創(chuàng)建屬性節(jié)點 ????創(chuàng)建屬性及節(jié)點與創(chuàng)建文本節(jié)點類似，也是直接在創(chuàng)建元素節(jié)點時一起創(chuàng)建。 ????jQuery代碼如下: ????var $li_1=$("<li title='香蕉'>香蕉</li>");//創(chuàng)建一個<li>元素，包含元素節(jié)點，文本節(jié)點和屬性節(jié)點其中title='香蕉'就是創(chuàng)建的屬性節(jié)點 ????var $li_2=$("<li title='雪梨'>雪梨</li>");//創(chuàng)建一個<li>元素包括元素節(jié)點，文本節(jié)點和屬性節(jié)點，其中title=‘雪梨’就是創(chuàng)建的屬性節(jié)點 ????$("ul").append($li_1); ????$("ul").append($li_2); //添加到<ul> 節(jié)點中，使之能在網(wǎng)頁中顯示 ????? ????插入節(jié)點 ????動態(tài)創(chuàng)建HTML元素并沒有世界用處，還需要將新創(chuàng)建的元素插入文檔中，將新創(chuàng)建的節(jié)點插入文檔最簡單的辦法是，讓它成為這個文檔的某個節(jié)點的子節(jié)點。 ????使用append(),它會在元素內(nèi)部追加新創(chuàng)建的內(nèi)容。 ????? ????jQuery中還有提供了其他幾種插入節(jié)點的方法。 ????? ?????方法?????????????????? 描述?????????????????????????????????? 示例 ??append()???????? 向每個匹配的元素內(nèi)部追加內(nèi)容???????????????? HTML代碼? ?????????????????????????????????????????????????????????????我想說: ?????????????????????????????????????????????????????????????jQuery代碼: $("p").append("你好");? 結(jié)果: 我想說:你好 ??appendTo()?????? 將所有匹配的元素追加到指定的元素中， ???????????????????實際上，使用該方法是顛倒了常規(guī)的$(A).append(B)的操作，即不是將B追加到A中，而是將A追加到B中?? HTML 代碼? 我想說: jQuery代碼： $("你好").appendTo("p");? 結(jié)果: 我想說：你好??? ??? ??prepend()??????? 向每個匹配的元素內(nèi)部前置內(nèi)容??? HTML代碼: 我想說: jQuery代碼: $("p").prepend("你好");結(jié)果你好我想說: ??prependTo()????? 將所有匹配的元素前置到指定的元素中，實際上，使用該方法是顛倒了常規(guī)的$(A).prepend(B)的操作，即不是將B前置到A中，而是將A前置到B中。HTML 代碼 我想說:? jQuery代碼: $("你好").prependTo("p"); 結(jié)果你好我想說 ??after()????????? 在每個匹配的元素之后插入內(nèi)容???? HTML代碼 我想說: jQuery代碼: $("p").after("你好"); 結(jié)果: 我想說:你好 ??insertAfter()??? 將所有匹配的元素插入到指定元素的后面，與after()顛倒了???????? HTML代碼 我想說 jQuery代碼：$("你好").insertAfter("p"); 結(jié)果我想說：你好 ??? ??before()???????? 將每個匹配的元素之前插入內(nèi)容????????????? HTML代碼 我想說:? jQuery 代碼：$("p").before("你好");? 結(jié)果你好我想說: ??insertBefore()?? 將所有匹配的元素插入到指定的元素的前面，實際上，使用該方法是顛倒了常規(guī)的before的操作?? $(" 你好").insertBefore("p"); 結(jié)果:你好我想說: ??刪除節(jié)點 ??如果文檔中某一個元素多余，那么應將其刪除，jQuery提供了兩種刪除節(jié)點的方法，即remove() 和empty() ?? ??1.remove()方法 ???作用是從DOM中刪除所有匹配的元素，傳入的參數(shù)用于根據(jù)jQuery表達式類篩選元素。 ???? ???例如刪除圖3-11中<ul>節(jié)點中的第2個<li>元素節(jié)點，jQuery代碼如下: ???$("ul li:eq(1)").remove();//獲取第2個<li>元素節(jié)后，將它從網(wǎng)頁中移除 ???當某個節(jié)點用remove()方法刪除后，該節(jié)點所包含的所有后代節(jié)點將同時被刪除，這個方法得放回值是一個指向已被刪除的節(jié)點的引用，因此可以在以后再使用這些元素。 ???下面的jQuery代碼說明元素用remove()方法刪除后，還是可以繼續(xù)使用的。 ???var $li = $("ul li:eq(1)").remove();//獲取第2個<li>元素節(jié)點后，將它從網(wǎng)頁中刪除 ???$li.appendTo("ul");//把剛刪除的節(jié)點又重新添加到<ul>元素里 ???可以直接使用appendTo()方法得特性來簡化以上代碼： ???$("ul li:eq(1)").appendTo("ul"); ???//appendTo()方法也可以用來移動元素 ???//移動元素時首先從文檔上刪除此元素，然后將該元素插入得到文檔中的指定節(jié)點。 ???另外remove()方法也可以通過傳遞參數(shù)來選擇性地刪除元素 ???$("ul li").remove("li[title!='菠蘿']"); //將<li>元素屬性title不等于"菠蘿" 的<li>元素刪除。 ??? ???2.empty()方法 ???嚴格來講，empty()方法并不是刪除節(jié)點，而是清空節(jié)點，它能清空元素中的所有后臺節(jié)點。 ???$("ul li:eq(1)").empty();? //獲取第2個<li>元素節(jié)點后，清空此元素里的內(nèi)容，注意是元素里面。 ???使用firebud查看橘子節(jié)點發(fā)生變化? <li title='橘子'/> ??? ???3.復制節(jié)點 ????復制節(jié)點也是常用的DOM操作之一，例如購入車，用戶不僅可以通過單擊商品下方的選擇按鈕購買相應的產(chǎn)品，也可以通過鼠標拖動商品 ????并將其放到購物車中，這個商品拖動功能就是用的復制節(jié)點，將用戶選擇的商品所處的節(jié)點元素復制一次，并將其跟隨鼠標移動，從而達到以下購物車的效果 ????$("ul li").click(function(){ ?????$(this).clone().appendTo("ul");//復制當前單擊的節(jié)點，并將它追加到<ul>元素中 ???}); ???//在頁面中點擊"菠蘿"后，列表最下方出現(xiàn)新節(jié)點"菠蘿"。 ???$(this).clone(true).appendTo("body");//注意參數(shù)true ???在clone()方法傳遞了一個參數(shù)true，它的含義是復制元素的同時復制元素中所綁定的事件，因此該元素的副本也同樣具備復制功能。 ???替換節(jié)點 ???如果要替換某個節(jié)點，jQuery提供了相應的方法，即replaceWith和 replaceAll() ???replaceWith()方法得做喲偶那個是將所有匹配的元素都替換成指定的HTML或者DOM元素。 ???例如要將網(wǎng)頁中你最喜歡的水果是? 替換成 你最不喜歡的水果是? 可以使用如下jQuery代碼： ?????$("p").replaceWith("你最不喜歡的水果是?"); ?????也可以使用jQuery中另一個方法repalceAll()來實現(xiàn)，該方法與replaceWith()方法得作用相同，只是顛倒了replaceWith的操作。 ?????$("你最不喜歡的水果是?").replaceAll("p"); ?????注意： ???????如果在替換之前，已經(jīng)為元素綁定了事件，替換后原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件。 ??4. 包裹節(jié)點 ?????如果要將某個節(jié)點用其他標記包裹起來，jQuery提供了相應的方法，wrap()，該方法對于需要在文檔中插入額外的結(jié)構(gòu)化標記非常有用，而且不會破壞原始文檔的語義。 ?????jQuery代碼如下： ?????$("strong").wrap("");//用標簽把 元素包裹起來 ?????得到的結(jié)果如下：? ????? 你最喜歡的水果是? ?????? ?????1.wrapAll()方法 ?????該方法將會將所有匹配的元素用一個元素包裹。它不同于wrap()方法，wrap()方法將所有的元素進行單獨的包裹。 ?????$("strong").wrap(""); ?????? ?????2.wrapinner()方法 ?????該方法將每一個匹配的元素的子內(nèi)容(包括文本節(jié)點) 用其他結(jié)構(gòu)化的標記包裹起來，例如可以使用它來包裹 標簽的子內(nèi)容:jQuery代碼如下： ?????$("strong").wrapInner(""); ?????運行代碼后，發(fā)現(xiàn)標簽內(nèi)的內(nèi)容被一對標簽包裹了。 ?????你最喜歡的水果是? ?????屬性操作 ?????在jQuery 中，用attr() 方法來獲取和設(shè)置元素屬性，removeAtt() 方法來刪除元素屬性。 ?????1.獲取屬性和設(shè)置屬性 ???????如果要獲取元素的屬性title,那么只需要給attr()方法傳遞一個參數(shù)，即屬性名稱。 ?????var $para=$("p");?????????????? //獲取節(jié)點 ?????var p_txt=$para.attr("title");? //獲取元素節(jié)點屬性title ????? ?????如果要設(shè)置元素的屬性title的值，也可以使用同一個方法，不同的是，需要傳遞兩個參數(shù)即屬性名稱和對應的值。 ?????jQuery代碼如下： ?????$("p").attr("title","your title");//設(shè)置單個的屬性值 ?????//為同一個元素設(shè)置多個屬性值 ?????$("p").attr({"title":"your title","name":"test"});//將一個 "名值" 形式的對象設(shè)置為匹配元素的屬性。 ????? ??????jQuery中的很多方法都是同一個函數(shù)實現(xiàn)獲取(getter)和設(shè)置(setter)的，例如上面的attr()方法，即能設(shè)置元素屬性的值，也能獲取元素屬性的值，類似的還有html(),text(),height(),width(),val(),css()等方法。 ?????? ????2.刪除屬性 ??????有時候需要刪除文檔元素的特定屬性，可以使用removeAttr()方法 ??????刪除元素的title屬性 ??????$("p").removeAttr("title"); ???? ????操作樣式 ????獲取樣式和設(shè)置樣式 ????HTML代碼如下： ???? 你最喜歡的水果是? ????class 也是元素的屬性，因此獲取class 和設(shè)置class都可以使用attr()方法。 ????var p_class = $("p").attr("class");//獲取元素的class ????可以使用attr()方法來設(shè)置元素的class，jquery代碼如下： ????$("p").attr("class","high");//設(shè)置元素的class為high ????他是將原來的class替換為class，而不是在原來的基礎(chǔ)上追加新的class ????追加樣式 ????jQuery提供了專門的addClass()方法來追加樣式，為了使例子更為容易理解，首先在<style>標簽里添加另一組樣式 ????<style> ????.high{ ?????font-weight:bold; ?????color:red; ????} ?????? ????.another{ ?????font-style:italic; ?????color:blue; ????} ???//在網(wǎng)頁中追加class類的按鈕.? ???$("input:eq(2)").click(function(){ ???$("p").addClass("another"); //給元素追加"another"類 ???}) ???attr() 和addClass()的區(qū)別 ???用途?????????????????????? 追加樣式???????????????????????? 設(shè)置樣式? 對同一個網(wǎng)頁元素操作?????? test???????? 第一次使用方法???????????? $("p").addClass("high");???????????? $("p").attr("class","high"); 第1次結(jié)果????????????????? test? 再次使用方法?????????????? $("p").addClass("another");????????? $("p").attr("class","another"); 結(jié)果?????????????????????? test??? test 3移除樣式如果單擊某一個按鈕時，刪除class的某個值，那么可以使用addClass()方法相反的removeClass()方法來完成，它的作用是從匹配的元素中刪除全部或者指定的class 如下jQuery代碼來刪除 ?$("p").removeClass("high");//移除元素中為"high"的class ?//如果要把元素的兩個class都刪除，就要使用removeClass() ?$("p").removeClass("high").removeClass("another"); ?//jquery提供了更簡單的方法 ?$("p").removeClass("high another"); ?另外，還可以使用removeClass()方法得一個特性來完成同樣的效果，它不帶參數(shù)的時候會將 class的值全部刪除. ?$("p").removeClass(); ?切換樣式 ?$toggleBtn.toggle(function(){ ???//3 ?},function(){ ???//4 ?}); ?toggle()方法此處的作用是交替執(zhí)行代碼3和4兩個函數(shù)，如果元素原來是顯示的，則隱藏它，如果隱藏的，則顯示它，此時，toggle()方法主要是控制行為上的重復切換。 ?? ?判斷是否含有某個樣式 ?hasClass可以用來判斷元素中是否有某個class，如果有，則返回true，否則返回false ?$("p").hasClass("another"); ?//jQuery內(nèi)部實際上是調(diào)用了is()方法來完成這個功能的，該方法等價于 ?$("p").is(".another") ?1.設(shè)置和獲取HTML，文本和值 ?html()方法 ?$("P").html();//獲取元素的html代碼 ?2.text() 方法 ?$("p").text(); //獲取元素的文本內(nèi)容 ?//text()可以對文本內(nèi)容設(shè)置內(nèi)容 ?$("p").text("你最喜歡的水果是?"); //設(shè)置元素的文本內(nèi)容 ?3.val()方法 ?val()方法取值 ?通過上面的例子可以發(fā)現(xiàn)val()方法不僅能設(shè)置元素的值，同時也能獲取元素的值，另外val() 方法還有另外一個用處，就是它能select(下拉列表框)，checkbox(多選框)和radio(單選框) 相應的選項被選中，在表單操作中會經(jīng)常用到。 ?//使用val設(shè)置選中項 ?$("#single").val("選擇2號"); ?//如果要使下拉列表的第2項和第3項被選中 ?$("#multiple").val(["選擇2號"，"選擇3號"]); //以數(shù)組的形式賦值 ?使多個文本框被選中 ?$(":checkbox").val(["check2","check3"]); ?$(":radio").val(["radio2"]); ?也可以使用attr()方法來實現(xiàn)同樣的功能 ?$("#single option:eq(1)").attr("selected",true);? //設(shè)置屬性selected ?$("[value=radio2]:radio").attr("checked",true); 1? children()方法 ?該方法用于取得匹配元素的子元素集合 ?var $body = $("body") .children(); ?var $p=$("p").children(); ?var $ul = $("ul").children(); ?alert($body.length); ?alert($p.length); ?alert($ul.length); 2.next方法 ?該方法用于取得匹配元素后面緊鄰的同輩元素。 ?從dom樹的結(jié)構(gòu)可以知道元素的下一個同輩節(jié)點時<ul>，因此可以通過next() 方法來獲取<ul> 元素 ?var $p1 = $("p").next();//取得緊鄰元素后的同輩元素 ?<ul> ???<li title='蘋果'>蘋果</li> ???<li title='橘子'>橘子</li> ???<li title='菠蘿'>菠蘿</li> ?</ul> ?prev()方法 ?該方法用于取得匹配元素前面緊鄰的同輩元素。 ?從DOM樹的結(jié)構(gòu)中可以知道<ul>元素的上一個同輩節(jié)點時，因此可以通過prev()方法類獲取元素 ?var $ul = $("ul").prev();? //取得緊鄰<ul>元素前得同輩元素 ?得到的結(jié)果將是: ?你最喜歡的水果是? ?4.siblings()方法 ?該方法用于取得匹配元素前后所有的同輩元素。 ?在第1章導航欄的例子中有段代碼如下： ??$(".has_children").click(function() { ???$(this).addClass("highlight");? //為當前元素增加highlight類 ???.children("a").show().end() ???.siblings().removeClass("highlight") ???.children("a").hide(); }) ??

轉(zhuǎn)載于:https://www.cnblogs.com/MMLoveMeMM/articles/3555145.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的JQuery DOM基本操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： javascript:void到底是个什
下一篇：差分约束学习