jQuery 之 [ DOM操作 ]

蔡志遠發表於2018-09-06
jQuery

jQuery的DOM操作

查詢節點

元素節點

  • 可以通過jQuery選擇器來查詢元素節點

屬性節點

  • 通過attr()方法來獲取指定元素節點的屬性節點

文字節點

  • 通過text()方法來獲取指定元素節點的文字節點

示例程式碼

<body>
<button id="btn" name="anniu">按鈕</button>
<script>
    /* 定位頁面元素 - 獲取指定的元素節點 */
    var $btn = $( `#btn` );
    console.log( $btn );// 顯示 jQuery.fn.init [button#btn, context: document, selector: "#btn"]
    /* 通過text()方法來獲取指定元素節點的文字節點 */
    console.log( $btn.text() );// 顯示 按鈕(文字內容)
    /* 通過attr()方法來獲取指定元素節點的屬性節點 - 該方法接收的引數為要獲取的屬性名 */
    console.log( $btn.attr( `name` ) );// 顯示 anniu(屬性值)
</script>
</body>

獲取父節點

parent()方法

  • 表示獲取指定元素的父節點

  • 引數 – 可選

    • 通過選擇器來進一步篩選
<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物獵人</li>
        <li>天涯明月刀</li>
        <li>絕地求生</li>
    </ul>
</div>
<script>
    /* 定位頁面元素 */
    var $lr = $( `#gwlr` );
    
    console.log( $lr.parent( `div` ) );// 顯示 jQuery.fn.init [ul, prevObject: jQuery.fn.init(1), context: document] - 寫引數後顯示 jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

parents()方法

  • 表示獲取指定元素的所有祖先節點

  • 引數 – 可選

    • 通過選擇器來進一步篩選
<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物獵人</li>
        <li>天涯明月刀</li>
        <li>絕地求生</li>
    </ul>
</div>
<script>
    /* 定位頁面元素 */
    var $lr = $( `#gwlr` );
    
    console.log( $lr.parents( `div` ) );// 顯示 jQuery.fn.init(4) [ul, div.game, body, html, prevObject: jQuery.fn.init(1), context: document] - 寫引數後顯示  jQuery.fn.init [div.game, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

closest()方法

  • 表示獲取指定元素的指定祖先節點，並返回第一個匹配的

  • 引數

    • 通過選擇器來進一步篩選
<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物獵人</li>
        <li>天涯明月刀</li>
        <li>絕地求生</li>
    </ul>
</div>
<script>
    /* 定位頁面元素 */
    var $lr = $( `#gwlr` );
    
    console.log( $lr.closest( `div` ) );// 顯示 jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document] - 寫引數後顯示  jQuery.fn.init [div.game, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

獲取子節點

children()方法

  • 表示獲取指定元素的所有子元素
<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物獵人
            <ul>
                <li>古龍種</li>
                <li>鳥龍種</li>
                <li>爬蟲種</li>
            </ul>
        </li>
        <li>天涯明月刀</li>
        <li>絕地求生</li>
    </ul>
</div>
<script>
    /* 定位頁面元素 */
    var $ul = $( `ul` );
   
    console.log( $ul.children() );// 顯示 jQuery.fn.init(3) [li#gwlr, li, li, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

find()方法

  • 表示獲取指定元素的指定後代元素
<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物獵人
            <ul>
                <li>古龍種</li>
                <li>鳥龍種</li>
                <li>爬蟲種</li>
            </ul>
        </li>
        <li>天涯明月刀</li>
        <li>絕地求生</li>
    </ul>
</div>
<script>
    /* 定位頁面元素 */
    var $ul = $( `ul` );
    
    console.log( $ul.find( `li` ) );// 顯示 jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

獲取兄弟節點

next()方法

  • 表示獲取指定元素的下一個相鄰兄弟元素
<body>
<div class="game">
    <ul>
        <li>怪物獵人</li>
        <li id="tiandao">天涯明月刀</li>
        <li>絕地求生</li>
    </ul>
</div>
<script>
    /* 定位頁面原元素 */
    var $td = $( `#tiandao` );
    
    console.log( $td.next() );// 顯示 jQuery.fn.init [li, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

prev()方法

  • 表示獲取指定元素的上一個相鄰兄弟元素
<body>
<div class="game">
    <ul>
        <li>怪物獵人</li>
        <li id="tiandao">天涯明月刀</li>
        <li>絕地求生</li>
    </ul>
</div>
<script>
    /* 定位頁面原元素 */
    var $td = $( `#tiandao` );
    
    console.log( $td.prev() );// 顯示 jQuery.fn.init [li, prevObject: jQuery.fn.init(1), context: document]
</script>
</body>

建立節點

  • 通過jQuery物件的工廠函式來進行建立元素節點
  • 通過text()方法來建立文字內容
  • 通過attr()方法來建立屬性
  • 也可以通過工廠函式來建立完整HTML程式碼
<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物獵人</li>
        <li>天涯明月刀</li>
        <li>絕地求生</li>
    </ul>
</div>
<script>
    /* 建立元素節點 */
    var $newLi = $( `<li></li>` );
    /* 建立文字內容 */
    $newLi.text( `使命召喚` );
    /* 建立屬性 */
    $newLi.attr( `id`, `smzh` );

    /* 將建立的元素節點新增到指定元素中 */
    $( `#game` ).append( $newLi );

    /* 通過工廠函式建立完整的元素 */
    var $newLi2 = $( `<li id="nsh">逆水寒</li>` );
    /* 將建立的元素節點新增到指定元素中 */
    $( `#game` ).append( $newLi2 );
</script>
</body>

插入節點

  • 分為內部插入和外部插入

內部插入

  • append()方法

    • 表示插入到指定節點中的最後面 – 該方法由被插入的節點呼叫

  • appendTo()方法

    • 表示插入到指定節點中的最後面 – 該方法由插入的節點呼叫

  • prepend()方法

    • 表示插入到指定節點中的最前面 – 該方法由被插入的節點呼叫

  • prependTo()方法

    • 表示插入到指定節點中的最前面 – 該方法由插入的節點呼叫
<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物獵人</li>
        <li>天涯明月刀</li>
        <li>絕地求生</li>
    </ul>
</div>
<script>
    /* 獲取頁面指定元素 */
    var $ul = $( `ul` );
    /* 建立新元素節點 */
    var $newLi1 = $( `<li>逆水寒</li>` );
    
    /* 內部插入 */
    /* append()方法插入 */
    $ul.append( $newLi1 );
    /* appendTo()方法插入 */
    $newLi1.appendTo( $ul );
    /* prepend()方法插入 */
    $ul.prepend( $newLi1 );
    /* prependTo()方法插入 */
    $newLi1.prependTo( $ul );
</script>
</body>

外部插入

  • before()方法

    • 表示插入到指定節點前一個相鄰位置 – 該方法由被插入的節點呼叫

  • insertBefore()方法

    • 表示插入到指定節點前一個相鄰位置 – 該方法由插入的節點呼叫

  • after()方法

    • 表示插入到指定節點後一個相鄰位置 – 該方法由被插入的節點呼叫

  • insertAfter()方法

    • 表示插入到指定節點後一個相鄰位置 – 該方法由插入的節點呼叫
<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物獵人</li>
        <li>天涯明月刀</li>
        <li>絕地求生</li>
    </ul>
</div>
<script>
    /* 獲取頁面指定元素 */
    var $ul = $( `ul` );
    /* 建立新元素節點 */
    var $newLi2 = $( `<li>使命召喚</li>` );
    
    /* 外部插入 */
    /* before()方法插入 */
    $ul.before( $newLi2 );
    /* insertBefore()方法插入 */
    $newLi2.insertBefore( $ul );
    /* after()方法插入 */
    $ul.after( $newLi2 );
    /* insertAfter()方法插入 */
    $newLi2.insertAfter( $ul );
</script>
</body>

刪除節點

remove()方法

  • 表示刪除指定元素
  • 該方法為指定元素呼叫刪除自身

empty()方法

  • 表示刪除指定元素的所有後代元素

示例程式碼

<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物獵人</li>
        <li>天涯明月刀</li>
        <li>絕地求生</li>
    </ul>
</div>
<script>
    /* 獲取頁面元素 */
    var $ul = $( `ul` );
    var $lr = $( `#gwlr` );

    /* 通過remove()方法刪除指定元素 */
    $lr.remove();

    /* 通過empty()方法刪除指定元素的所有後代元素 */
    $ul.empty();
</script>
</body>

替換節點

replaceWith()方法

  • 表示由被替換的元素呼叫該方法進行替換“括號中填寫用來替換的元素”

replaceAll()方法

  • 表示由用來替換的元素呼叫該方法進行替換“括號中填寫被替換的元素”

示例程式碼

<body>
<div class="game">
    <ul>
        <li id="gwlr">怪物獵人</li>
        <li>天涯明月刀</li>
        <li>絕地求生</li>
    </ul>
</div>
<script>
    /* 定位被替換的元素 */
    var $lr = $( `#gwlr` );
    /* 建立替換的元素 */
    var $nsh = $( `<li>逆水寒</li>` );

    /* 通過replaceWith()方法進行替換 */
    $lr.replaceWith( $nsh );

    /* 通過replaceAll()方法進行替換 */
    $nsh.replaceAll( $lr );
</script>
</body>

複製節點

clone()方法

  • 表示對指定的元素進行復制

  • 引數 – 布林值

    • true – 表示對指定元素所繫結事件進行復制
    • false – 表示不對指定元素所繫結的事件進行復制
  • 該事件需要通過jQuery方式進行繫結才可複製
<body>
<button id="btn">按鈕</button>
<script>
    /* 定位被複制元素的位置 */
    var $btn = $( `#btn` );
    /* 為指定元素繫結事件 */
    $btn.click( function(){
        console.log( `這是按鈕...` );
    } );
    /* 進行復制並插入到指定元素中 */
    $btn.clone( true ).appendTo( $( `body` ) );
</script>
</body>

屬性和文字操作

屬性操作

attr()方法

  • 可以通過該方法對指定元素的指定屬性進行獲取
  • 也可以通過該方法對指定元素的指定屬性進行設定

removeAttr()方法

  • 用於刪除指定元素的指定屬性

示例程式碼

<body>
<p id="p" name="text">三步白頭</p>
<script>
    /* 定位頁面元素 */
    var $p = $( `#p` );

    /* 通過attr()方法獲取指定元素的指定屬性的屬性值 */
    console.log( $p.attr( `name` ) );// 顯示 text(屬性值)
    
    /* 通過attr()方法對指定元素的指定屬性進行設定 */
    console.log( $p.attr( `name`, `wenben` ) );// 顯示 <p id="p" name="wenben">三步白頭</p>
    
    /* 通過removeAttr()方法刪除指定元素的指定屬性 */
    console.log( $p.removeAttr( `name` ) );// 顯示 <p id="p">三步白頭</p>
</script>
</body>

文字操作

text()方法

  • 可以通過該方法來獲取指定元素的文字內容
  • 也可以通過該方法對指定元素新增文字內容

示例程式碼

<body>
<p id="p" name="text">三步白頭</p>
<script>
    /* 定位頁面元素 */
    var $p = $( `#p` );
    
    /* 通過text()方法獲取指定元素的文字內容 */
    console.log( $p.text() );// 顯示 三步白頭
    /* 通過text()方法對指定元素文字內容進行設定 */
    console.log( $p.text( `天道昭彰` ) );// 顯示 <p id="p">天道昭彰</p>
</script>
</body>

樣式操作

<head>
    <meta charset="UTF-8">
    <title>樣式操作</title>
    <style>
        .d1 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .d2 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="d1" style="width: 100px;height: 100px;background-color: red"></div>
<div id="d2" class="d1"></div>
<div id="d3"></div>
<script src="jquery.js"></script>
<script>
    /*
        樣式操作
        attr( ) - 表示獲取指定元素的指定樣式“括號中填寫指定的樣式名”
        addClass( ) - 表示新增指定樣式“括號中填寫指定的樣式名”
        removeClass( ) - 表示刪除樣式“括號中填寫指定的樣式名”
         * removeClass(樣式名) - 刪除指定樣式名的樣式
         * removeClass( ) - 刪除所有的樣式
        toggleClass( ) - 表示切換樣式“括號中填寫指定的樣式名”
         * 如果指定元素具有指定的樣式名，將刪除該樣式名
         * 如果指定元素不具有指定的樣式名，將新增該樣式名
        hasClass( ) - 表示判斷指定元素是否具有指定樣式名的樣式“括號中必須填寫指定的樣式名”
        css( ) - 表示獲取當前有效樣式“括號中填寫指定的樣式屬性名”
         * css( 屬性名，屬性值 ) - 也可以用來設定指定元素的指定樣式屬性
     */
    var $d1 = $( `#d1` );
    console.log( $d1.attr( `style` ) );
    var $d2 = $( `#d2` );
    console.log( $d2.attr( `class` ) );

    var $d3 = $( `#d3` );

    $d3.addClass( `d2` );

    $d3.removeClass( `d2` );

    $d2.toggleClass( `d1` );

    var $d2s = $d2.hasClass( `d1` );
    console.log( $d2s );

    var $d2x = $d2.css( `width` );
    console.log( $d2x );
    $d2.css( `backgroundColor`, `blueviolet` );
</script>
</body>

相關文章