jQuery 之 [ DOM操做 ]

時間 2019-12-05

標籤 jquery dom 欄目 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()方法

表示獲取指定元素的父節點
參數 - 可選css
- 經過選擇器來進一步篩選

<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()方法

表示獲取指定元素的全部祖先節點
參數 - 可選html
- 經過選擇器來進一步篩選

<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()方法

表示獲取指定元素的指定祖先節點，並返回第一個匹配的
參數jquery
- 經過選擇器來進一步篩選

<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()方法app
- 表示插入到指定節點中的最後面 - 該方法由被插入的節點調用
appendTo()方法函數
- 表示插入到指定節點中的最後面 - 該方法由插入的節點調用
prepend()方法code
- 表示插入到指定節點中的最前面 - 該方法由被插入的節點調用
prependTo()方法htm
- 表示插入到指定節點中的最前面 - 該方法由插入的節點調用

<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()方法ip
- 表示插入到指定節點後一個相鄰位置 - 該方法由被插入的節點調用
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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。