jQuery 文档增删改、事件/绑定和解绑、事件相关（第五天）

文档的增删改

添加元素

1. 添加/替换元素
   append(content)
2. 向当前内容的最后插入指定内容
   prepend(content)
3. 向当前匹配的所有元素的最前面插入指定的内容
   before(content)
4. 将指定内容插入到当前所有匹配元素的前面
   after(content)
5. 将指定内容替换所有匹配的标签
   replaceWith(content)
   删除元素
6. 删除所有匹配元素的子元素
   empty()
7. 删除所有匹配元素
   remove()

 <ul id="ul1">
        <li>AAAAA</li>

        <li title="hello">BBBBB</li>
        <li class="box">CCCCC</li>

        <li title="hello">DDDDDD</li>
        <li title="two">EEEEE</li>
        <li>FFFFF</li>
    </ul>
    <br>
    <br>
    <ul id="ul2">
        <li>aaa</li>
        <li title="hello">bbb</li>
        <li class="box">ccc</li>
        <li title="hello">ddd</li>
        <li title="two">eee</li>
    </ul>

  <script>
        $(function () {
            //1.向id为ul1的ul下添加一个span（最后）
            $('#ul1').append('<span>append()添加的span标签</span>');
            $('<span>appendTo添加的span</span>').appendTo('#ul1');
            //2.向id为ul1的ul下添加一个span(最前)
            $('#ul1').prepend('<span>prepend添加的span标签</span>');
            $('<span>prependTo()添加的span标签</span>').prependTo('#ul1');
            //3.在id位ul1的ul下的li(title位hello)的前面添加span
            $('#ul1>li[title=hello]').before('<span>before()添加的span</span>');
            //4.在id为ul1的ul下的li（title为hello）的后面添加span
            $('#ul1>li[title=hello]').after('<span>after添加的span</span>');
            //5.将在id为ul2的ul下的li(title=hello)全部替换为span
            $('#ul2>li[title=hello]').replaceWith('<p>replaceWith()替换的p</p>');
            //6.移除id为ul2下的所有li
            $('#ul2').empty();
        });
    </script>
    

事件的绑定

1. 事件的绑定（两种方式）
   eventName(function(){});
   绑定对应事件名的监听，例如：KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲div').click(fun…(’#div).on(‘click’，function(){});
   优缺点：
   eventName:编码方便，但是只能加一个监听，且有的事件监听不支持
   on:编码不方便，但是可以添加多个监听，且更加通用

下面的回调函数我使用的是ES6的写法，也可以使用ES5的回调函数写法替换掉ES6的回调函数，效果一样

 <div class="out">
        外部DIV
        <div class="inner">内部div</div>
    </div>

    <div class='divBtn'>
        <button id="btn1">取消绑定所有事件</button>
        <button id="btn2">取消绑定mouseover事件</button>
        <button id="btn3">测试事件坐标</button>

  $(function () {
            // 需求：
            //    1. 给.out绑定点击监听(用两种方法绑定)
            $('.out').click(() => {
                console.log('out click1');
            })
            $('.out').on('click', () => {
                console.log('out click12');
            })
            //    2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
            $('.inner').mouseenter(() => {
                console.log('进入...');
            }).mouseleave(() => {
                console.log('离开...');
            })
            $('inner').on('mouseenter', function () {
                console.log('进入');
            }).on('mouseleave', function () {
                console.log('离开...');
            })

            $('.inner').hover(() => {
                console.log('进入')
            }, () => {
                console.log('离开');
            })
           });

解除绑定(off(eventName))

 //    3. 点击btn1解除.inner上的所有事件监听
            $('#btn1').click(() => {
                $('inner').off();
            })

事件坐标

event.clientX,event.ClientY 相对于视口的左上角
event.pageX,event.pageY 相对于页面的左上角
event.offsetX,event.offsetY 相对于事件元素的左上角

 //    4. 点击btn2解除.inner上的mouseover事件
            $('#btn2').click(() => {
                $('.inner').off('mouseoff');
            })
            $('#btn3').click(function (event) {
                console.log('click inner');
                //停止事件冒泡
                event.stopPropagation();
            })
            //    5. 点击btn3得到事件坐标
            $('#btn3').click((event) => {
                // 
                console.log(event.offsetX, event.offsetY);
                // 相对于页面左上角
                console.log(event.clientX, event.clientY);
                //
                console.log(event.pageX, event.pageY);
            })

事件的相关处理

停止事件冒泡：event.stopPropagation()
阻止事件默认行为：event.preventDefault()

 $('.inner').click((event) => {
                console.log('click inner');
                //停止事件冒泡
                event.stopPropagation();
            })
            //    7. 点击链接, 如果当前时间是偶数不跳转
            $('#test4').click((event) => {
                var time = Date.now(event);
                alert(time);
                if (time % 2 === 0) {
                    //阻止事件的默认行为
                    event.preventDefault();
                }
            })