jQuery动画和遍历
一、动画
1. 动画
1. 三种方式显示和隐藏元素
1. 默认显示和隐藏方式
1. show([speed,[easing],[fn]])
1. 参数：
1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
* swing：动画执行时效果是 先慢，中间快，最后又慢
* linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。 2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn]) 2. 滑动显示和隐藏方式
1. slideDown([speed],[easing],[fn])
2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn]) 3. 淡入淡出显示和隐藏方式
1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed,[easing],[fn]]) ----------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script>
//隐藏div
function hideFn(){
/* $("#showDiv").hide("slow","swing",function(){
alert("隐藏了...")
});*/
/* //默认方式
$("#showDiv").hide(5000,"swing");
*/
/* //滑动方式
$("#showDiv").slideUp("slow"); */ //淡入淡出方式
$("#showDiv").fadeOut("slow");
} //显示div
function showFn(){
/*$("#showDiv").show("slow","swing",function(){
alert("显示了...")
});*/ /*
//默认方式
$("#showDiv").show(5000,"linear");
*/
/*
//滑动方式
$("#showDiv").slideDown("slow");
*/ //淡入淡出方式
$("#showDiv").fadeIn("slow");
} //切换显示和隐藏div
function toggleFn(){ /*
//默认方式
$("#showDiv").toggle("slow");
*/
/*
//滑动方式
$("#showDiv").slideToggle("slow");
*/ //淡入淡出方式
$("#showDiv").fadeToggle("slow");
} </script> </head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()"> <div id="showDiv" style="width:300px;height:300px;background:pink">
div显示和隐藏
</div>
</body>
</html>
二、遍历
1. js的遍历方式
* for(初始化值;循环结束条件;步长)
2. jq的遍历方式
1. jq对象.each(callback)
1. 语法：
jquery对象.each(function(index,element){});
* index:就是元素在集合中的索引
* element：就是集合中的每一个元素对象 * this：集合中的每一个元素对象
2. 回调函数返回值：
* true:如果当前function返回为false，则结束循环(break)。
* false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
2. $.each(object, [callback])
3. for..of: jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象) --------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* 遍历
1. js的遍历方式
* for(初始化值;循环结束条件;步长)
2. jq的遍历方式
1. jq对象.each(callback)
2. $.each(object, [callback])
3. for..of:jquery 3.0 版本之后提供的方式 */
$(function () {
//1.获取所有的ul下的li
var citys = $("#city li");
/* //2.遍历li
for (var i = 0; i < citys.length; i++) {
if("上海" == citys[i].innerHTML){
//break; 结束循环
//continue; //结束本次循环，继续下次循环
}
//获取内容
alert(i+":"+citys[i].innerHTML); }*/ /*
//2. jq对象.each(callback)
citys.each(function (index,element) {
//3.1 获取li对象 第一种方式 this
//alert(this.innerHTML);
//alert($(this).html());
//3.2 获取li对象 第二种方式 在回调函数中定义参数 index（索引） element（元素对象）
//alert(index+":"+element.innerHTML);
//alert(index+":"+$(element).html()); //判断如果是上海，则结束循环
if("上海" == $(element).html()){
//如果当前function返回为false，则结束循环(break)。
//如果返回为true，则结束本次循环，继续下次循环(continue)
return true;
}
alert(index+":"+$(element).html());
});*/
//3 $.each(object, [callback])
/* $.each(citys,function () {
alert($(this).html());
});*/ //4. for ... of:jquery 3.0 版本之后提供的方式 for(li of citys){
alert($(li).html());
} }); </script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
jQuery动画和遍历的更多相关文章
- python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- Jquery动画，排队与并发
一.事件绑定 1.鼠标事件:模拟触发 什么是模拟触发? 虽然没有点在按钮上,也可以触发按钮的事件处理函数. 如何:$元素.trigger("事件名") 即使没有点在指定的元素上,也 ...
- jQuery动画的实现
没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...
- 深入学习jQuery动画控制
× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...
- 深入学习jQuery动画队列
前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...
- jquery动画，基础以及我发现的新大陆
$.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...
- 让网站动起来！12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
- 原生js使用forEach()与jquery使用each遍历数组，return false 的区别
原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...
- jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下: <div class="module"> <div cla ...
随机推荐
- Java之路---Day18(List集合)
2019-11-05-23:03:28 List集合: java.util.List 接口继承自 Collection 接口,是单列集合的一个重要分支,习惯性地会将实现了List 接口的对象称为Lis ...
- Myeclipse中JSP镶嵌的html报错
Window > perferences > General > Editors > File Associations > 在File types 中选择 *.jsp ...
- CSS揭秘-半透明边框与多重边框
场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为 解决方案: 使用backgroun ...
- 英文finaunce金融
金融 1.指货币的发行.流通和回笼,贷款的发放和收回,存款的存入和提取,汇兑的往来等经济活动. 胡适<国际的中国>:“我们更想想这几年国内的资产阶级,为了贪图高利债的利益,拚命的借债给中国 ...
- CDA数据分析实务【第一章：营销决策分析概述】
一.营销概述 营销是关于企业如何发现.创造和交付价值以满足一定目标市场的需求,同时获取利润的学科.营销学用来辨识未被满足的需求,定义,度量目标市场的规模和利润潜力,找到最合适企业进入的细分市场和适合该 ...
- 【优化】COUNT(1)、COUNT(*)、COUNT(常量)、COUNT(主键)、COUNT(ROWID)、COUNT(非空列)、COUNT(允许为空列)、COUNT(DISTINCT 列名)
[优化]COUNT(1).COUNT(*).COUNT(常量).COUNT(主键).COUNT(ROWID).COUNT(非空列).COUNT(允许为空列).COUNT(DISTINCT 列名) 1. ...
- Redis支持的数据类型
String字符串: 格式: set key value string类型是二进制安全的.意思是redis的string可以包含任何数据.比如jpg图片或者序列化的对象 . string类型是Redi ...
- C#控制多线程最大并行数量
- django项目中使用邮箱找回密码功能
本文使用qq邮箱,需要登录邮箱,在设置-账户里面开启SMTP服务,要记下授权码 前端html {#找回密码的表单#} <form action="" method=" ...
- 这是一份非常适合收藏的Android进阶/面试重难点整理
写在前面 记得我大二时“不务正业”地自学Android并跟了老师做项目,到大三开始在目前的公司实习,至今毕业已有几年多,学习Android已经6.7年多了!但总感觉知识点很零散,并且不够深入,遇到瓶颈 ...