使用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 相关文章推荐
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 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
Php Cookie的一个使用注意点
2008/11/08 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
python共享引用(多个变量引用)示例代码
2013/12/04 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python调用自定义函数的实例操作
2019/06/26 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
六年级学生评语
2014/04/22 职场文书
酒店管理求职信
2014/06/09 职场文书
药店促销活动总结
2014/07/10 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
办理收楼委托书范本
2014/10/09 职场文书
市级三好生竞选稿
2015/11/21 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python