jQuery入門教程-文檔操做方法

時間 2019-11-09

原文原文鏈接

1、append()和appendTo()

1.1 append()方法

<body>
    <p>好好學習</p>
    <button>append() 方法</button>
</body>
    <script>
        $('button').click(function() {
            $('p').append('<p>每天向上</p>');
        });
    </script>

1.2 appendTo()方法

<body>
    <p>好好學習</p>
    <button>appendTo() 方法</button>
</body>
    <script>
        $('button').click(function() {
            $('<p>每天向上</p>').appendTo('p');
        });
    </script>

1.3 append()和appendTo()比較

（1）用法相同
在被選元素的結尾（仍然在內部）插入指定內容。html

（2）不一樣之處
內容和選擇器的位置不一樣，以及 append() 可以使用函數來附加內容。web

2、html()方法

2.1 返回元素內容

當使用該方法返回一個值時，它會返回第一個匹配元素的 內容 (inner HTML)。

<body>
    <p>好好學習</p>
    <button>返回被選元素的內容</button>
</body>
    <script>
        $('button').click(function() {
            alert($('p').html());
        });
    </script>

2.2 設置元素內容

當使用該方法設置一個值時，它會覆蓋全部匹配元素的內容 (inner HTML)。segmentfault

<body>
    <p>好好學習</p>
    <button>設置被選元素的內容</button>
</body>
    <script>
        $('button').click(function() {
            $('p').html('每天向上');
        });
    </script>

2.3 使用函數來設置元素內容

（1）語法app

$(selector).html(function(index,oldcontent))

（2）參數函數

參數	描述
function(index,oldcontent)	規定一個返回被選元素的新內容的函數。index - 可選。接收選擇器的 index 位置。oldcontent - 可選。接收選擇器的當前內容。

（3）示例學習

<body>
    <p>好好學習</p>
    <p>每天向上</p>
    <button>設置被選元素的內容</button>
</body>
    <script>
        $('button').click(function() {
            $('p').html(function (n) {
                return '這個 p 元素的 index 是' + ' ' + n;
            });
        });
    </script>