jQuery實(shí)現(xiàn)1次(多次)元素的插入與移除

實(shí)現(xiàn)方法在最后面

說起元素插入,那就不得不說append、afterbefore
至于他們3者的區(qū)別 ↓↓↓
<body>
<div class="parent">
    我是目標(biāo)元素
</div>
<script type="text/javascript">
    $(".parent").append("<div class='children'>append</div>"); 
    $(".parent").after("<div class='child'>after</div>");
    $(".parent").before("<div class='child'>before</div>");
</script>
</body>
運(yùn)行結(jié)果
3種插入方式結(jié)果.png
由此我們可以知道

append()方法是將元素作為目標(biāo)元素的子元素進(jìn)行插入
afetr()和before()是將元素作為目標(biāo)元素的同胞進(jìn)行插入

除此之外,還有appendT0()、insertAfter()、insertBfore(),
這3個(gè)方法相當(dāng)于是把選擇器匹配的元素(demo中的目標(biāo)元素)和要插入的元素進(jìn)行互換。

給一個(gè)事件添加一個(gè)插入元素的方法是很簡單的,但稍不注意,就會(huì)遇到:元素插入過多,所以,我們需要進(jìn)行限制
click:function(){
          //判斷元素是否已插入
        if($(this).find(".suspend").length>0){
            return false;
        }else{
            $(this).append("<div class='suspend'>暫未開發(fā)</div>")
        }
    },  //元素插入
mouseleave:function(){
        $(this).find(".suspend").remove();
    }  //元素移除

在每次插入元素之前先進(jìn)行是否已經(jīng)插入,或是否已經(jīng)插入N個(gè)的一個(gè)判斷
這就是我來限制元素插入次數(shù)的方式

PS:
.size()可以返回選擇器匹配元素的數(shù)量
但是?。?!
當(dāng)沒有這個(gè)元素是否會(huì)出錯(cuò),而.length會(huì)返回為0;
所以我的代碼采用的是.length

結(jié)束!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,675評論 0 44
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法,類相關(guān)的語法,內(nèi)部類的語法,繼承相關(guān)的語法,異常的語法,線程的語...
    子非魚_t_閱讀 34,734評論 18 399
  • 第1章 簡介 第2章 DOM節(jié)點(diǎn)的創(chuàng)建 2-1 DOM創(chuàng)建節(jié)點(diǎn)及節(jié)點(diǎn)屬性 通過JavaScript可以很方便的獲...
    mo默22閱讀 934評論 0 8
  • 1:jQuery節(jié)點(diǎn)創(chuàng)建與屬性的處理 創(chuàng)建元素節(jié)點(diǎn):可以有幾種方式,后面會(huì)慢慢接觸。常見的就是直接把這個(gè)節(jié)點(diǎn)的結(jié)構(gòu)...
    碼農(nóng)小楊閱讀 685評論 0 1
  • 我們從陌生開始,走進(jìn)彼此陌生的生活, 我們從喜歡開始,喜歡上對方的點(diǎn)點(diǎn)滴滴; 曾幾何時(shí),我們也懷疑過自己的判斷, ...
    AngelaNine閱讀 324評論 3 0

友情鏈接更多精彩內(nèi)容