使用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-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 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 变量定义和变量替换的方法
2009/07/30 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Django中使用Celery的教程详解
2018/08/24 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Django values()和value_list()的使用
2020/03/31 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
《望洞庭》教学反思
2014/02/16 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
解除劳动合同证明书
2014/09/26 职场文书
五年级上册复习计划
2015/01/19 职场文书
会议简报格式范文
2015/07/20 职场文书
干部培训简讯
2015/07/20 职场文书
遗嘱格式范本
2015/08/07 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS