jQuery基础笔记（2）

最新推荐文章于 2024-03-09 11:41:00 发布

自律并放纵者

最新推荐文章于 2024-03-09 11:41:00 发布

阅读量143

点赞数 1

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/qq_45689637/article/details/109509788

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.关于事件

e.preventDefault();阻止默认事件
e.stopPropagation();阻止冒泡事件
return false;即阻止默认事件又阻止冒泡事件；
.blur(function(){}):失去焦点事件；
.val():类比js的value，获取value值；
.each(function(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. 回调函数

速度变化的方式

.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;

自律并放纵者

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
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).c
复制链接

扫一扫