jquery基础笔记(2)

一.关于事件

e.preventDefault();阻止默认事件e.stopPropagation();阻止冒泡事件return false;即阻止默认事件又阻止冒泡事件;.blur(function(){}):失去焦点事件;.val():类比js的value,获取value值;.each(index,elem):类比js的forEach(),用于遍历jquery对象;.end():回退操作;例如:$('li').eq(0).class({color:'red'}).end().eq(5).class({color:'red'});当.end()后回退到$(‘li’);

二.

.offset().left/top:相对于文档的left/top;.position().left/top:相对于距离最近的带有定位的父元素;.parent():距离最近的一个直接父元素;.offsetParent():n距离最近的带有定位的父元素;.parents():找出所有的父元素;若:.parents(‘div’):筛选出标签为div的所有父元素标签;.closest():必须传参;作用:筛选出离的最近的指定参数的父元素标签;.siblings():当前元素节点的所有兄弟节点;.prevAll():当前元素上面的所有兄弟节点;.nextAll():当前元素下面的所有兄弟节点;.prevUntil()/nextUntil()->掐头去尾选中间,括号里的参数传jquery对象或dom.clone():让不传参数的时候只克隆节点,但是当传参数true时事件也被克隆;$('li').wrap('<div>'):循环每个li在外面包裹上div标签;$('li').wrapInner('<div>'):循环每个li在里面包裹上div标签;$('li').wrapAll('<div>'):将所有的li在包裹在div标签里面;因此可能破坏结构,因为并不是所有的li都连续挨在一起的,用了.wrapAll()后会将li拼凑在一起;$('li:eq(0)').unwrap():接触包裹,删除其包裹的元素,但像html,body,这样的包裹元素是不会被删除的;A.add(B):选中A和B集中操作;例如:$('li:eq(0)').add($('li:eq(4)')).css({width:'100px',height:'100px',background:'orange'});A.empty():清空A里所有的元素;.slice(a,b):截取a到b包括a不包括b;.html():相当于innerHtml;.text():相当于innerText;$(‘form’).serialize():串联表单数据;因为表单有一个默认事件,就是在每次提交表单的时候回重新加载页面,因此为了避免这种情况的发生,用e.preventDefault()取消默认事件,但同时也取消了传数据的作用,这里需要ajax的知识了,在使用ajax传数据之前,我们需要对其要传的内容进行拼接,如username=…&age=…;此刻就使用到serialize方法;也可以使用serializeArray将数据串联成数组。

三.动画

.animate():参数:

 1. target,例如:{left:300,height:300,width:300};
 2. durition,持续的时间
 3. 速度变化的方式(swing(默认):先快后慢;linear:匀速运动;更多动画效果要先下载jquery.easing.js文件并引入才可以使用)
 4. 回调函数

coding-jquery基础笔记(2)-

.delay():动画延迟

.stop():参数:

参数一:是否停止后续所有运动。 false:不停止继续运动,true:停止后续所有运动;

参数二:是否立即到达当前目标点。false:不到达,true:到达;

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stop()参数检测</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .div1{
            height:100px;
            width:100px;
            position:absolute;
            background-color:aquamarine;
        }
        .div2{
            height:100px;
            width:100px;
            left:300px;
            top:0;
            position:absolute;
            background-color:yellowgreen;
        }
        .div3{
            height:100px;
            width:100px;
            position:absolute;
            left:300px;
            top:300px;
            background-color:skyblue;
        }
    </style>
</head>
<body>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div1">1</div>
    <script src="jquery-3.5.1的副本.js"></script>
    <script src="jquery.easing.1.3的副本.js"></script>
    <script>
        $('.div1').animate({left:300},3000,'easeInOutBounce').animate({left:300,top:300},3000,'linear');
        $(document).click(function(){
            
             //$('.div1').stop();//不到达当前目标点进行后序运动
             //$('.div1').stop(true);//不到达当前目标点不进行后序运动
             //$('.div1').stop(false,false);//不到达当前目标点进行后序运动
             //$('.div1').stop(true,true);//到达目标点停止后序运动
             //$('.div1').stop(true,false);//不到达当前目标点不进行后序运动
             $('.div1').stop(false,true);//到达当前目标点进行后序运动

        })
        

    </script>
</body>
</html>

slideToggle(speed,callback):通过使用滑动效果(高度变化)来切换元素的可见状态。如果被选元素是可见的,则隐藏这些元素,如果被选元素时隐藏的,则显示这些元素;slideUp(speed,callback):如果被选元素是可见的,则通过使用滑动效果隐藏这些元素;slideDown(speed,callback):通过使用滑动效果显示隐藏的元素;toggleClass(‘active’):对设置或移除被选元素的一个或多个类进行切换。检查每个元素中指定的类,如果不存在则添加类,如已设置则删除。trigger();可以触发自定义事件,例如:trigger(‘eat’,data);$(‘li’).on(‘eat’,function(e,data){});data:数组;trigger可以触发自定义事件eat;触发事件是会事件冒泡,即触发li会冒泡到ul;

匿名

发表评论

匿名网友