jquery文檔操做

時間 2019-11-10

標籤 jquery 文檔欄目 JQuery 简体版

原文原文鏈接

js的DOM操做,也就是所謂的增刪改查DOM操做。經過js的DOM的操做，你們也能發現，大量的繁瑣代碼實現咱們想要的效果。那麼jQuery的文檔操做的API提供了便利的方法供咱們操做咱們的文檔。javascript

看一個以前咱們js操做DOM的例子：html

$(function () {
    var ul0 = document.getElementsByTagName('ul')[0]; //第一個ul
    var newli = document.createElement('li'); //li對象建立
    // newli.innerHTML = '<a>小馬過河</a>'; //建立的li添加內容  引號添加文本，反引號添加html。
    newli.innerHTML = `<a href="#">小馬過河</a>`; //建立的li添加內容
    ul0.appendChild(newli);  //li對象追加到ul的最後
})

一.插入操做

知識點1：

語法：java

父元素.append(子元素)

解釋：追加某元素，在父元素中添加新的子元素。子元素能夠爲：stirng | element（js對象） | jquery元素jquery

代碼：app

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
    </style>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
         <script type="text/javascript">
            $(function () {
                var newli=document.createElement('li');
                newli.innerText='魔降風雲變'
                $('ul :eq(0)').append('<li>小馬過河</li>')//父中添加子，子能夠是string
                $('ul :eq(0)').append(newli) //子能夠是js對象
                $('ul :eq(0)').append($('.active'))//子能夠是jq對象，結果是移動位置了。移動標籤位置
        })
    </script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    ------------------
    <ul>
        <li class="active"> ul2的一 </li>
        <li>ul2的二</li>
    </ul>
</body>
</html>

View Code

<li>小馬過河</li>不是string，糾正一下。父追加子，子能夠字符串，引發來的標籤，DOM對象，jq對象dom

PS:若是追加的是jquery對象那麼這些元素將從原位置上消失。簡言之，就是一個移動操做。ide

彷佛追加到第一個子標籤後面了，難道不是追加到最後麼？開頭添加一個元素，結果仍是第一個追加是在開頭元素的後面，後面的追加到上一個追加的後面this

實際上是這樣的：spa

指定索引的標籤追加子元素，將子元素在第一個子元素內添加，這樣的話，都是行內就一行顯示，第一個子元素中有塊級的就換行顯示3d

不用指定索引的追加子元素纔是正常的追加。

知識點2：

語法：

子元素.appendTo(父元素)

解釋：追加到某元素子元素添加到父元素

            $(function () {
            $('<li>使用選擇器追加，是從父的最後一個追加，且與索引追加沒衝突</li>').appendTo($('.ul1'))
            $('<li>使用索引添加，從第一行後面開始追加</li>').appendTo($('ul :eq(0)'))
        })

$('<li>小馬過河</li>').appendTo($('ul :eq(0)')) //子追加到父，

PS:要添加的元素一樣既能夠是stirng 、element(js對象) 、 jquery元素

知識點3：

語法：

父元素.prepend(子元素)；

解釋：前置添加，添加到父元素的第一個位置

$('ul').prepend('<li>我是第一個</li>')

父前置加子，這裏父是第一個ul，li裏文字和這裏的文字都是行內全部一行顯示，‘’是誰 ‘’ 在前

父使用索引 prepend放法，不是想象的那樣

沒有索引，prepend, 前置追加一個子

知識點4：

語法：

子元素.prependTo(父元素)；

解釋：前置添加，添加到父元素的第一個位置

$('<a href="#">mmm</a>').prependTo($('.ul1'))

知識點5：

語法：

兄弟元素.after(要插入的兄弟元素)；
要插入的兄弟元素.inserAfter(兄弟元素)；

解釋：在匹配的元素以後插入內容

$('.ul1 li').after('mcw')  
 $('<li>小馬過河</li>').insertAfter('.ul2 li')

元素對象.的後面加內容；$()對象點插入在元素選擇器後 (非對象)

知識點6：

語法：

兄弟元素.before(要插入的兄弟元素)；
要插入的兄弟元素.inserBefore(兄弟元素)；

解釋：在匹配的元素以後插入內容

$('.ul1 li').before('我是一個粉刷匠')
$('<h5>我是一個h5標題</h5>').insertBefore('.ul2 li')

元素對象.的前面加內容；內容對象.插入前面在選擇器選中的（非對象）

2、克隆操做

語法：

$(選擇器).clone();

解釋：克隆匹配的DOM元素

$('button').click(function() {

  // 1.clone()：克隆匹配的DOM元素
 // 2.clone(true)：元素以及其全部的事件處理而且選中這些克隆的副本(簡言之，副本具備與真身同樣的事件處理能力)
  $(this).clone(true).insertAfter(this);
})

3、修改操做

知識點1：

語法：

$(selector).replaceWith(content);

將全部匹配的元素替換成指定的string、js對象、jquery對象。

//將全部的h5標題替換爲a標籤
$('h5').replaceWith('<a href="#">hello world</a>')
//將全部h5標題標籤替換成id爲app的dom元素
$('h5').replaceWith($('#app'));

將選中的對象替換用內容

知識點2：

語法：

$('<p>哈哈哈</p>')replaceAll('h2');

解釋：替換全部。將全部的h2標籤替換成p標籤。

$('<br/><hr/><button>按鈕</button>').replaceAll('h4')

感受和replaceWith沒太大區別

四、刪除操做

知識點1：

語法：

$(selector).remove();

解釋：刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）

$('ul').remove();

View Code

點擊一次就刪除，按鈕就沒了。；

在前面再把按鈕加上，可是再點擊的時候事件沒有發生了。刪除節點後，事件也會刪除

知識點2：

語法：

$(selector).detach();

解釋：刪除節點後，事件會保留

var $btn = $('button').detach() //此時按鈕能追加到ul中 $('ul').append($btn)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
    </style>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $('button').click(function () {
            alert('小馬過河');
            $(this).detach();
            $('.ul1').before($(this).detach())
        })
        })
    </script>
</head>
<body>
    <button class="butt">按鈕</button>
    <ul class="ul1">
        <li>1</li>
        <li>2</li>
    </ul>
    ------------------
    <ul class="ul2">
        <li class="active"> ul2的一 </li>
        <li>ul2的二</li>
    </ul>
</body>
</html>

View Code

使用detach實現了反覆點擊，反覆生成這一個窗口事件。

知識點3：

語法：

$(selector).empty();

解釋：清空選中元素中的全部後代節點

//清空掉ul中的子元素，保留ul
$('ul').empty()

添加置空的事件

點擊以後ul匹配上的都沒有了

參考連接：https://www.cnblogs.com/majj/p/9119467.html

相關標籤/搜索

每日一句

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