jQuery學習筆記(二)—— 操作DOM元素

使用attr()方法控制元素的屬性

attr()方法的作用是設置或者返回元素的屬性,其中attr(屬性名)格式是獲取元素屬性名的值,attr(屬性名,屬性值)格式則是設置元素屬性名的值。

例如,使用attr(屬性名)的格式獲取頁面中<a>元素的“href”屬性值,并將該值的內容顯示在<span>元素中,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,通過attr()方法可以方便地獲取元素中指定屬性名稱的內容,并將獲取的內容通過html()方法顯示在頁面中。

操作元素的內容

使用html()text()方法操作元素的內容,當兩個方法的參數為空時,表示獲取該元素的內容,而如果方法中包含參數,則表示將參數值設置為元素內容。

例如,分別使用html()text()方法獲取一個元素的內pww,并將獲取的內容顯示在不同的<div>元素中,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,html()方法可以獲取元素的HTML內容,因此,原文中的格式代碼也被一起獲取,而text()方法只是獲取元素中的文本內容,并不包含HTML格式代碼,所以它顯示的內容并沒有變“歪”。

操作元素的樣式

通過addClass()css()方法可以方便地操作元素中的樣式,前者括號中的參數為增加元素的樣式名稱,后者直接將樣式的屬性內容寫在括號中。

例如,使用addClass()方法,改變<div>元素的背景色和文字顏色,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,通過addClass()方法為<div>元素增加了兩個樣式名稱,從而改變了<div>元素的背景和文字顏色,增加多個樣式名稱時,要用空格隔開。

css()方法和addClass方法用法類似,只是需要去設置具體樣式了。

移除屬性和樣式

使用removeAttr(name)removeClass(class)分別可以實現移除元素的屬性和樣式的功能,前者方法中參數表示移除屬性名,后者方法中參數則表示移除的樣式名

例如,使用removeAttr()方法移除<a>元素中的“href”屬性,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,使用removeAttr()方法移除元素的“href”屬性后,再次顯示元素的“href”屬性值時,則為空值,<a>元素中的文字也丟失可點擊的效果。

使用append()方法向元素內追加內容

append(content)方法的功能是向指定的元素中追加內容,被追加的content參數,可以是字符、HTML元素標記,還可以是一個返回字符串內容的函數。

例如,在頁面的<body>元素中追加一個具有“id”、“title”屬性和顯示內容的<div>元素,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,由于使用append()方法在<body>元素中追加了一些HTML 元素標記,因此追加后,這些元素標記直接生成對應的元素和屬性顯示在頁面中。

使用appendTo()方法向被選元素內插入內容

appendTo()方法也可以向指定的元素內插入內容,它的使用格式是:

$(content).appendTo(selector)

參數content表示需要插入的內容,參數selector表示被選的元素,即把content內容插入selector元素內,默認是在尾部。

例如,使用appendTo()方法,將<div>外的<span>元素插入<div>內,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,使用appendTo()方法將類別名為“red”的<span>元素插入到<div>元素的尾部,相當于追加的效果。

使用before()和after()在元素前后插入內容

使用before()after()方法可以在元素的前后插入內容,它們分別表示在整個元素的前面和后面插入指定的元素或內容,調用格式分別為:

$(selector).before(content)$(selector).after(content)

其中參數content表示插入的內容,該內容可以是元素或HTML字符串。

例如,調用before()方法在一個<span>元素插入另一個<span>元素,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,使用before()方法將HTML格式的內容插入到原有<span>元素內容之前,而并不僅是它的內部文本。

使用clone()方法復制元素

調用clone()方法可以生成一個被選元素的副本,即復制了一個被選元素,包含它的節點、文本和屬性,它的調用格式為:

$(selector).clone()

其中參數selector可以是一個元素或HTML內容。

例如,使用clone()方法復制頁面中的一個<span>元素,并將復制后的元素追加到頁面的后面,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,使用clone()方法復制元素時,不僅復制了該元素的文本和節點,還將它的“title”屬性也一起復制過來了。

替換內容

replaceWith()replaceAll()方法都可以用于替換元素或元素中的內容,但它們調用時,內容和被替換元素所在的位置不同,分別為如下所示:

$(selector).replaceWith(content)$(content).replaceAll(selector)

參數selector為被替換的元素,content為替換的內容。

例如,調用replaceWith()方法將頁面中<span>元素替換成一段HTML字符串,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,使用replaceWith()方法替換類別名為“green”的<span>元素,替換之后,舊元素完全由新替換的元素所取代。

使用wrap()和wrapInner()方法包裹元素和內容

wrap()wrapInner()方法都可以進行元素的包裹,但前者用于包裹元素本身,后者則用于包裹元素中的內容,它們的調用格式分別為:

$(selector).wrap(wrapper)$(selector).wrapInner(wrapper)

參數selector為被包裹的元素,wrapper參數為包裹元素的格式。

例如,調用wrap()方法,將<span>用<div>元素包裹起來,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,紅色區域的<span>元素被綠色邊框的<div>元素通過wrap()方法包裹起來。

使用each()方法遍歷元素

使用each()方法可以遍歷指定的元素集合,在遍歷時,通過回調函數返回遍歷元素的序列號,它的調用格式為:

$(selector).each(function(index))

參數function為遍歷時的回調函數,index為遍歷元素的序列號,它從0開始。

例如,遍歷頁面中的<span>元素,當元素的序列號為2時,添加名為“focus”的樣式,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,在使用each()方法遍歷<span>元素時,回調函數中的“index”參數為元素的序列號,它從0開始,當為2時,表示第3個<span>元素增加樣式。

使用remove()和empty()方法刪除元素

remove()方法刪除所選元素本身和子元素,該方法可以通過添加過濾參數指定需要刪除的某些元素,而empty()方法則只刪除所選元素的子元素。

例如,調用remove()方法刪除<span>元素中類別名為“red”的,如下圖所示:

在瀏覽器中顯示的效果:

從圖中可以看出,使用remove(".red")方法只是把<span>元素中類別名為“red”的這部分元素給刪除了。








本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/386091.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/386091.shtml
英文地址,請注明出處:http://en.pswp.cn/news/386091.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

web開發軟件,8個優秀的CSS實踐,附面試題

一.為什么要學習前端開發&#xff1f; 你可能是因為興趣&#xff0c;完成一個網站、頁面、功能的成就感。你也可能是因為現在前端崗位火爆&#xff0c;就業率高。不管是因為什么&#xff0c;只要找準了目標&#xff0c;學就是了&#xff01; 突破困境&#xff1a; 1. 提升學…

jQuery 學習筆記(三)——事件與應用

頁面加載時觸發ready()事件 ready()事件類似于onLoad()事件&#xff0c;但前者只要頁面的DOM結構加載后便觸發&#xff0c;而后者必須在頁面全部元素加載成功才觸發&#xff0c;ready()可以寫多個&#xff0c;按順序執行。此外&#xff0c;下列寫法是相等的&#xff1a; $(docu…

web開發軟件,HTML如何添加錨點,成功入職阿里

前言 正式學習前端大概 3 年多了&#xff0c;接觸前端大概 4 年了&#xff0c;很早就想整理這個書單了&#xff0c;因為常常會有朋友問&#xff0c;前端該如何學習&#xff0c;學習前端該看哪些書&#xff0c;我就講講我學習的道路中看的一些書&#xff0c;雖然整理的書不多&a…

cs碩士妹子找工作經歷【阿里人搜等互聯網】

摘自 北郵人論壇 分享他人成功的求職經歷。原文如下&#xff1a; 唉&#xff0c;妹子本來是本著寫面經的態度與大家分享&#xff0c;之自己情況也是想說明一啥都不會的菜鳥在悲催的逆境下也可以憑自身努力找到offer&#xff0c;沒想到被評為作秀。。。妹子能力背景確實和說的…

web開發項目,web前端CSS全局樣式,面試必問

前言 表格是網頁制作中使用最多的工具之一&#xff0c;在制作網頁時&#xff0c;使用表格可以更清晰地排列數據。但是在實際制作過程中&#xff0c;表格更多用在網頁布局的定位上。很多網頁都是以表格布局的。這是因為表格在文本和圖像的位置控制方面都有很強的功能。 字節跳…

Java中key可以重復的Map集合:IdentityHashMap

范例&#xff1a;Map中的key不允許重復&#xff0c;重復就是覆蓋 [java] view plaincopy package org.lxh.demo13.mapdemo; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Set; class Person { …

牛客網筆記之數組(一)

最近開始在“牛客網”上做題&#xff0c;希望通過日積月累&#xff0c;每天記錄一點小知識&#xff0c;每天前進一小步。 今天練習的題目關于數組。 1. 數組存儲&#xff1a;鏈式存儲、順序存儲 線性表邏輯上是線性的&#xff0c;存儲上可以是順序的&#xff0c;可以是鏈式的…

社交網絡節點理論

1.頓巴數 每個人的朋友圈子對多能達到150個人。&#xff08;密友3-5人&#xff0c;好友30-50人&#xff0c;其他100-150人&#xff09;縱使高科技帶來的人際圈越來越大&#xff0c;但是人腦的容量是有限的&#xff0c;你也不可能和這么多人維持一定的人際關系&#xff08;沒有人…

瘋狂漲知識!Java多態實現原理技術總監都拍手叫好

##前言 多態是Java語言重要的特性之一&#xff0c;它允許基類的指針或引用指向派生類的對象&#xff0c;而在具體訪問時實現方法的動態綁定。Java對于方法調用動態綁定的實現主要依賴于方法表&#xff0c;但通過引用調用&#xff08;invokevitual&#xff09;和接口引用調用&am…

國內互聯網公司算法機器學習崗(阿里星)面試總結

從2015年8月到2015年10月&#xff0c;花了3個月時間找工作&#xff0c;先后通過內推參加了美團、阿里螞蟻金服、京東、騰訊、今日頭條、Growing IO、微軟這7個公司的面試&#xff0c;同時參加了網易游戲、LinkedI In中國這2個公司的筆試&#xff0c;拿到比較優質的offer是京東S…

瘋狂漲知識!「高并發秒殺」微信搶紅包實戰案例幫你突破瓶頸

推薦閱讀&#xff1a; 阿里二面涼經&#xff1a;設計模式緩存Spring虛擬機MySQL中間件并發等難題&#xff0c;全部迎刃而解阿里巴巴字節跳動那些大廠必問的HTTP該怎么學&#xff1f;我建議你看看這篇文章&#xff01;螞蟻、字節、PDD社招面經Java崗&#xff08;分布式線程安全…

2016面試——騰訊、螞蟻金服、蘑菇街

騰訊TST技術面&#xff1a; 先羅列一下問題吧: 編程語言編譯的過程 同樣的邏輯,golang的二進制代碼比C語言的二進制代碼長很多.試分析原因 項目 ,三個項目都有聊.因為現場面,可以用紙寫,所以描述的更清楚些 N * N的方格紙,里面有多少個正方形 兩個數組求交集 什么樣的…

Android開發;Activity-Hook你了解多少?一起來debug

享學課堂特邀作者&#xff1a;周周 轉載請聲明出處&#xff01; 前言 手把手講解系列文章&#xff0c;是我寫給各位看官&#xff0c;也是寫給我自己的。文章可能過分詳細&#xff0c;但是這是為了幫助到盡量多的人&#xff0c;畢竟工作5,6年&#xff0c;不能老吸血&#xff0c;…

牛客網筆記之JAVA運算符

計算機的最基本用途之一就是執行數學運算&#xff0c;作為一門計算機語言&#xff0c;Java也提供了一套豐富的運算符來操縱變量。我們可以把運算符分成以下幾組&#xff1a; 算術運算符 關系運算符 位運算符 邏輯運算符 賦值運算符 其他運算符 邏輯運算符結果 ~a是按位非&#…

Android架構師談:View-Pager-性能優化之-無限循環

作者&#xff1a;享學課堂Alvin老師 轉載請聲明出處&#xff01; ViewPager實現無限滑動 **方案一&#xff1a;**將viewpager上限設置成一個很大的數&#xff0c;第一個頁面設置到中間。然后滑動的時候&#xff0c;用當前的序號與viewpager頁面數取余得到目標頁面的序號&#…

你知道如何用面向對象思想寫好并發編程嗎?

在工作中&#xff0c;我發現很多人在設計之初都是直接按照單線程的思路來寫程序的&#xff0c;而忽略了本應該重視的并發問題&#xff1b;等上線后的某天&#xff0c;突然發現詭異的 Bug&#xff0c;再歷經千辛萬苦終于定位到問題所在&#xff0c;卻發現對于如何解決已經沒有了…

你知道怎么在生產環境下部署tomcat嗎?

享學課堂特邀作者&#xff1a;老顧 轉載請聲明出處&#xff01; 一、前言 小伙伴們在網上看到的很多文章&#xff0c;都是對tomcat的一些介紹&#xff0c;什么配置啊&#xff0c;怎么啟動。其實在生產環境中怎么部署&#xff0c;和網上介紹的有很大區別。這篇文章老顧就帶著大…

淺談HashMap

Java集合類的整體架構 比較重要的集合類圖如下&#xff1a; 有序否 允許元素重復否 Collection 否 是 List 是 是 Set AbstractSet 否 否 HashSet TreeSet 是&#xff08;用二叉樹排序&#xff09; Map AbstractMap 否 使用 key-value 來映射和存儲數據&#xff0c; Key 必須惟…

matlab實現一元線性回歸和多元線性回歸

在回歸分析中,如果有兩個或兩個以上的自變量,就稱為多元回歸。事實上,一種現象常常是與多個因素相聯系的,由多個自變量的最優組合共同來預測或估計因變量,比只用一個自變量進行預測或估計更有效,更符合實際。 在實際經濟問題中,一個變量往往受到多個變量的影響。例如,家…

互聯網寒冬!“996”為什么還沒實行?我還等著早點下班呢!

“喊了十多個月的‘996’&#xff0c;說要實行‘996’&#xff0c;上班上到現在&#xff0c;影子都沒看到&#xff0c;我還能早點下班嗎&#xff1f;” 我一個在廣州上班的朋友小李&#xff0c;在我去廣州出差期間&#xff0c;與他聊天的時候發出了這樣的牢騷&#xff0c;我剛…