JQuery的文档操作

jQuery的文档操作***

js操作DOM的例子：

var oUl = document.getElementsByTagName('ul')[0];
var oLi = document.createElement('li');
oLi.innerHTML = '赵云';
oUl.appendChild(oLi);

1.

父元素.append(子元素)

解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素

代码如下：

复制代码
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));
复制代码

PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。

2.

子元素.appendTo(父元素)

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

$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')

PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素

 3.

父元素.prepend(子元素)；

解释：前置添加， 添加到父元素的第一个位置

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

 4.

子元素.prependTo(父元素)；

解释：前置添加， 添加到父元素的第一个位置

 $('<a href="#">路飞学诚</a>').prependTo('ul')

5.

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

解释：在匹配的元素之后插入内容 

$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')

 6.

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

解释：在匹配的元素之后插入内容 

$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')

 二、克隆操作

语法：

$(选择器).clone();

解释：克隆匹配的DOM元素

复制代码
$('button').click(function() {

  // 1.clone()：克隆匹配的DOM元素
 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
  $(this).clone(true).insertAfter(this);
})
复制代码

三、修改操作

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

4、删除操作

1.

$(selector).remove();

解释：删除节点后，事件也会删除（简言之，删除了整个标签）

$('ul').remove();

2.

$(selector).detach();

解释：删除节点后，事件会保留

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

3.

$(selector).empty();

解释：清空选中元素中的所有后代节点

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

 示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <a href="javascript:void(0)">春色满园</a>
    <div class="park">公园</div>
    <script src="jquery.js"></script>

    <script>
        $(function () {
            var op = document.createElement('p');
            op.innerText="菊花";
            //父子嵌套
            $(".park").append(op);
            $(".park").append("<h2>秋景</h2>");
            $(".park").append("就是爱看你");
            $('<h1>管不住</h1>').appendTo(".park");
            //加在父元素内部第一个位置
            $(".park").prepend('<h1>暧昧</h1>')
            $(".park").append($("p"))  添加JQ对象是,直接就把上面的标签  p 拿下来了,相当于移动,上面的p标签消失

            });

    </script>


</body>
</html>

删除操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>

<body>
    <button id="btn">删除</button>
    <ul>
        <li id="fruit">橘子</li>
    </ul>
    <script>
        $(function () {
            $("#btn").click(function () {


                //删除这个节点,此节点绑定的事件也会删除掉
                //$(this).remove();


                //删除自己的节点,但是不删除自己绑定的事件
                $(this).detach();
                $(this).append()

            })

        })
    </script>

</body>
</html>

兄弟之间文档操作

   <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
    <ul>
        <li class="li1">今晚吃什么</li>
    </ul>
    <script>
        $(function () {
            //兄弟后面加上 兄弟元素  方法一
            $(".li1").after("<li class='noddle'>吃面条</li>")
            // 添加兄弟 方法二
            $("<li>不吃发</li>").insertAfter(".noddle")
            // 替换兄弟
            $(".li1").replaceWith("<li>吃肯德基</li>")

        })

    </script>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2018-10-06 21:36  团子emma  阅读(145)  评论(0)    收藏  举报