使用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 相关文章推荐
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
Vue实现星级评价效果实例详解
Dec 30 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
PHP memcache扩展的三种安装方法
2009/04/26 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
Javascript调用C#代码
2011/01/17 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
python实现横向拼接图片
2020/03/23 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
Python中常见的数制转换有哪些
2020/05/27 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
工业设计专业推荐信
2013/10/29 职场文书
会计求职自荐信
2014/06/20 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python