jquery/序号问题/动画

最新推荐文章于 2022-07-29 19:59:26 发布

冲呀web

最新推荐文章于 2022-07-29 19:59:26 发布

阅读量323

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_44698566/article/details/106341538

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一，序号问题

1.1 eq（）:选中元素不同，序号也不同
选中元素大队列的排名
⦁ 常用的方法
⦁ find
查找子元素，可以实现指定的过滤
执行代码：

1.	<script>
2.	// 获得box元素
3.	var $box = $('.box');
4.	// 在当前对象的子元素中进行查找，需要有过滤条件
5.	console.log($box.find('li'));
6.	</script>

结果：
在这里插入图片描述

1.2 index（）表示亲兄弟的排名，无视亲兄弟类型（只要是同一父节点）
index()的值非常稳定，无视选择器的选择index
获得当前元素在兄弟元素中的索引
结构：

1.	<div class="box">
2.	    <div class="item">0</div>
3.	    <div class="item">1</div>
4.	    <div class="item">2</div>
5.	    <div class="item">3</div>
6.	    <div class="item">4</div>
7.	    <div class="item">5</div>
8.	</div>
9.	<div class="box">
10.	    <div class="item">0</div>
11.	    <div class="item">1</div>
12.	    <div class="item">2</div>
13.	    <div class="item">3</div>
14.	    <div class="item">4</div>
15.	    <div class="item">5</div>
16.	</div>
17.	<div class="box">
18.	    <div class="item">0</div>
19.	    <div class="item">1</div>
20.	    <div class="item">2</div>
21.	    <div class="item">3</div>
22.	    <div class="item">4</div>
23.	    <div class="item">5</div>
24.	</div>
执行代码：
1.	/* 
2.	    eq:jquery在查找元素的时候，得到的是一个集合，想获得指定的元素 eq来获得，eq是相对于整体而言的
3.	*/
4.	// 获得所有的item元素
5.	var $item= $('.item');
6.	// console.log($item.eq(2));
7.	/* 
8.	    点击当前元素，下一行对应的元素背景变为蓝色
9.	    1、获得当前的索引值
10.	        index
11.	    2、找到当前元素的父元素，在找到父元素的下一个兄弟元素，找到该元素的所有子元素，使用eq找到指定的元素
12.	        $(this).parent().next().children().eq(index)
13.	    3、改变背景颜色
14.	        css('backgroundColor', 'blue')
15.	
16.	*/
17.	// 获得当前元素在所有的兄弟元素中的索引值
18.	$item.click(function() {
19.	    // console.log($(this).index());
20.	    $(this).parent().next().children().eq($(this).index()).css('backgroundColor', 'blue');
21.	});

结果：
在这里插入图片描述
⦁ 对应思想

找到当前元素的索引 index（）
找到对应元素的集合 $(dom)
在集合中使用 $(dom).eq(index（）) 找到对应的元素
执行代码：

1.	<script>
2.	// 获得所有的span对象
3.	var $span = $('#item1 span');
4.	// 获得所有的.con的div
5.	var $con = $('.con');
6.	// console.log($span);
7.	// 绑定鼠标移入事件
8.	$span.mouseenter(function() {
9.	    // 获得当前的索引
10.	    var index = $(this).index();
11.	    // 给当前元素添加class值为cur，其他的兄弟元素移除class属性值为cur
12.	    $(this).addClass('cur').siblings().removeClass('cur');
13.	    // 找到对应集合中对应的元素
14.	    // 该元素添加active属性值，其他的兄弟元素需要移除class中的属性值active
15.	    $con.eq(index).addClass('active').siblings().removeClass('active');
16.	
17.	});
18.	</script>

结果：

⦁ each（）遍历
注：each（）的参数是一个函数，函数中有一个对象i表示遍历到该对象的序号。

使用方式：
$(dom).each(function(index, value) {

this：指向当前遍历的对象
index：指向当前遍历对象的索引
value: 指向当前遍历的对象
注意：一般我们使用值的时候，使用this代替，不用使用两个参数来接受
});
结构：

1.	<div class="box">
2.	    <div class="item">0</div>
3.	    <div class="item">1</div>
4.	    <div class="item">2</div>
5.	    <div class="item">3</div>
6.	    <div class="item">4</div>
7.	    <div class="item">5</div>
8.	</div>
9.	<div class="box">
10.	    <div class="item">0</div>
11.	    <div class="item">1</div>
12.	    <div class="item">2</div>
13.	    <div class="item">3</div>
14.	    <div class="item">4</div>
15.	    <div class="item">5</div>
16.	</div>
17.	<div class="box">
18.	    <div class="item">0</div>
19.	    <div class="item">1</div>
20.	    <div class="item">2</div>
21.	    <div class="item">3</div>
22.	    <div class="item">4</div>
23.	    <div class="item">5</div>
24.	</div>
执行代码：
1.	// 获得所有的item的div
2.	var $item = $('.item');
3.	console.log($item);
4.	$item.each(function(index, value) {
5.	    // console.log($(this), arguments);
6.	    console.log(this, index, value);
7.	});

结果：
在这里插入图片描述

二、异步和回调函数

**异步语句：**类似于animate这种花费时间的语句，如果后面还有其他的js代码，这些代码也会同animate一起立即执行。
js是一个单线程语言
因为单线程意味着js在同一时间只能做同一件事情:缺点：一个事件所发费的时间比较长的时候，后面的事件等待时间过长
js中的异步语句
js将所有花费时间较长的东西，默认设置为一个异步语句
所有的动画都是异步语句
js可以在指定的时间内做更多的事情
如何控制执行顺序？
如何想在动画结束之后执行的代码，放入fn回调函数中
回调函数：
在一个函数的内部，调用其他函数就将被调用的函数称之为回调函数
2.1 animate
不是所有的css属性（background-color和background-posion）都支持动画的，数值型或者百分比的属性支持的。

使用方式：animate(obj, time, fn)
obj:动画运动终止的状态
time:过渡时间
fn:回调函数：触发条件动画执行解除，该回调函数触发
执行代码：

1.	$('div').animate({
2.	    left: 300,
3.	}, 2000, function() {
4.	    // console.log('动画结束');
5.	    $('div').css('backgroundColor', 'green');
6.	
7.	});

结果：
在这里插入图片描述
2.2 动画的执行顺序
一个元素有两个动画，该动画如何执行？依次执行
多个元素都拥有动画，则动画如何执行？同时执行
执行代码：

1.	/* 
2.	    相同的元素绑定多个动画：依次执行
3.	*/
4.	$('div').animate({
5.	    left: 300,
6.	}, 2000);
7.	
8.	$('div').animate({
9.	    width: 200
10.	}, 2000);
11.	
12.	/* 
13.	    不同的元素绑定动画如何执行:同时执行
14.	*/
15.	$('p').animate({
16.	    left: 300,
17.	    top: 200
18.	}, 2000);

结果：
在这里插入图片描述
2.3 delay
延迟执行
delay(time): time延迟时间
注意：delay只对动画有作用
delay做一个元素依次进场
执行代码：

1.	// 给div绑定一个动画
2.	// $('div').delay(2000).animate({left: 400}, 2000);
3.	// $('div').delay(2000).css('backgroundColor', 'red');
4.	$('div').each(function(i) {
5.	    // console.log(i);
6.	    $(this).delay(i * 1000).animate({left: 300}, 1000);
7.	});

结果：
在这里插入图片描述
2.4 stop
当多个动画绑定在同一个元素中的时候，出现了动画累积（动画队列）。程序在运行的时候，是不需要动画累积的。
防止动画产生累积：（防流氓）
1 当该元素正在执行动画的时候，其他动画直接拒绝
2 停止所有的动画(stop(true))，执行马上要添加的动画
stop(stopAll, gotoEnd)
stopAll：是否清除所有的动画默认值为false
gotoEnd: 是否可以到达当前动画的终点默认值为false

stop(true, true): 清空动画队列，完成当前动画（瞬移）
stop(true, false):清空动画队列，停止所有动画
stop(false, true):不清空动画队列，瞬间完成当前动画（当前动画瞬间完成，然后执行后续的动画）
stop(false, false):不清空动画队列，当前动画立即停止（立即停止当前动画，继续执行下一个动画）
执行代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 100px;
            position: relative;
            background-color: orange;
        }
        button {
            position: relative;
            top: 330px;  
        }
    </style>
       
</head>
<body>
    <div></div>
    <button>stop(true, true)</button>
    <button>stop(true, false)</button>
    <button>stop(false, true)</button>
    <button>stop(false, false)</button>
    <button>stop()</button>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script>
    /* 
        相同的元素绑定多个动画：依次执行
    */
    $('div').animate({
        left: 300
    }, 2000);
    $('div').animate({
        top: 300
    }, 2000);
    $('div').animate({
        left: 0
    }, 2000);
    $('div').animate({
        top: 0
    }, 2000);

    // 给btn绑定事件
    $('button').eq(0).click(function() {
        $('div').stop(true, true);
    });
    $('button').eq(1).click(function() {
        $('div').stop(true, false);
    });
    $('button').eq(2).click(function() {
        $('div').stop(false, true);
    });
    $('button').eq(3).click(function() {
        $('div').stop(false, false);
    });
    $('button').eq(4).click(function() {
        $('div').stop();
    });
    </script>
</body>
</html>

2.5 is
$(dom).is(’:animated’):判断dom元素是否处于动画当中，返回值为boolean。
正在执行动画：true
不在执行动画：false
执行代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 100px;
            position: relative;
            background-color: orange;
        }
        
    </style>
       
</head>
<body>
    <div></div>
    <button>添加动画</button>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script>
    var i = 1;
    $('button').click(function() {
        // console.log($('div').is(':animated'));
        if ($('div').is(':animated')) {
            // 该div正处于动画当中
            return;// return 后面的代码不执行
        }
        $('div').animate({left: 200 * i}, 2000);
        i++;
    });
    </script>
</body>
</html>

2.6 防止动画累积（防流氓）
1、当该元素正在执行动画的时候，其他动画直接拒绝 $(dom).is(’:animated’)
2、停止所有的动画，执行马上要添加的动画 stop(true)

冲呀web

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery/序号问题/动画

一，序号问题1.1 eq（）:选中元素不同，序号也不同⦁ 常用的方法⦁ find查找子元素，可以实现指定的过滤执行代码：1. <script>2. // 获得box元素3. var $box = $('.box');4. // 在当前对象的子元素中进行查找，需要有过滤条件5. console.log($box.find('li'));6. </script>结果：1.2 index（）表示亲兄弟的排名，无视亲兄弟类型（只要是同一父节点）index()
复制链接

扫一扫

专栏目录