使用JQ来编写最基本的淡入淡出效果附演示动画


Posted in Javascript onOctober 31, 2014

jQuery是一个JavaScript 库,也就是对JavaScript的扩展,用来满足各种日益增加的不同特效需求。其实质就是JavaScript

下面来编写一个最基本的JQ程序来说明JQ。

一、基本目标

网页中有如下三个按钮,一个只能隐藏文本,一个只能显示文本,一个同时能隐藏与显示文本,点击一下显示,再点击一下隐藏,无限循环。

使用JQ来编写最基本的淡入淡出效果附演示动画

二、制作过程

1.首先你要到JQ官网中下载一个JQ支持文件放入你的站点文件夹。这个支持文件是jQuery1.11,可以到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11,而不是不兼容旧浏览器IE6的jQuery2。

2.整个网页代码如下,再分片段进行说明:

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
$(document).ready(function() { 
$("#hide").click(function() { 
$("#text").hide(); 
}); 
$("#show").click(function() { 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
$("#text").toggle(); 
}); 
}); 
</script> 

<!-- 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

--> 

<title>JQ淡出与显示</title> 

</head> 
<body> 

<p id="text"> 
被折腾的文本 
</p> 

<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body> 

</html>

(1)<body>部分

<head>部分主要是实现核心代码部分,放在后面来讲,先说<body>部分

<body> 
<!--这是定义一段ID为text的文本,便于脚本控制--> 
<p id="text"> 
被折腾的文本 
</p> 

<!--分别设置ID为hide,show,toggle的按钮--> 
<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body>

(2)<head>部分

<head> 
<!--网页的编码,声明要使用JQ--> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
<!--JQ的代码编写首先要用$(document).ready(function() {});去定义一个总函数,缺少这个函数提供的框架之后的东西无法执行--> 
$(document).ready(function() { 
<!--之后再于这个函数内编写需要的函数--> 
<!--对于ID为hide这个按钮的click动作进行函数的调用,之后的动作依旧放在这个一个函数的里面--> 
$("#hide").click(function() { 
<!--隐藏ID的为text的文本--> 
$("#text").hide(); 
}); 
$("#show").click(function() { 
<!--显示ID的为text的文本--> 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
<!--在隐藏与显示之间切换ID的为text的文本--> 
$("#text").toggle(); 
}); 
}); 
</script> 

lt;!--这段控制默认是显示还是不显示 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

-> 

<title>JQ淡出与显示</title> 

</head>
Javascript 相关文章推荐
JavaScript 获取事件对象的注意点
Jul 29 Javascript
Js sort排序使用方法
Oct 17 Javascript
javascript屏蔽右键代码
May 15 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 #Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 #Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 #Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 #Javascript
JsRender实用入门教程
Oct 31 #Javascript
JsRender for object语法简介
Oct 31 #Javascript
JsRender for index循环索引用法详解
Oct 31 #Javascript
You might like
图形数字验证代码
2006/10/09 PHP
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
简单的自定义php模板引擎
2016/08/26 PHP
PHP7匿名类用法分析
2016/09/26 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
Django中的文件的上传的几种方式
2018/07/23 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
django 中QuerySet特性功能详解
2019/07/25 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
python实现发送邮件
2021/03/02 Python
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
法人身份证明书
2014/10/08 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL