jQuery中的DOM操作

a達達發表於2018-09-06

DOM操作

查詢節點

$( ) – 可以通過jQuery選擇器來查詢元素節點
attr( ) – 可以通過jQuery物件提供的方法來查詢屬性節點
text( ) – 可以通過jQuery物件提供的方法來查詢文字節點

示例程式碼:

    <script src="js/jquery.js"></script>
</head>
<body>
<button id="btn" name="button">按鈕</button>
<script>
    // 定位頁面元素 - jQuery的選擇器
    var $btn = $(`#btn`);
    // 指定元素的文字內容 - 類似於DOM中的textContent屬性
    console.log($btn.text());
    // 指定元素的指定屬性名得到的屬性值 - 類似於DOM中的getAttribute(attrName)
    console.log($btn.attr(`name`));
    // 為指定元素設定文字內容
    $btn.text(`新按鈕`);

    $btn.attr(`class`,`cls`);

    /*
        jQuery查詢頁面元素 - 並沒有參考DOM中的Node物件，而是Element物件
        * text()方法 - 類似於DOM中的textContent屬性
          * 獲取 - text()
          * 設定 - text(textContent)
            * textContent - 表示新的文字內容
        * attr()方法
          * 獲取 - attr(name) - 類似於DOM中的getAttribute(name)
          * 設定 - attr(name, value) - 類似於DOM中的setAttribute(name, value)
     */

</script>
</body>

遍歷節點

獲取父節點

parent( ) – 表示獲取指定元素的父級“括號中填寫可選引數
parents() – 表示獲取指定元素的祖先“括號中填寫可選引數（可以不寫）”closest( ) – 表示獲取與指定元素第一個匹配的祖先“括號中填寫匹配指定元素的選擇器
注意:
parents()的引數不能不寫
parent()的引數可以不寫

示例程式碼:

    <script src="js/jquery.js"></script>
</head>
<body>
<div class="container">
    <ul>
        <li id="bj">北京</li>
        <li>天津</li>
        <li>重慶</li>
    </ul>
</div>
<script>
    var $bj = $(`#bj`);
    /*
        獲取北京節點的父節點
        parent(expr)方法
        * 作用 - 獲取指定元素的父元素
        * 引數
          * expr - 可選，表示為選擇器，起到過濾作用
      */
    console.log($bj.parent(`div`));
    /*
        獲取北京節點的所有祖先節點
        parents(expr)方法
        * 作用 - 獲取指定元素的所有祖先元素
        * 引數
          * expr - 可選，表示為選擇器，起到過濾作用
     */
    console.log($bj.parents(`div`));
    /*
        closest()方法
        * 作用 - 獲取指定元素的指定祖先元素，返回第一個匹配的元素
        * 引數
          * expr - 表示為選擇器，起到過濾作用
        注意 - jQuery永不報錯，只是不提供結果
     */
    console.log($bj.closest(`div`));

</script>
</body>

獲取子節點

示例程式碼:

    <script src="js/jquery.js"></script>
</head>
<body>
<div class="container">
    <ul>
        <li id="bj">北京
            <ul>
                <li>東城區</li>
                <li>西城區</li>
                <li>朝陽區</li>
            </ul>
        </li>
        <li>天津</li>
        <li>重慶</li>
    </ul>
</div>
<script>
    var $ul = $(`ul:first`);
    // 獲取指定元素的所有子元素
    console.log($ul.children());
    // 獲取指定元素的指定後代元素
    console.log($ul.find(`li`));

</script>
</body>

獲取兄弟節點

siblings() – 獲取指定元素所有的兄弟元素
prev() – 獲取指定元素的上一個相鄰兄弟元素
next() – 獲取指定元素的下一個相鄰兄弟元素

示例程式碼:

    <script src="js/jquery.js"></script>
</head>
<body>
<div class="container">
    <ul>
        <li>南京</li>
        <li>北京</li>
        <li id="tj">天津</li>
        <li>重慶</li>
        <li>長春</li>
    </ul>
</div>
<script>
    var $tj = $(`#tj`);
    // next() - 表示獲取下一個相鄰兄弟元素
    console.log($tj.next());
    // prev() - 表示獲取上一個相鄰兄弟元素
    console.log($tj.prev()); 
</script>
</body>

建立節點

$( ) – 可以建立元素節點“括號中直接填寫要建立的元素
text( ) – 可以建立文字節點“括號中直接填寫要建立的文字內容
attr( ) – 可以建立屬性節點“括號中直接填寫要建立的屬性（先寫屬性名，在寫屬性值
$( ) – 也可以直接建立帶有屬性和文字內容的元素“括號中直接填寫要建立的HTML程式碼

示例程式碼:

    <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li>南京</li>
    <li>北京</li>
    <li id="tj">天津</li>
    <li>重慶</li>
</ul>
<script>
    // 1.建立元素節點
    // var $newLi = $(`<li></li>`);
    // 2.設定文字內容
    // $newLi.text(`佳木斯`);
    // 3.設定屬性
    // $newLi.attr(`id`,`cc`);

    // jQuery的工廠函式接收的是字串型別的HTML程式碼
    var $newLi = $(`<li id="cc">佳木斯</li>`);

    $(`#city`).append($newLi);

</script>
</body>

插入節點

插入內部節點

插入內部節點 – 就是為指定元素新增子節點
append() – 插入到指定節點的所有子節點列表的最後面
prepend() – 插入到指定節點的所有子節點列表的前後面
appendTo()方法是append()方法逆操作
prependTo()方法是prepend()方法逆操作

示例程式碼:

    <script src="js/jquery.js"></script>
</head>
<body>
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // 1.建立新的<li>元素
    var $li = $(`<li id="cc">佳木斯</li>`);
    // append() - 類似於DOM中的appendChild()
    // $(`ul`).append($li);
    // appendTo()方法與append()互為逆操作
    // $li.appendTo($(`ul`));

    // prepend()方法 - 插入指定節點的所有子節點列表的最前面
    $(`ul`).prepend($li);

</script>
</body>

插入外部節點

插入外部節點 – 就是為指定元素新增兄弟節點

示例程式碼:

   <script src="js/jquery.js"></script>
</head>
<body>
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // 1.建立新的<li>元素
    var $li = $(`<li id="cc">佳木斯</li>`);

    // $(`ul`).before($li);
    $(`ul`).after($li);

</script>
</body>

刪除節點

remove( ) – 表示刪除指定元素,()中填寫與指定的元素相匹配的選擇器
empty( ) – 表示刪除指定元素的所有後代元素 – 就是清空
備註: jQuery中刪除節點是誰呼叫remove刪除誰

示例程式碼:

    <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // 哪個元素呼叫remove() - 哪個元素被刪除
    // $(`#bj`).remove();
    // empty()表示刪除後代節點，保留自身節點 - 清空
    $(`#city`).empty();

</script>
</body>

複製節點

clone() – 表示對指定的元素進行復制
注意()中填寫布林值被的無效
true – 表示對指定元素所繫結事件進行復制
false – 表示不對指定元素所繫結的事件進行復制
注意: 事件需要通過jQuery方式進行繫結才可複製

示例程式碼:

    <script src="js/jquery.js"></script>
</head>
<body>
<button id="btn">按鈕</button>
<script>
    $(`#btn`).click(function(){
        console.log(`this is button`);
    });
    /*
        * jQuery的clone(boolean)方法 - 參數列示是否複製事件
        * DOM的cloneNode(boolean)方法 - 參數列示是否複製後代節點
     */
    var $copy = $(`#btn`).clone(true);

    $(`body`).append($copy);

</script>
</body>

替換節點

replaceWith() – 表示由被替換呼叫該方法進行替換,()中填寫用來替換的元素
replaceAll() – 表示由用來替換元素呼叫該方法進行替換()中填寫被替換的元素

示例程式碼:

    <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // 被替換的元素呼叫replaceWith()方法，該方法接收的引數是替換的元素
    // $(`#bj`).replaceWith($(`<li id="cc">長春</li>`));
    // replaceAll()方法就是顛倒了的replaceWith()方法
    $(`<li id="cc">長春</li>`).replaceAll($(`#bj`));

</script>
</body>

屬性操作

attr( ) – 表示獲取指定元素的指定屬性
removeAttr( ) – 表示刪除指定元素的指定屬性

示例程式碼:

    <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // removeAttr()方法 - 類似於DOM中的removeAttribute()
    $(`#bj`).removeAttr(`id`);

</script>
</body>

樣式操作

text() – 表示獲取指定元素的文字內容

示例程式碼:

    <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        .two {
            width: 400px;
            height: 400px;
            background-color: yellowgreen;
        }

    </style>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="box"></div>
<script>
    // 通過設定style屬性為<div>元素新增內聯樣式 - 程式碼可讀性
    // $(`#box`).attr(`style`,`width:100px;height:100px;background-color:red;`);

    // 通過設定class屬性為<div>元素新增外聯樣式 - 預定義
    $(`#box`).attr(`class`,`one`);

    // addClass(className)方法 - 表示新增樣式(並不影響指定元素原本的樣式)
    $(`#box`).addClass(`two`);
    // $(`#box`).attr(`class`,`two`);// 替換樣式

    /*
        removeClass()方法 - 刪除樣式
        * removeClass()方法 - 刪除所有樣式
        * removeClass(className) - 刪除指定樣式
          * 如果刪除多個指定樣式，樣式名稱之間使用空格分隔
     */
    // $(`#box`).removeClass(`one`);

    // toggleClass()方法 - 在刪除指定樣式與新增指定樣式之間切換
    // $(`#box`).toggleClass(`one`);

    // hasClass(className)方法 - 判斷指定元素中是否包含指定樣式名稱
    console.log($(`#box`).hasClass(`one`));

    /*
        css()方法
        * css(name) - 獲取指定元素的指定樣式屬性值
        * css(name, value) - 為指定元素設定指定的樣式屬性值(內聯樣式)
        * css(options) - 為指定元素設定指定的樣式屬性值(內聯樣式)
          * options - 是一個物件型別的，表示所有的樣式屬性
     */
    console.log($(`#box`).css(`width`));

    // $(`#box`).css(`width`,`600px`);
    // $(`#box`).css(`height`,`600px`);
    // jQuery支援鏈式操作 - jQuery提供的方法都統一返回jQuery物件
    // $(`#box`).css(`width`,`600px`).css(`height`,`600px`);

    $(`#box`).css({
        width: `600px`,
        height: `600px`
    });

</script>
</body>

HTML操作

示例程式碼:

    <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<input type="text" value="請輸入你的使用者名稱">
<script>
    console.log($(`#city`).html());

    var $html = $(`#city`).html();
    $html += `<li>長春</li>`;
    $(`#city`).html($html);

    console.log($(`input`).val());

    $(`input`).val(`密碼`);

</script>
</body>

jquery 中的dom操作
2018-12-15
jQuery
jQuery中DOM操作
2016-01-06
jQuery
jQuery的DOM操作、
2017-03-09
jQuery
JQuery的DOM操作
2024-09-07
jQuery
jQuery 操作 DOM
2019-08-21
jQuery
jQuery 之 [ DOM操作 ]
2018-09-06
jQuery
【jQuery】之DOM操作
2018-09-07
jQuery
[jQuery] DOM操作薦
2013-08-10
jQuery
jQuery系列：DOM操作
2015-06-07
jQuery
jQuery入門-DOM操作
2018-09-23
jQuery
angular中的dom操作
2017-03-31
Angular
react中的DOM操作
2018-04-04
React
jQuery操作dom節點empty()方法
2021-09-11
jQuery
jQuery基礎DOM和CSS操作
2017-10-13
jQueryCSS
jquery中dom節點操作方法empty和remove的區別
2021-09-11
jQueryREM
jQuery知識總結之DOM操作
2019-03-22
jQuery
jquery常用表單&DOM操作方法
2016-07-26
jQuery
“React中的DOM操作”筆記
2016-07-03
React筆記
jquery DOM
2015-11-08
jQuery
拋棄臃腫的 jQuery，用 NodeList.js 操作 DOM
2016-07-07
jQueryJS
JS中的DOM— —節點以及操作
2021-09-09
JS
js中Dom操作的個人總結
2018-01-07
JS
JS中DOM操作總結
2019-02-16
JS
jquery中dom元素的attr和prop方法的理解
2016-05-16
jQuery
jQuery關於DOM操作節點一些方法
2020-11-14
jQuery
jQuery和DOM
2018-09-25
jQuery
js的dom操作
2018-12-09
JS
javascript DOM的操作
2016-05-11
JavaScript
DOM 操作
2018-07-28
DOM操作
2018-05-07
[NGX]使用ViewContainerRef來操作Angular中的DOM
2018-05-11
ViewAIAngular
為什麼說JavaScript中的DOM操作很慢
2016-03-31
JavaScript
jquery DOM&事件
2017-12-13
jQuery事件
【JQuery】DOM物件和JQuery物件的互相轉換
2020-12-14
jQuery物件
BOM與DOM之DOM操作
2022-02-10
常見的DOM操作
2018-07-19
jQuery DOM節點的遍歷
2017-08-15
jQuery
JQuery中操作Css樣式的方法
2017-11-08
jQueryCSS

jQuery中的DOM操作

DOM操作

查詢節點

遍歷節點

獲取父節點

獲取子節點

獲取兄弟節點

建立節點

插入節點

插入內部節點

插入外部節點

刪除節點

複製節點

替換節點

屬性操作

樣式操作

HTML操作

相關文章