jquery快速入门(二)
jQuery 效果
1.隐藏,显示
1.1显示 hide() 和隐藏 show()
语法:$(selector).hide(speed,callback);
$(selector).show(speed,callback);
例:<p>内容</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
可选的 speed 参数规定显示的速度和隐藏方式,可以取以下值:速度可以取"fast" 或毫秒,隐藏可以选择"slow"、"linear" 等。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
例:<div>隐藏及设置回调函数</div>
<button class="hidebtn">隐藏</button>
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
);
});
});
1.2 切换 toggle()
语法: $(selector).toggle(speed,callback);
可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素,并隐藏已显示的元素。
例:<button>隐藏/显示</button>
<p>内容</p>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
可选的 speed 参数规定显示的速度和隐藏方式,可以取以下值:速度可以取"fast" 或毫秒,隐藏可以选择"slow"、"linear" 等。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
例:<div>隐藏及设置回调函数</div>
<button class="hidebtn">隐藏或显示</button>
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").toggle(1000,"linear",function(){
alert("toggle() 方法已完成!");
});
});
});
2.淡入淡出 (jQuery 拥有下面四种 fade 方法)
2.1 淡入已隐藏的元素fadeIn() 注意,fadeIn这里的I,是i的大写,不是L
语法: $(selector).fadeIn(speed,callback);
例:<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
2.2 淡出可见元素fadeOut()
语法:$(selector).fadeOut(speed,callback);
例:<button>点击淡出 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
2.3 切换淡入、淡出 fadeToggle()
语法:$(selector).fadeToggle(speed,callback);
例:<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
2.4渐变透明度 fadeTo() (值介于 0 与 1 之间)。
语法:$(selector).fadeTo(speed,opacity,callback); 在使用的时候speed参数和opacity是必须要有的
例:<button>点我让颜色变淡</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
3.滑动
3.1向下滑动元素 slideDown()
语法: $(selector).slideDown(speed,callback);
例:#panel,#flip{ padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3;}
#panel{ padding:50px; display:none;}
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
3.2 向下滑动元素 slideUp()
语法:$(selector).slideUp(speed,callback);
例:#panel,#flip{ padding:5px; text-align:center; border:solid 1px #c3c3c3;}
#panel{ padding:50px; }
<div id="flip">点我收起面板</div>
<div id="panel">Hello world!</div>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
3.3 切换向下、向上滑动元素 slideToggle()
语法: $(selector).slideToggle(speed,callback);
例:#panel,#flip{ padding:5px; text-align:center; border:solid 1px #c3c3c3;}
#panel{ padding:50px; display:none;}
<div id="flip">点击显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
//$("#panel").slideToggle(5000);毫秒的写法不用加引号
});
});
4.动画
4.1 创建自定义动画 animate()
语法: $(selector).animate({params},speed,callback); 必需带有 params 参数定义形成动画的 CSS 属性,其他参数可选。
例:<button>开始动画</button>
<p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
如果需要改变位置,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute否则动画不生效</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>
$(document).ready(function(){ 多个属性:$(document).ready(function(){
$("button").click(function(){ $("button").click(function(){
$("div").animate({left:'250px'}, 5000); $("div").animate({
}); left:'250px',
}); opacity:'0.5',
height:'150px',
width:'150px'
},5000);
});
});
几乎可以用 animate() 方法来操作所有 CSS 属性,但是要注意使用驼峰式
4.2 使用相对值
例:<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
},5000);
});
});
4.3 使用预定义的值
例:<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
},5000);
});
});
4.4使用队列功能
例:<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>
例1:
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
例2:
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'50px'},"slow");
});
});
5.停止动画
5.1 停止动画或效果 stop() 此方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法: $(selector).stop(stopAll,goToEnd);
stopAll 参数规定是否清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
goToEnd 参数规定是否立即完成当前动画。默认是 false。因此默认地,stop() 会清除在被选元素上指定的当前动画。
例:
#panel,#flip{ padding:5px; text-align:center; border:solid 1px #c3c3c3;}
#panel{ padding:50px; display:none;}
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>
例1:(不带参数,不写默认是fslse) 例2:(带参数 true)
$(document).ready(function(){ $(document).ready(function(){
$("#flip").click(function(){ $("#flip").click(function(){
$("#panel").slideDown(5000); $("#panel").slideDown(5000);
$("#panel").slideUp(5000); $("#panel").slideUp(5000);
}); });
$("#stop").click(function(){ $("#stop").click(function(){
$("#panel").stop(); $("#panel").stop(true);
}); });
}); });
停止当前的动画,但是会继续后面执行队列的动画 停止执行所有的队列动画
例3:(带有 goToEnd 参数)
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
$("#panel").slideUp(5000);
});
$("#stop").click(function(){
$("#panel").stop(true,true);
});
});
停止执行所有的队列动画,并且快速完成当前动画的动作(即,假如有5个队列动画,
现在正在执行第3个,点击之后停止执行所有队列的动画,但是会把当前(即第3个队列)的动画动作快速的完成)
6. 回调函数Callback方法 作为动画animate的第三个参数 Callback 函数是在当前动画 100% 完成之后执行的。
6.1 回调函数在动画animate中不是必写的,但在很多时候还是很有必要的。
例:(没有回调函数)
<button>隐藏</button>
<p>显示的内容,点击后隐藏</p>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("现在段落被隐藏了");
});
});
结果会导致的是在点击隐藏的时候,动画还没有执行就弹出了alert
例:(有回调函数)
<button>隐藏</button>
<p>显示的内容,点击后隐藏</p>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
});
结果是在完全执行玩动画之后才弹出alert
7.链接chaining (Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上))
例:<p id="p1">显示的内容</p>
<button>点我</button>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
提示:当进行链接时,代码行会变得很长。不过,jQuery 语法不是很严格;您可以按照希望的格式来写,包含换行和缩进。
因为jQuery 会抛掉多余的空格,并当成一行长代码来执行。
例:$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
});
});
转载于:https://www.cnblogs.com/hermit-gyqy/p/10418078.html
jquery快速入门(二)相关推荐
- jquery 快速入门二
---恢复内容开始--- 操作标签 样式操作 样式类 addClass();//添加指定的CSS类名. removeClass();//移除指定的类名. hasClass();//判断样式不存在 to ...
- JQuery 基础 || 目前 jQuery 有三个大版本||JQuery快速入门
1. 概念: 一个JavaScript框架.简化JS开发 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScrip ...
- jQuery快速入门
jquery快速入门 jQuery的作用:1.取得页面中的元素:2.修改页面的外观:3.改变页面的内容:4.响应用户的页面操作:5.为页面添加动态效果:6.无须刷新页面即可从服务器获取数据:7.简化常 ...
- jQuery 快速入门教程
内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...
- jQuery快速入门专题
jQuery入门专题 本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...
- JQuery快速入门-选择器
JQuery选择器 JQuery 选择器继承了CSS 与Path 语言的部分语法,允许通过标签名.属性名或内容对DOM 元素进行快速.准确的选择,而不必担心浏览器的兼容性,通过jQuery 选择器对页 ...
- jQuery快速入门(淘宝切换服饰、王者荣耀手风琴效果)
一.什么是jQuery jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情. 二. ...
- JQuery快速入门之插件
自定义插件: 1. $.extend(参数); 1.1 概述: 类似Java的类()方法,也就是可以直接通过"$"调用(无方法名时): 1.2 作用一:对象继承: $.exte ...
- jQuery快速入门(2)--操作 2021.11.20
关联查找 1)$dom.parent():找$dom的父节点,相当于dom.parentNode属性 2)$dom.first():$dom集合中的第一个,平行关系 而不是父子关系 与parentNo ...
最新文章
- 【Ant Design Pro 一】 环境搭建,创建一个demo
- Python人脸识别+手机推送,老板来了你就会收到短信提示
- “嫁”给程序媛,走上人生巅峰
- Sqli-labs less 25a
- python在读写文件之前需要创建文件对象-Python对象序列化写入文件对象
- 那传说中的P、NP以及NPC问题
- android开发将h5转换成pdf_一键将PDF转换成PPT,秒懂!
- Java 集合系列03之 ArrayList详细介绍(源码解析)和使用示例
- UVA 10604 Chemical Reaction
- 《Python Cookbook 3rd》笔记(5.3):使用其他分隔符或行终止符打印
- anaconda 怎么安装xlrd_Pyinstaller打包,文件太大了怎么办?
- UITouch 触摸事件处理(实例)
- 怎么实现两周联动加减速_行车记录仪种类繁多不知道怎么选?学会这几招,简单又有效...
- Flutter PageView 使用详细概述
- java线程本地存储_[并发并行]_[C/C++]_[使用线程本地存储Thread Local Storage(TLS)-win32和pthread比较]...
- Expression.Blend.4 Chapter 图片和视频的使用
- java自行车火多重,多重继承的演变
- 《 ATSS:Adaptive Training Sample Selection》
- 机器人J中WPR_中国工业机器人的产业链及发展现状分析
- 华为全系Visio图标下载链接
热门文章
- 数字化工厂的五大系统_工厂通过MES系统对车间设备数字化管理
- idea无法导入java文件_java – IntelliJ IDEA无法解析spring导入的文件
- android自定义横向时间轴,Android自定义时间轴的实现过程
- linux安装jdk8和tomcat8
- ATAC-seq原理及现有技术的比较
- 深度学习(Deep Learning)综述
- python面对对象的编程语言_python面对对象编程
- pip 离线安装_安装不上python的模块怎么办?别怕,我这有妙招!
- 蓝牙学习笔记(四)——AC692x程序烧录
- C语言:求两个整数的最大公约数