jQuery基本理解2

最新推荐文章于 2024-08-08 19:50:45 发布

cocoljh

最新推荐文章于 2024-08-08 19:50:45 发布

阅读量101

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/qq_44872481/article/details/91482348

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQueryDOM操作

常用的DOM操作方法：
before （） insertBefore（）after（）inserAfter（）；
append（）appendTo（）prepend（）prependTo（）；
replaceAll（）replaceWith （）；
empty（）清空选定元素的所有子元素；
注意：
remove（）删除选定元素，返回删除的元素，但是不会保留元素身上绑定的事件；
detach（）删除选定元素，返回删除的元素，返回的元素任然保留有先前绑定的事件；
clone（）复制选定元素，返回复制的元素，返回的元素不保留绑定的事件；clone（true）深度克隆返回的元素会保留绑定的事件；
例：

<ul>
        <li class="one">1</li>
        <li class="two">2</li>
    </ul>
    <button class="add">add</button>
    <button class="clone">clone</button>
    <button class="clone1">clone1</button>
    <button class="append">append</button>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        var remove = $('.one').click(function(){
            $(this).remove();
        })
        var detach = $('.two').click(function(){
            $(this).detach();
        })
        $('.add').click(function(){
            // $('ul').append(remove).append(detach);
            $('ul').append(function(){
                return $(remove).add(detach);
            })
        })
        //下面clone的元素在点击事件后插入后，再次执行点击事件后不会再多插入一个，但是点击事件是执行了 只是不会多插入一个，li元素然仍是3个
        //append（）插入元素要是是同一个jQuery对象，不会再多次插入
        var clone = $('.two').clone();
        $('.clone').click(function(){
            $('ul').append(clone);
        })
        //此方法可以不断的插入
        var clone1  = '<li>2</li>';
        $('.clone1').click(function(){
            $('ul').append(clone1);
        })
        //下例append（）插入，会把第一个li.one加到li.two的后面，但是还是2个li
        var one = $('.one');
        $('.append').click(function(){
            $('ul').append(one);
        })
    </script>

DOM结构操作

wrap（）wrapAll（） wrapInner（） unwrap（）
wrap（）选定的元素每一个都包裹；
wrapAll（）选定元素放置在一起外面包裹一层；可能破坏DOM结构，以第一个选择的元素为主；
unwrap（）逐层取消包裹的父元素，可以链式调用，并返回选定的元素直到body（不可删除）；例：$(‘li’).unwrap().unwrap();

jQuery事件

mousedown（e）事件中e.which可以判断鼠标按下的是哪个键：e.which的值有3个 1：左键 2：滚轮键 3：右键；
$(document).contextmenu （function（e）{ return false } ）;可以取消浏览器右键菜单；

mouseenter（）mouseleave（）事件不会冒泡，从父元素进入子元素不会认为离开父元素；

mouseover（）mouseout（）事件会冒泡，而且从父元素进入子元素，会认为是离开父元素；但是事件冒泡后，又会触发mouseover（）事件；
例：

<div class="wrapper">
        <div class="content"></div>
    </div>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        $('.wrapper').mouseenter(function(){
            console.log("enter-wrapper");
        }).mouseleave(function(){
            console.log('leave-wrapper');
        })
        $('.content').mouseenter(function(){
            console.log('enter-content');
        }).mouseleave(function(){
            console.log('leave-content');
        })
        // $('.wrapper').mouseover(function(){
        //     console.log('over-wrapper');
        // }).mouseout(function(){
        //     console.log('out-wrapper');
        // })
        // $('.content').mouseover(function(){
        //     console.log('over-content');
        // }).mouseout(function(){
        //     console.log('out-content');
        // })
    </script>

mouseenter && mouseleave
例：

<div class="wrapper">
        <div class="content"></div>
    </div>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        // $('.wrapper').mouseenter(function(){
        //     console.log("enter-wrapper");
        // }).mouseleave(function(){
        //     console.log('leave-wrapper');
        // })
        // $('.content').mouseenter(function(){
        //     console.log('enter-content');
        // }).mouseleave(function(){
        //     console.log('leave-content');
        // })
        $('.wrapper').mouseover(function(){
            console.log('over-wrapper');
        }).mouseout(function(){
            console.log('out-wrapper');
        })
        $('.content').mouseover(function(){
            console.log('over-content');
        }).mouseout(function(){
            console.log('out-content');
        })
    </script>

mouseover && mouseout
mousedown（）mousemove（）mouseup（）：
mousemove（）事件一般绑定在body或document上防止鼠标移动过快脱离绑定元素；

<p>你很棒</p>
    <div class="wrapper">
        <div class="content"></div>
    </div>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        $('.content').mousedown(function(e){
            var dis = {};
            var offset = $(this).offset();
            dis.x = e.clientX - offset.left;
            dis.y = e.clientY - offset.top;
            var _this = this;
            console.log('a');
            $(document).mousemove(function(e){//document是对象不能加引号做字符串传入
                $(_this).css({
                    left: e.clientX - dis.x,
                    top: e.clientY - dis.y
                })
                console.log('b');
            }).mouseup(function(){
                $(this).off('mousemove mouseup');
                console.log('c');
            })
            return false;//mousedown事件防止拖动过快；出现禁止拖动文字的现象
        })
    </script>

jQuery事件高级使用及事件委托

on（‘事件’，‘selector’，传入的值，事件执行函数）；on（）方法可以实现事件委托；
off（）解除选定元素的指定事件；
one（）事件只执行一遍；
trigger（）可以自动触发事件不需要事件的实际执行如点击事件：例：$(‘button’).trigger(‘click’)可以不用点击而自动触发；
off（）取消事件；可以取消同一个事件执行的多个效果，其中选定的效果；

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <button class="add">add</button>
    <button class="trigger">trigger</button>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        // $('li').click(function(){
        //     console.log($(this).text());
        // })
        // $('li').on('click', function(){
        //     console.log($(this).text());
        // })
        // $('.add').on('click',function(){
        //     $('ul').append('<li>'+($('li').length+1)+'</li>')
        // })//后添加的li没有绑定事件  js解析完了才添加li所以不能绑定事件 可以采用事件委托的形式为后添加的li绑定事件
        // on()方法可传入选择事件委托的元素
        $('ul').on('click','li', {name: 'ljh'} ,function(e){
            console.log($(this).text());
            console.log(e.data);//e.data包含传入的{name: 'lih'}对象；
        })
        $('.add').on('click',  function(e,a,b){
            $('ul').append('<li>'+($('li').length+1)+'</li>')
            console.log('222')
            console.log(a,b);//trigger传入的参数 a 数组第一位 b 数组第二位

        })
        function fun(){
            $('ul').append('<li>'+($('li').length+1)+'</li>')
            console.log('333')
        }
        $('.add').on('click', fun );
        $('.add').off('click', fun);//解除button的点击事件 可以解除多个事件
                                //如果一个事件绑定了多个函数可以单独解除一个；但是不能把函数复制过来，应该拿到同一个函数的索引；同一个内存地址；
                                //但要为某个不在html结构中的（后面动态创建的html插入的结构）绑定事件时，要用事件委托，不然绑定的事件无效；
        $('li:eq(3)').on('none',function(){//自定义的事件
            $(this).css('display','none');
        })
        $('.trigger').on('click',function(){
            $('.add').trigger('click',['aa','bb']);//点击trigger自动执行add按键的点击事件，trigger（）方法还可以传入参数，数组；
            //trigger 可以触发指定的事件  可以事件先定义号，想触发哪一个就触发哪一个；
            $('li:eq(3)').trigger('none');//执行自定义的事件
        })
    </script>