jQuery排序和动画
2021-01-02 本文已影响0人
amanohina
jQuery排序
eq()方法
- jQuery中获得的对象，内部包含选择的一组原生JS对象，在jQuery对象中会进行一个大的排序，这个排序与原来的HTML结构没有关系
- eq()方法在jQuery对象中通过下标获取某个对象，下标是jQuery对象中的大的排序的下标
将选中的jQuery对象进行一个大的排序，从0开始排序
index()方法
- jQuery对象调用index()方法，得到的是它自己在HTML结构中的兄弟中的下标位置，与jQuery大排序没有关系
- 它依赖于自身元素在父级中同级元素之间的位置
<script>
// 选择所有的 p 标签元素
var $ps = $("p");
// index() 方法获取下标时，排序跟新生成的 jQuery 对象无关
// 它依赖于自身元素在父级中同级元素之间的位置
// 添加点击事件
$ps.click(function () {
// 点击输出自己的 index() 的值
console.log($(this).index())
})
</script>
排他思想，简易tab栏
案例：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.tab {
width: 310px;
height: 190px;
border-top: 2px solid #206f96;
margin: 100px;
float: left;
}
.tab .title {
width: 309px;
height: 30px;
border-left: 1px solid #cfcfcf;
overflow: hidden;
}
.tab .title span {
float: left;
width: 102px;
height: 29px;
border-right: 1px solid #cfcfcf;
border-bottom: 1px solid #cfcfcf;
background-color: #f5f5f5;
font: 14px/29px "SimSun";
text-align: center;
}
.tab .title span.current {
height: 30px;
background-color: #fff;
}
.tab .title span a {
color: #252525;
text-decoration: none;
}
.tab .detail {
height: 143px;
padding: 17px 0 0 9px;
font: 14px/27px "SimSun";
}
.tab .detail ul {
display: none;
}
.tab .detail ul.current {
display: block;
}
.tab .detail ul li a {
color: #252525;
text-decoration: none;
}
.tab .detail ul li.first {
font-weight: bold;
}
</style>
</head>
<body>
<div class="tab">
<div class="title">
<span class="current"><a href="#">新闻</a></span>
<span><a href="#">图片</a></span>
<span><a href="#">军事</a> <a href="#">航空</a></span>
</div>
<div class="detail">
<ul class="current">
<li class="first"><a href="#">习近平离京访问捷克并出席核安全峰会</a></li>
<li><a href="#">习近平在捷克发文 热议 出访专题 这三年</a></li>
<li><a href="#">李克强:亚洲国家较含蓄 更需开放交流 在博鳌</a></li>
<li><a href="#">张德江会客 江泽民为《世界名曲45首》作序</a></li>
<li><a href="#">酒店枕头下现近万现金 房客怒投诉:没换枕套</a></li>
</ul>
<ul>
<li class="first"><a href="#">2习近平离京访问捷克并出席核安全峰会</a></li>
<li><a href="#">习近平在捷克发文 热议 出访专题 这三年</a></li>
<li><a href="#">李克强:亚洲国家较含蓄 更需开放交流 在博鳌</a></li>
<li><a href="#">张德江会客 江泽民为《世界名曲45首》作序</a></li>
<li><a href="#">酒店枕头下现近万现金 房客怒投诉:没换枕套</a></li>
</ul>
<ul>
<li class="first"><a href="#">3习近平离京访问捷克并出席核安全峰会</a></li>
<li><a href="#">习近平在捷克发文 热议 出访专题 这三年</a></li>
<li><a href="#">李克强:亚洲国家较含蓄 更需开放交流 在博鳌</a></li>
<li><a href="#">张德江会客 江泽民为《世界名曲45首》作序</a></li>
<li><a href="#">酒店枕头下现近万现金 房客怒投诉:没换枕套</a></li>
</ul>
</div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 获取所有的 span
var $span = $(".tab .title span");
// 添加鼠标移上事件
$span.mouseenter(function () {
// 利用变量存储 this 的下标
var idx = $(this).index();
// 自己级别的排他
$(this).addClass("current").siblings().removeClass("current");
// 对应级别的排他
$(".tab .detail ul").eq(idx).addClass("current").siblings().removeClass("current");
})
</script>
</body>
</html>
1.使用选择器选中所有的span标签。2.给所有的span标签添加mouseenter鼠标移上事件。3.记录index()方法得到的下标，对应this的下标。4.使用addClass与removeClass切换选中类名。5.对应的ul下标与this一致，使用eq(index)进行选中，同理切换选中类名
- 以上方式在一个tab栏效果中没有问题
- 在一个网页中，可能会出现多个相同结构的tab栏结构，只有第一个tab栏中的列表项会进行切换
- 解决方法：span和ul的查找全部采用链式调用，通过节点关系进行查找
<script>
// 获取所有的 span
var $span = $(".tab .title span");
// 添加鼠标移上事件
$span.mouseenter(function () {
// 利用变量存储 this 的下标
var idx = $(this).index();
console.log(idx);
// 自己级别的排他
// 查找所有对应 ul 时候，不要单独选择所有 ul，要通过当前的 this 的节点关系查找
// 链式调用方式，找到自己父级中的兄弟中的所有子级 ul
$(this).addClass("current")
.siblings().removeClass("current")
.parent().siblings().children().eq(idx).addClass("current")
.siblings().removeClass("current");
})
</script>
each()遍历
- 参数是一个函数
- 作用：就是对jQuery对象中的元素每一个都执行函数内部的操作
- each方法的基本原理就是for循环，从对象的下标为0的项一直遍历到最后一项，然后对每一项进行操作
优点1：
- each的函数内部，也有一个this，指向的是进来遍历的每一次的元素
- 案例：让每一个div内部的第二个元素变红
<body>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 选择所有的 box 元素
var $box = $(".box");
// 给每个 box 内部的第二个 p 添加红色
// $box.children().eq(1).css("background","red");
// each() 遍历
// 将 jQuery 对象中的每一项单独拿出来进行操作
$box.each(function () {
// this 关键字，指向的是每一次遍历的元素对象
// 就可以针对每一个元素进行单独操作
$(this).children().eq(1).css("background","red");
});
</script>
</body>
优点2：
- each函数可以传一个参数i，i表示的是这一次的遍历对象在整体的jQuery对象大排队中的下标位置
案例：制作表格隔列变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
}
td {
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<!-- 七行七列的table表单 -->
<table></table>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 选中偶数的列，变色
// 但是列数如果是奇数的话就会出现棋盘类分布的问题
// $("td:even").css("background","skyblue")
// 可以将每一行作为单独操作单位，让每一行中的列进行隔列变色
// 我们一提到对某个元素内部或内部的子元素进行一些操作，首先想到 each 方法
// var $tr = $("tr");
// $tr.each(function () {
// // 让子级所有的列隔列变色
// $(this).children(":odd").css("background","skyblue")
// })
// 方法2
$("td").each(function () {
// 可以判断 当前这个 td 在父级中所处的位置
// index()
if ($(this).index() % 2 === 0) {
$(this).css("background","skyblue")
}
})
</script>
</body>
</html>
jQuery的入口函数
- jQuery中的入口函数
- 语法1：
$(document).ready(function(){
//获取元素
}) - 语法2：
$(function(){
//获取元素
});
onload事件，等待所有的页面中的资源（DOM树，图片，视频，音频等等外部资源）都加载完毕才能执行
JQ的入口函数只需要等到DOM树加载成功就会立即执行
<script>
// onload 事件在加载时，指的是页面中多有的资源【DOM树、音频、视频、图片等】加载完毕后，才能触发
// 一个页面中只能出现一次
window.onload = function () {
console.log(1);
var btn = document.getElementsByTagName("input")[0];
console.log(btn);
};
// jQuery 中的入口函数
// 仅仅需要等待页面中的 DOM 树加载完毕就可以执行了
$(document).ready(function () {
console.log(2);
var btn = document.getElementsByTagName("input")[0];
console.log(btn);
})
// 简化
// 在一个页面中，可以书写多个 jQuery 的入口函数，执行顺序按照前后加载顺序执行
$(function () {
console.log(3);
var btn = document.getElementsByTagName("input")[0];
console.log(btn);
})
// $(function () {
// })
</script>
</head>
<body>
<input type="button" value="按钮">
</body>
jQuery切换效果方法
hide()和show()方法
- hide()：元素隐藏，隐藏的前提必须是元素 display:block；
- show()：元素显示，显示的前提必须是元素 display:none;
- toggle()：在元素隐藏和显示之间进行切换。
- 这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画。
参数
-
如果不传入参数，就是直接显示或者隐藏，没有过渡动画
-
如果传递参数：
1.单词格式：“slow”，“normal”，“fast”
2.数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画 -
过渡时间内，伴随着宽度和高度以及透明度的变化
// 添加点击事件，让图片实现显示和隐藏
$btn1.click(function () {
// $pic.hide("slow");
$pic.hide(1000);
})
$btn2.click(function () {
// $pic.show("normal");
$pic.show("fast");
})
$btn3.click(function () {
$pic.toggle("fast");
})
slideDown()和slideUp()方法
- slideDown()：滑动显示(方向不一定)
- slideUp()：滑动隐藏
- slideToggle()：滑动切换
- 让元素在display属性的block和none之间进行切换
参数
- 不传参数的话：默认的过渡时间默认为400ms
- 如果传递参数：
1.单词格式：“slow”，“normal”，“fast”
2.数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画
// 添加点击事件，让图片实现滑动显示和隐藏
$btn1.click(function () {
$pic.slideUp(1000)
})
$btn2.click(function () {
$pic.slideDown(1000)
})
$btn3.click(function () {
$pic.slideToggle(1000)
})
注意：
- 如果滑动的元素没有设置宽高，没有滑动效果。
- 如果元素设置了高度和宽度，会进行上下垂直方向的滑动。
- 动画的效果：高度属性在 0 到设置值之间的变化，没有透明度动画。
- 如果元素设置了定位，偏移量方向如果是 bottom 参与了，滑动方向会发生变化
fadeIn()和fadeOut()方法
- fadeIn()：淡入，透明度逐渐增大最终显示
- fadeOut()：淡出，透明度逐渐降低最终隐藏
- fadeToggle()：切换效果
- fadeTo()：淡入或者淡出到某个指定的透明度
- 动画效果：执行的是透明度动画，也是在display属性的block和none之间切换
参数
- 如果不传参数，默认的过渡时间是400ms
- 如果传递参数
1.单词格式：“slow”，“normal”，“fast”
2.数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画，fadeTo的第二个参数是规定的淡入淡出程度
// 添加点击事件，让图片实现淡入显示和淡出隐藏
$btn1.click(function () {
$pic.fadeOut("slow")
})
$btn2.click(function () {
$pic.fadeIn(1000)
})
$btn3.click(function () {
$pic.fadeToggle()
})
$btn4.click(function () {
$pic.fadeTo(500,0.5)
})
animate()动画方法
- 作用：执行 CSS 属性集的自定义动画。
- 语法：$(selector).animate(styles,speed,easing,callback)
- 参数1： css 的属性名和运动结束位置的属性值的集合。
- 参数2：可选，规定动画的速度，默认是 "normal"。其他值，“slow”、“normal”、 “fast”，数字格式，单位为毫秒。
- 参数3：可选，规定在不同的动画点中设置动画速度的 easing 函数，值包含 swing 和 linear。
- 参数4：可选，animate 函数执行完之后，要执行的函数。
- 注意：其他的运动方法比如 slideUp() 等，也有参数3 和参数4.
<script>
// 获取元素
var $ps = $("p");
// 习惯会将运动时间存储到一个变量中
var during = 2000;
// 添加点击事件，让元素运动
$ps.click(function () {
// 让自己的 left 的值变为 500
// 使用 animate() 方法
// 参数1： 运动的 css 的属性集，对象格式
// 参数2： 运动时间，单词格式，数字格式
// 参数3： 运动速度，可选 swing 和 linear
// 参数4： 回调函数，在运动结束之后立即执行
$(this).animate({"left": 500},during,"swing",function () {
// 在运动结束后，让元素变红色
$(this).css("background","red")
})
// 所有有数值的属性都可以运动
$(this).animate({"width": 500})
$(this).animate({"opacity": 0.5})
// $(this).animate({"background": "#000"})
})
</script>
动画排队
①同一个元素对象身上，如果定义了多个动画，动画会排队等待执行。
②如果是不同的元素对象都有动画，不会出现排队机制。
③如果是的其他非运动的代码，也不会等待运动完成。
④之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队。
- 同一个元素身上的运动，可以简化成链式调用的方法
动画延迟
- delay：延迟的意思。
- 将 delay() 设置在某个运动方法之前，表示后面的运动要在规定的时间之后再执行，有延迟运动的效果。
- 参数：时间的数值，表示延迟的时间。
- 除了 animate 方法之外，其他的运动方法也有延迟效果。
// 延迟
$box1.animate({"left": 500},during);
$box2.delay(2000).animate({"left": 500},during);
stop()方法
- stop() 作用：设置元素对象身上的排队的动画以何种方式进行停止。
- 有两个参数，都是布尔值。
- 参数1：设置是否清空后面的动画排队，如果是 true 表示清空，如果是 false 表示不清空只停止当前的一个动画。
- 参数2：设置当前动画是否立即完成，如果是 true 表示立即完成，对象会立刻走到结束位置，如果是 false 表示不完成当前动画，立即停止在当前位置。
- 默认情况下，两个参数值默认值为 false。
- 根据两个参数的值，可以得到四种停止方式。
// 添加按钮点击事件
// 清空动画，走到结尾
$("#btn1").click(function () {
$box1.stop(true,true)
})
// 清空动画，停在当前
$("#btn2").click(function () {
$box1.stop(true,false)
})
// 不清空后面的动画，当前运动立即走到结尾
$("#btn3").click(function () {
$box1.stop(false,true)
})
// 不清空后面的动画，当前运动立即停止在当前位置
$("#btn4").click(function () {
$box1.stop(false,false)
})
// 在实际工作中，一般要求会清空后面的动画，当前动画要停止在当前的位置
// 更多时候使用 stop(true)
实际工作中，一般要求清空后面的排队，停止在当前位置，多使用 stop(true),第二个参数不设置默认为 false。
清空动画排队
动画排队问题：
- 如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加多个动画，会进行动画排队
- 需要去清除排队的动画，进行防骚扰操作
方法1
- 利用stop()方法
- 在每一个运动函数之前都增加一个stop(true)，表示在运动执行之前，会将前面排队的动画清空，然后停在当前位置
// 将运动设置给事件，事件多次触发会积累动画出现动画排队
// 清除动画排队方法1： 在每一次新的运动开始之前，去停止之前所有的动画排队
$box1.mouseenter(function () {
$(this).children().stop(true).slideUp(during)
})
$box1.mouseleave(function () {
$(this).children().stop(true).slideDown(during)
})
方法2
- 利用函数节流方法，如果元素在运动，直接return，不要执行后面的运动代码
- 每个jQuery对象，都能调用一个is()方法，作用是显示元素对象的某种状态
- 如果参数位置是is（":animated")，返回值是布尔值，true表示正在运动，false表示没有运动
// 清空动画排队方法2：使用函数节流方式
$box1.mouseenter(function () {
// 判断元素自己是否在运动中，如果是，那么直接返回不要往下添加新的运动
if ($(this).children().is(":animated")) {
return;
}
// 如果走到这里，说明元素没有在运动，就可以添加新运动
$(this).children().stop(true).slideUp(during)
})
$box1.mouseleave(function () {
// 判断元素自己是否在运动中，如果是，那么直接返回不要往下添加新的运动
if ($(this).children().is(":animated")) {
return;
}
$(this).children().stop(true).slideDown(during)
})
综合实例
欢迎下载
