【jQuery】之DOM操作

佐珥玎發表於2018-09-07
jQuery

jQuery

DOM操作

查詢節點

查詢元素節點

以選擇器來查詢元素節點

查詢文字節點

以text()方法來查詢文字節點

查詢屬性節點

以attr()方法來查詢屬性節點

<body>
<script src="js/jquery.js"></script>
<script></script>
</body>
<script is="qyc">  name="button"</script>
<script>
    var $qyc = $(`#qyc`);
    console.log(`$qyc`);
    console.log($qyc.text);
    console.log($qyc.attr(`neme`));
    $qyc.text(`新按鈕`)
    $qyc.attr(`class`,`cls`);

    /*
    * jQuery查詢元素-
    * text()方法-等於DOM的textContent屬性
    * 獲取-text()
    * text(textContent)
    * textContent新的的文字內容
    *
    * attr()方法
    * 獲取- attr（name,value）-等於DOM的setAttribute(mnm，valus)*/

</script>

獲取父節點

selector:便是jQurery中的選擇器 另外parent()：獲取父級元素 parents()：獲取祖先級元素 closest():匹配上級元素，並返回相同的元素

<body>
<div class="qh">
    <ul>
        <li id="dy">端遊</li>
        <li>單機</li>
        <li>手遊</li>
    </ul>
</div>
<script>
    var $dy = $(`#dy`);
    console.log($dy.psrent(`div`));

    /*獲取端遊節點所有祖先節點
   * parent(expr)方法
   * 獲取元素所有父元素
   * expr-表示選擇器，並有過濾的作用
    */
    console.log($dy.psrent(`div`));
    /*獲取端遊節點所有祖先節點
    * parents(expr)方法
    * 獲取元素所有祖先元素
    * expr-表示選擇器，並有過濾的作用
     */

    console.log($dy.chosect(`div`));
    /*closest()方法
    * 獲取元素指定祖先元素；返回第一個匹配元素
    * expr-表示為選擇器，並有過濾的作用
    * 注意- jQuery用不報錯，不會提供結果
     */

</script>
</body>

獲取子節點

children()只獲取子級元素（不獲取後代元素）

<script src="js/jquery.js"></script>
</head>
<body>
<div class="qh">
    <ul id="dy">端遊
        <li>聯盟</li>
        <li>地下城</li>
        <li>火線</li>
    </ul>
    <ul>手遊</ul>
    <ul>頁遊</ul>
</div>
<script>
    var $ul = $(`ul:first`);
    console.log($ul.children());
//    獲取元素所有的子元素
    console.log($ul.find(`li`));
//    獲取元素的後代元素
</script>
</body>

獲取兄弟節點

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

<body>
<div class="qh">
    <ul>
        <li id="dy">端遊</li>
        <li>單機</li>
        <li>手遊</li>
    </ul>
</div>
<script>
    var dy = document.getElementById(`dy`);
    var ul = dy.parentElement;
    var div = ul.parentElement;
    var body = div.parentElement;
    var html = body.parentElement;
    var root = html.parentElement;//null
    console.log(root);
    var arr = [];//用於儲存元素的所有祖先元素
    function parents(element) {
        var parent = element.parentElement;
//        獲取元素的父元素
        if(parent === null){ return; }
        arr.push(parent);
//        獲取父元素，並增加到陣列中
        parents(parent);
//        定義個遞迴函式
    }
    parents(dy);
    console.log(arr);
</script>
</body>

查詢後代元素

以find：獲取所有匹配其元素的選擇器

<body>
<div class="qh">
    <ul id="qh">
        <li>端遊</li>
        <li>單機</li>
        <li id="sy">手遊</li>
        <li>掌機</li>
    </ul>
</div>
<script>
    var $sy = $(`#sy`);
    console.log($sy.next());//獲取下個相鄰兄弟元素
    console.log($sy.prev());//獲取上個相鄰兄弟元素
</script>
</body>

3.建立節點

工廠函式：以attr()該屬性來建立屬性節點

<script src="js/jquery.js"></script>
</head>
<body>
<ul id="qh">
    <li>端遊</li>
    <li>單機</li>
    <li id="sy">手遊</li>
    <li>掌機</li>
</ul>
<script>
    //    var $newli = $(`<li></li>`);
    //    $newli.text(`掌機`);
    //    $newLi.attr(`id`,`zj`);
    var $newli = $(`<li id="q1">頁遊</li>`);
    //    jQuery的工廠函式接收字串型別HTML程式碼
    $(`#qh`).append($newli);
</script>
</body>

4.插入節點

插入內部節點

append()方法
表示插入到指定節點列表中的最後面
appendTo()方法
表示插入到指定節點列表中的最後面
prepend()方法
表示插入到指定節點列表中的最前面
prependTo()方法
表示插入到指定節點列表中的最前面
<body>

   <script src="js/jquery.js"></script>
</head>
<body>
<ul id="qh">
    <li>端遊</li>
    <li>單機</li>
    <li id="sy">手遊</li>
    <li>掌機</li>
</ul>
<script>
    //    var $newli = $(`<li></li>`);
    //    $newli.text(`掌機`);
    //    $newLi.attr(`id`,`zj`);
    var $newli = $(`<li id="q1">頁遊</li>`);
    //    jQuery的工廠函式接收字串型別HTML程式碼
    $(`#qh`).append($newli);
</script>
</body>

插入外部節點

before()方法
表示插入到指定元素節點前一個位置
insertBefore()方法
表示插入到指定元素節點前一個位置
after()方法
表示插入到指定元素節點後一個位置
insertAfter()方法
表示插入到指定元素節點後一個位置

<script src="js/jquery.js"></script>
</head>
<body>
<ul>
    <li>端遊</li>
    <li>單機</li>
    <li>手遊</li>
</ul>
<script>
    var $li = $(`<li id="q1">頁遊</li>`);
    //    建立新li元素
    // $(`ul`).before($li);
    //    插入li元素的上方
    $(`ul`).after($li);
    //    插入li元素下方
</script>
</body>

5.刪除節點

remove():用來刪掉DOM所有的元素 empty():用來刪除DOM的所有子節點

    <script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
    <li id="lm">聯盟</li>
    <li>火線</li>
    <li>地下城</li>
</ul>
<script>
//元素呼叫remove()該元素被刪除
//    $(`#lm`).remove();
//    empty()表示刪除後代節點；保留自身節點-清空
</script>
</body>

6.替換節點`

replaceWith()方法將所有匹配元素替換成HTML和DOM元素

   <script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
    <li id="lm">聯盟</li>
    <li>火線</li>
    <li>地下城</li>
</ul>
<script>
//    替換的元素呼叫replaceWith()，該方法接收引數是替換元素
//    $(`#lm`).replaceWith($(`<li id="zj">戰甲</li>`));
//    replaceAll()就是顛倒replaceWith()
    $(`<li id="zj">戰甲</li>`).replaceAll((`#lm`));
</script>
</body>

7.複製節點

jQuery的clone方法 – 參數列示是否複製事件
DOM的cloneNode方法 – 參數列示是否複製後代節點

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

8.屬性節點

    <script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
    <li id="lm">聯盟</li>
    <li>火線</li>
    <li>地下城</li>
</ul>
<script>
    $(`#bj`).removeAttr(`id`);
//    removeAttr()-相當於DOM中的removeAttribute()
</script>
</body>

9.樣式操作

  <style>
        .qh {
            width: 200px;
            height: 200px;
            border: 1px solid blue;
        }
        .cq {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            background-color: red;
        }
    </style>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="qyc"></div>
<script>
    // $(`#qyc`).attr(`style`,`width:100px;height:100px;background-color:red;`);
//    attr設定style屬性的樣式
    $(`#qyc`).attr(`class`,`qh`);
    // 通過設定class屬性為<div>元素新增外聯樣式
    $(`#qyc`).addClass(`cq`);
    // $(`#qyc`).attr(`class`,`cq`);// 替換樣式
    // addClass(className)方法 - 表示新增樣式(並不影響指定元素原本的樣式)
    console.log($(`#qyc`).hasClass(`qh`));
    // hasClass(className)方法 - 判斷指定元素中是否包含指定樣式名稱

    console.log($(`#qyc`).css(`width`));
   /* removeClass()方法 - 刪除樣式
    * removeClass()方法 - 刪除所有樣式
    * removeClass(className) - 刪除指定樣式
    */

    // $(`#qh`).removeClass(`cq`);

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

    // hasClass(className)方法 - 判斷指定元素中是否包含指定樣式名稱


    $(`#qyc`).css({
        width: `600px`,
        height: `600px`
    });
</script>
</body>

10.HTML操作


      <script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
    <li id="lm">聯盟</li>
    <li>火線</li>
    <li>地下城</li>
</ul>
<script>
    console.log($(`#yx`).html());

    var $html = $(`#yx`).html();
    $html += `<li>戰甲</li>`;
    $(`#yx`).html($html);

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

    $(`input`).val(`密碼`);
</script>
</body>

相關文章