目錄

建立節點

新增節點

替換節點

刪除節點

清空節點

包裹節點

 遍歷節點

屬性操作

文字操作

樣式操作

建立節點

$(html)方法會根據傳入的HTML標記字串，建立一個DOM物件,並將這個DOM物件包裝成一個jQuery物件

返回值:建立的DOM節點

var $div=$("<div class="one">新增節點</div>");
//建立沒有加入節點則還不能顯示

新增節點

在元素內插入(插入子元素)

append()

向每個匹配的元素內追加內容

appendTo()

將所有匹配的元素追加到指定的元素中，該方法與append()使用顛倒

prepend()

向每個匹配的元素內部追加前置內容

prependTo()

將所有匹配的元素前置到指定的元素中。

<div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
</div>
<script>
    $(function(){
            //建立節點
        var $inner=$('<div class="inner">hello</div>');
        //將$inner節點插入到.outer後面
        $('.outer').append($inner);
        //和上面的等價
        $inner.appendTo($('.outer'));
            
           //將$inner節點插入到.outer元素內的最前面(作為第一個子元素)
        $inner.prependTo($('.outer'));
        //和上面的等價
        $('.outer').prepend($inner);
    });

</script>
 

插入兄弟元素

after()

向每個匹配的元素之後追加內容

insertAfter()

將所有匹配的元素追加到指定的元素後，該方法與append()使用顛倒

before()

向每個匹配的元素的最前面追加內容

insertBefore()

將所有匹配的元素插入到指定元素的最前面。

<div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
</div>
<script>
    $(function(){
            //建立節點
        var $inner=$('<div class="inner">hello</div>');
        //將$inner節點插入到.outer後面
        $('.outer').after($inner);
        //和上面的等價
        $inner.insertAfter($('.outer'));
            
           //將$inner節點插入到.outer的最前面(作為上個兄弟元素)
        $inner.before($('.outer'));
        //和上面的等價
        $('.outer').insertBefore($inner);
    });

</script>
 

替換節點

replaceWith()

將所有匹配的元素替換成指定的HTML或者DOM元素。 replaceAll()

用法與replaceWidth顛倒，作用相同

<div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
</div>
<script>
    $(function(){
           //建立span標籤
        var $span=$('<span>我是一個span</span>');
            //用span替換.outer裡的第一個元素
         $('.outer :first').replaceWith($span);
        $span.replaceAll($('.outer:first'));
    });

</script>

刪除節點

remove()

作用是從DOM中刪除所有匹配的元素

返回值

  返回刪除元素的jQuery物件,其中中不包含事件

detach()

作用和remove相同，但返回值的包含原來的繫結事件

<div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
</div>
<script>
    $(function(){
           //刪除 .outer的第一個子元素
           //$result 中沒有該元素繫結的事件
         var $result=$('.outer :first-child').remove();
            //$result中包含刪除元素之前繫結的事件
         var $result=$('.outer :first-child').detach();
                //給inner繫結事件
            $('.inner').click(function(){
                //this -->inner DOM
                // alert(this.innerHTML);
                alert($(this).html());
            });
    });

</script>

清空節點

 empty()

清空元素中的所有後代節點,該元素還在.而刪除節點則將該元素與後代一起刪除

<div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
</div>
<script>
    $(function(){
         $('.outer').empty();
    });

</script>

包裹節點

 a.wrap(b)             使用b在每一個a外面包裹         a.innerwrap(b)         a.wrapAll(b)

 遍歷節點

children()         find('span')             在後代中找符合條件的         closest('div')             查詢離他最近的符合條件的祖先元素         parent()         parents()             祖先元素         next()         nextAll()         prev()         prevAll()         filter('span')             $('div').filter('span')

屬性操作

attr(key)         獲取該屬性對應的屬性值     attr(key,val)         設定屬性的值     prop(key,value)         一個引數             獲取該屬性對應的屬性值         兩個引數             設定屬性的值         一般對Boolean屬性進行操作

    removeAttr(attrName)         刪除屬性     removeProp(propName)         刪除自定義的屬性

文字操作

val()         無參             獲取第一元素的value         有參 設定所有val()     html()         無參             獲取所有元素的InnerHtml         有參 設定所有innerText     text()         無參             獲取第一元素的innerText         有參 設定所有innerText

樣式操作

    css({});     addClass(className)     removeClass(className)     hasClass(className)