鋒利的jQuery第十三期

  • 2020 年 4 月 10 日
  • 筆記

0 不好意思,這兩天由於小編有事要忙,而且一個日更的公眾號也需要大家多多來投稿,還是希望能夠發原創的文章,轉載的文章隨處可見,不希望直接拿過來用,所以出現了兩天時間沒有內容的情況,以後會再確定一下推送的時間,也給各位投稿人和管理員一些休息的時間,在此感謝大家的一路支持。

到上期為止,我們結束了jQuery選擇器的部分,鋒利的jQuery系列是根據同名書籍整理而成,在演示知識點的同時,融入了一些工作中的用法以及筆者的一些使用經驗和注意事項。之前我們一直逐個知識點的講解,進度也比較緩慢,為的是能夠把更多的人領進門,即使沒有一點js或者jQuery的基礎,也能夠看懂和了解,那麼接下來將根據工作中用的多的部分來講一些更實用的東西,對於不是很常用的東西,我會選擇跳過,並且對寫出的東西做更具體的說明。

首先,書本第三章的內容是有關於DOM操作的,對於節點的創建以及相關的概念還是有必要進行說明的。DOM是文檔對象模型的縮寫,他是一種與瀏覽器、平台、語言無關的接口,比如DOM不僅可以用於處理網頁,也可以用在處理XML文件,只要我們根據各種語言,如js,java,C#等對於操作DOM的方法,我們便可以取出各類型文檔(遵循一定格式的,即使用標記語言編寫的文檔)中我們想要獲取到的元素。那我們首先從創建節點開始,對於這部分,和js中的區別是比較大的,雖然基本流程是一樣的,如:先創建一個元素(節點),然後將該節點追加或插入到指定的位置。之前講過,js和jQuery對象的相互轉化非常容易,而js對象本身就是獲取的DOM對象,所以我們藉助符號和字符串就可以很方便的構造一個節點。如:("<li></li>"),這就是一個li元素的節點,在js中我們要通過document.createElement("li")來創建,這樣在寫法上就簡化了很多,當然,我們也可以通過手動拼接字符串的方式寫入到指定位置的標籤內,這就是很通用的方法了,相比之下就是比較low,但也萬能的方法了。

說完了創建,對於接下來的操作對於大家來說也沒什麼難度了,因為之前講過很多追加的方法,如append(),除此之外,還有一些方法供大家選擇,如插入到某個元素之後以及移動元素的操作,這能讓我們處理一些更複雜的情況。先來看如下的例子:

這是一個ul標籤,裏面包含三個li標籤,現在我們如果想要追加元素,可直接獲取ul元素,用append方法即可實現。如果我們要指定添加位置的時候可以使用insertAfter和insertBefore方法,在某個元素之前或之後進行添加,而且根據選擇器的不同,我們也可以使用這兩個方法對已經存在的元素進行換位,而不是產生新的副本。var li_3 = ("<li title='其它'>其它</li>"),我們先定義好一個待插入的元素。var two_li = ("ul li:eq(1)"),再定義好一個準備插入的位置,例如,我們要將其插入到選擇元素的後方,可使用li_3.insertAfter(two_li)。將出現以下效果:

這樣我們就將元素插入到了指定元素的後面。如果我們想要改變元素的位置,也可以使用同樣的方法,只不過前面應該是一個選擇器,而不是一個新的對象,如var three_li = ("ul li:eq(2)"),注意該變量是在插入two_li對象前獲取的,所以指向的是菠蘿,而非其他。先獲取要調整位置的元素,然後使用three_li.insertBefore(

明天又是新的一周了,預祝大家學習工作順利,早些休息吧。如果你也想和大家分享你的學習心得,歡迎投稿