49 jQuery 文档操作

主要内容:

1  append操作      : 添加到指定元素的后面     

　prepend操作  : 添加到指定元素内部的前面

　　1 )语法 : $(A).append(B)            //  把b追加到a的内部

　　　　　　$(A).appendTo(B)         //  把a追加到b的内部

var liele = document.createElement('li');
liele.innerText = '444';
$('[type="none"]')
$('[type="none"]').append(liele)

2  after操作     : 添加到指定元素外部的后面

    before操作  : 添加到指定元素外部的前面

　　1 )语法:   $(A).after(B)            //  把b放在a的后面

　　　　　　 $(A).afterTo(B)        //  把a放在b的后面

u3ele = document.createElement('ul');
u3ele.innerText = 'this 标签'
$('ul').before(u3ele)

3 替换操作　　:replaceWith/replaceAll

　　1)语法:   $(A).replaceWith(B)   // b替换a

aele = document.createElement('a');

$(aele).attr('href','http://www.sogo.com')   给dom对象设置属性, 需要把dom对象转换成jQuery对象

aele.innerText = 'sogo'

$('ul').replaceWith(aele)

4 克隆clone()

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="屠龙宝刀,点击就送">
<script>
    $("[type='button']").click(function () {
        //自己复制自己, 然后把复制的结果加入到我的后面
        $(this).clone(true).insertAfter(this);
        // 如果clone里面不加ture, 则复制的结果不能再次复制
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　注意参数true,加上true会把标签绑定的事件也复制
    })
    // $("[type='button']").clone().insertBefore()
</script>
</body>
</html>

5  移除和清空操作

$('.u1').empty()

$('#u1').prev().remove()

6  事件委托

　　1 ) 定义:    事件委托就是利用事件冒泡原理实现的！
　　2 ) 事件冒泡：就是事件从最深节点开始，然后逐步向上传播事件；
　　例：页面上有一个节点树，div > ul  > li  >  a
比如给最里面的a 加一个click 事件，那么事件就会一层一层的往外执行，执行顺序 a > li > ul > div,  有这样一个机制，当我们给最外层的div 添加点击事件，那么里面的ul ， li  ， a  做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托他们父集代为执行事件；
　　　　事件冒泡的例子:
<body>
    <div class="d1">
        <p class="p1">
            <span class="s1">div>span</span>
        </p>
    </div>
    <script>
        //  $('.d1').click(function () {
        //     console.log(alert(789))
        // });
        //  $('.p1').click(function () {
        //     console.log(alert(456))});
         $('.s1').click(function (e) {
            console.log(alert(123));
        //      e.stopPropagation()
        // //     阻止事件向上传递
        });
    </script>
</body>
</html>

　　3 ) 事件委托的例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <input type="button" class="b1" value="点我">

    <script>
        $('body').on('click','.b1',function () {
            console.log(alert(123))
        });
        buttonele = document.createElement('button');
        buttonele.innerText = '点我1';
        $(buttonele).addClass('b1');
        $('body').append(buttonele)

    //    由于先绑定事件, 后再添加jQuery, 当刷新页面的时候,点击点我1 是不会被绑定事件的.
        //由此引出事件冒泡: 当给最外层事件添加事件时, 点击最里面的事件都会冒泡到最外层事件, 所以都会触发, 这就是事件委托,委托他们父级代为执行
        //所以用到on
        // $('body').on('click','.b1',function () {
        //     console.log(alert(123))
        // });
    </script>
</body>
</html>

　　

 

 

 

 

　　

posted @ 2018-09-11 18:05  ...绿茵  阅读(117)  评论(0)    收藏  举报
1