jQuery的DOM操作的簡單介紹

一、節點的建立

1、
$("<div></div>")
2、創造元素節點并将文本内容一并描述
$("<div>我是文本節點</div>")
3、建立屬性節點
$("<div id='test' class='aaron'>我是文本節點</div>")

二、内部插入

append()和appendTo()//插入内尾部

prepend和prependTo()//插入内頭部

//例1:
<body>
    <h2>通過append與appendTo添加元素</h2>
    <button id="bt1">點選通過jQuery的append添加元素</button>
    <button id="bt2">點選通過jQuery的appendTo添加元素</button>
    <div class="content"></div>
    <script type="text/javascript">"#bt1").on('click', function()
            //.append(), 選擇表達式在函數的前面，
            //參數是将要插入的内容。
            $(".content").append('<div class="append">通過append方法添加的元素</div>')
        })
    </script>

    <script type="text/javascript">"#bt2").on('click', function()
            //.appendTo()剛好相反，内容在方法前面，
            //無論是一個選擇器表達式 或建立作為标記上的标記
            //它都将被插入到目标容器的末尾。
            $('<div class="appendTo">通過appendTo方法添加的元素</div>').appendTo($(".content"))
        })
    </script>
</body>

//例2：
<body>
    <h2>通過prepend與prependTo添加元素</h2>
    <button id="bt1">點選通過jQuery的prepend添加元素</button>
    <button id="bt2">點選通過jQuery的prependTo添加元素</button>
    <div class="aaron1">
        <p>測試prepend</p>
    </div>
    <div class="aaron2">
        <p>測試prependTo</p>
    </div>
    <script type="text/javascript">"#bt1").on('click', function()
        //找到class="aaron1"的div節點
        //然後通過prepend在内部的首位置添加一個新的p節點
        $('.aaron1')
            .prepend('<p>prepend增加的p元素</p>')
    })
    </script>
    <script type="text/javascript">"#bt2").on('click', function()
        //找到class="aaron2"的div節點
        //然後通過prependTo内部的首位置添加一個新的p節點
        $('<p>prependTo增加的p元素</p>')
            .prependTo($('.aaron2'))
    })
    </script>
</body>

三、外部插入

1、after()與before()

2、insertAfter()與insertBefore()

before與after都是用來對相對選中元素外部增加相鄰的兄弟節點

2個方法都是都可以接收HTML字元串，DOM 元素，元素數組，或者jQuery對象，用來插入到集合中每個比對元素的前面或者後面

2個方法都支援多個參數傳遞after(div1,div2,….) 可以參考右邊案例代碼

//例1：
<body>
    <h2>通過before與after添加元素</h2>
    <button id="bt1">點選通過jQuery的before添加元素</button>
    <button id="bt2">點選通過jQuery的after添加元素</button>
    <div class="aaron">
        <p class="test1">測試before</p>
    </div>
    <div class="aaron">
        <p class="test2">測試after</p>
    </div>
    <script type="text/javascript">"#bt1").on('click', function()
        //在比對test1元素集合中的每個元素前面插入p元素
        $(".test1").before('<p style="color:red">before,在比對元素之前增加</p>', '<p style="color:red">多參數</p>')
    })
    </script>
    <script type="text/javascript">"#bt2").on('click', function()
        //在比對test1元素集合中的每個元素後面插入p元素
        $(".test2").after('<p style="color:blue">after,在比對元素之後增加</p>', '<p style="color:blue">多參數</p>')
    })
    </script>
</body>

//例2：
<body>
    <h2>通過insertBefore與insertAfter添加元素</h2>
    <button id="bt1">點選通過jQuery的insertBefore添加元素</button>
    <button id="bt2">點選通過jQuery的insertAfter添加元素</button>
    <div class="aaron">
        <p class="test1">測試insertBefore,不支援多參數</p>
    </div>
    <div class="aaron">
        <p class="test2">測試insertAfter,不支援多參數</p>
    </div>
    <script type="text/javascript">"#bt1").on('click', function()
        //在test1元素前後插入集合中每個比對的元素
        //不支援多參數
        $('<p style="color:red">測試insertBefore方法增加</p>', '<p style="color:red">多參數</p>').insertBefore($(".test1"))
    })
    </script>
    <script type="text/javascript">"#bt2").on('click', function()
        //在test2元素前後插入集合中每個比對的元素
        //不支援多參數
        $('<p style="color:red">測試insertAfter方法增加</p>', '<p style="color:red">多參數</p>').insertAfter($(".test2"))
    })
    </script>
</body>

四、元素删除（以及empty()、remove()、detach()差別）

empty()方法

清空元素的所有節點、但是不能删除自己本身這個節點

remove()方法

可以删除自己以及自己所包含的所有後代節點。

提供傳遞一個篩選的表達式、用來指定删除選中集合的元素

$(‘p’).filter(‘:contains(‘3’)’).remove();

無參數，移除自身整個節點以及該節點的内部所有節點，包含節點上的事件與資料

有參數，移除篩選出的節點，以及該節點的内部所有節點，包括節點上事件與資料

datach()方法

移除處理與remove()一樣

與remove()不同的是，所有綁定的事件，附加的資料等都會保留下來

例如：

$(‘p’).detach()這一句會移除對象，僅僅是顯示效果沒了。

但是記憶體還是有的，當你append之後，又重新回到文檔流中。

五、Dom拷貝 clone()

.clone()方法深度複制所有的比對自己的元素集合包括所有的比對元素、比對元素的下級元素、文位元組點。

注意：如果節點有事件類型之類的處理，我們需要通過clone(true)傳遞一個布爾值true用來指定，這樣不僅克隆了單純的節點結構，還要把附帶的事件與資料一并克隆了。

//例如：
//HTML部分
<div></div>
js部分
$('div').on('click',function(){//執行操作})

//clone處理一
$('div').clone();//僅僅克隆了結構，事件丢失

//clone處理二
$('div').clone();//結構、事件與資料都克隆

//注意：clone()方法是，在将它插入文檔之前，我們可以修改克隆的元素或元素内容：如
$("#div1").append( $(this).clone().css('color','red') );
元素資料(data)内對象和數組不會被複制，将繼續被克隆元素和原始資料共享。深複制的所有資料需要手動複制每一個。

六、DOM節點替換 replacewith()和replaceAll()

$("p:eq(1)").replaceWith('<a style="color:red">替換第二段的内容</a>')
$('<a style="color:red">替換第二段的内容</a>').replaceAll('p:eq(1)')

七、.wrap( )：在集合中比對的每個元素周圍包裹一個HTML結構

$('p').wrap('<div></div>')

八、unwrap() ：将比對元素集合的父級元素删除，保留自身（和兄弟元素，如果存在）在原來的位置。

$('p').unwarp();

九、給所有的子元素添加一個共同的div包裹

$('p').wrapAll('<div></div>')

十、将元素内子元素其他元素包裹起來

$('p').wrapInner('<div></div>')

$('p').wrapInner(function()
    return '<div><div/>'; 
})

十一、

children()方法快速查找子一級元素

//快速查找合集裡面的第一級子元素
//children()無參數
$("div").children();
//children()有參數
$("div").children(".selected");

find()方法快速查找子孫元素

//周遊目前元素集合中每個元素的後代。隻要符合，不管是兒子輩，孫子輩都可以。必須填參數，隻在後代中周遊，不包括自己。
$("div").find("li");

parent()方法查找合集裡面的每一個元素的父元素

$(ul).parent()

parents()方法一直查到查找到祖先節點

$( "html"

closest()方法查找目前元素的父輩祖輩元素

//例如：在div元素中，往上查找所有的li元素，可以這樣表達
$("div").closet("li')

next()方法快速查找指定元素集合中每一個元素緊鄰的後面同輩元素的元素集合

$('.item-2').next(':first').css('border', '1px solid blue')

prev()方法快速查找指定元素集合中每一個元素緊鄰的前面同輩元素的元素集合

$('.item-3').prev(':last').css('border', '1px solid blue')

siblings() 快速查找指定元集合中每一個元素緊鄰的前面後面同輩元素

$('.item-2').siblings(':last').css('border', '2px solid blue')

//通過$()方法找到指定的元素合集後可以進行一系列的操作。$()之後就意味着這個合集對象已經是确定的，如果後期需要再往這個合集中添加一新的元素用add方法，用來建立一個新的jQuery對象 ，元素添加到比對的元素集合中

//.add()的參數可以幾乎接受任何的$()，包括一個jQuery選擇器表達式，DOM元素，或HTML片段引用。

//處理一：傳遞選擇器
$('li').add('p')

//處理二：傳遞dom元素
$('li').add(document.getElementsByTagName('p')[0])

//還有一種方式，就是動态建立P标簽加入到合集，然後插入到指定的位置，但是這樣就改變元素的本身的排列了
 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

//jQuery是一個合集對象，通過$()方法找到指定的元素合集後可以進行一系列的操作。比如我們操作$("li").css('') 給所有的li設定style值，因為jQuery是一個合集對象，是以css方法内部就必須封裝一個周遊的方法，被稱為隐式疊代的過程。要一個一個給合集中每一個li設定顔色，這裡方法就是each

//.each() 方法就是一個for循環的疊代器，它會疊代jQuery對象合集中的每一個DOM元素。每次回調函數執行時，會傳遞目前循環次數作為參數(從0開始計數

//是以大體上了解3個重點：
//each是一個for循環的包裝疊代器
//each通過回調的方式處理，并且會有2個固定的實參，索引與元素
//each回調方法中的this指向目前疊代的dom元素
//如：
<ul>
    <li>張三</li>
    <li>李四</li>
</ul>

$("li").each(function(index, element) {
     index 索引 0,1
     element是對應的li節點 li,li
     this 指向的是li
})


<body>
    <h2>each方法</h2>
    <div class="left first-div">
        <div class="div">
            <ul>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3</li>
            </ul>
        </div>
        <div class="div">
            <ul>
                <li>list item 4</li>
                <li>list item 5</li>
                <li>list item 6</li>
            </ul>
        </div>
    </div>

    <br/>
    <button>點選：each方法周遊元素</button>
    <button>點選：each方法回調判斷</button>
    <script type="text/javascript">"button:first").click(function()
        //周遊所有的li
        //修改每個li内的字型顔色
        $("li").each(function(index, element)
            $(this).css('color','red')
        })

    })
    </script>
    <script type="text/javascript">"button:last").click(function()
        //周遊所有的li
        //修改偶數li内的字型顔色
        $("li").each(function(index, element)
            if (index % 2) {
                $(this).css('color','blue')
            }
        })
    })
    </script>
</body>

jQuery的DOM操作的簡單介紹

繼續閱讀

請求逾時VUE axios重新再次請求

IE8 CSS設定DIV居中，添加“margin:0 auto”

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

jquery_126_demo

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條