使用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 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 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字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
微信小程序日历效果
2018/12/29 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
python使用mysql数据库示例代码
2017/05/21 Python
python使用thrift教程的方法示例
2019/03/21 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
大学生先进事迹材料
2014/02/16 职场文书
《乡愁》教学反思
2014/02/18 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
爱护公共设施的标语
2014/06/24 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
学生会辞职信
2015/03/02 职场文书
乔迁新居祝福语
2019/11/04 职场文书
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python