jQuery中的DOM操做

時間 2019-12-09

標籤 jquery dom 欄目 JQuery 简体版

原文原文鏈接

DOM操做

查找節點

$( ) - 能夠經過jQuery選擇器來查找元素節點
attr( ) - 能夠經過jQuery對象提供的方法來查找屬性節點
text( ) - 能夠經過jQuery對象提供的方法來查找文本節點

示例代碼:css

<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()的參數能夠不寫

示例代碼:html

<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>

獲取子節點

示例代碼:jquery

<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() - 獲取指定元素的下一個相鄰兄弟元素

示例代碼:app

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

示例代碼:this

<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>

插入外部節點

插入外部節點 - 就是爲指定元素添加兄弟節點

示例代碼:code

<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刪除誰

示例代碼:htm

<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>

相關標籤/搜索

每日一句

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