JQuery基础知识(1)
JQuery基础知识(1)
对JQuery学习中遇到的小细节进行了整理和总结
1、JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的参数,即hide(speed);隐藏的速度进行了限定。hide(1000)/show(1000);
2、JQuery toggle()方法用来切换hide()和show();可以用speed参数进行控制显示和隐藏的速度。
JQuery的淡入淡出
1、JQuery fadeIn();此方法可以携带不同的参数以控制淡入效果。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
2、JQuery fadeOut();携带参数控制淡出效果。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
3、JQuery fadeTpggle();携带参数进行淡入淡出切换。
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
4、JQuery fadeTo()方法允许渐变为给定的不透明度(0-1之间)。
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的淡入淡出练习</title>
<script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script> <script type="text/javascript">
$(document).ready(function(){
//淡入效果
$("#btnfadeIn").click(function(){
$("#div1").fadeIn(1000);
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
//淡出效果
$("#btnfadeOut").click(function(){
$("#div1").fadeOut(1000);
$("#div2").fadeOut(2000);
$("#div3").fadeOut(3000);
});
//二者切换
$("#btnfadeToggle").click(function(){
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(2000);
$("#div3").fadeToggle(3000);
});
//设定不同的透明度
$("#btnfadeTo").click(function(){
$("#div1").fadeTo("slow",0.1);
$("#div2").fadeTo("slow",0.6);
$("#div3").fadeTo("slow",0.3);
});
});
</script>
</head>
<body>
<div>
<p>带不同参数的fadeIn()方法</p>
<input type="button" value="淡入效果" id="btnfadeIn" />
<input type="button" value="淡出效果" id="btnfadeOut" />
<input type="button" value="二者切换" id="btnfadeToggle" />
<input type="button" value="给定透明度" id="btnfadeTo" />
<div id="div1" style="width: 100px; height: 100px; background-color: red; display:none;" ></div>
<div id="div2" style="width: 100px; height: 100px; background-color: royalblue; display:none;"></div>
<div id="div3" style="width: 100px; height: 100px; background-color: darkgoldenrod; display:none;"></div>
</div> </body>
</html>
JQuery基础知识(1)的更多相关文章
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- JQuery基础知识(2)
JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...
- 0417 jQuery基础知识
jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...
- JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...
- 【JQuery基础知识/statusCode(状态码)】---初学者必备
今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...
- 【前端】之jQuery基础知识
jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...
- jQuery基础知识总结
1. jQuery基本概念介绍 1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...
- jQuery基础知识准备
一. 代码风格在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起始的.而这个"$"就是jQuery当中最重要且独有的对象:jQu ...
- Jquery基础知识;
1.jquery语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 基础语法: $(selector).action() 美元符号定义 jQuery 选择符(select ...
随机推荐
- CSS3的应用,你学会了吗?
开场白 CSS3相对于CSS2引入了很多的新的css属性和特效,利用css3实现了原来需要加入js才能模拟的效果,因此前端性能提高了很多. 各大浏览器厂商包括IE都逐渐的加大对CSS3 HTML5的支 ...
- LINQ TO SQL ——Group by
原文:LINQ TO SQL --Group by 分组在SQL中应用的十分普遍,在查询,统计时都有可能会用到它.LINQ TO SQL中同样具备group的功能,这篇我来讲下LINQ TO SQL中 ...
- sql内置函数pivot强大的行转列功能
原文:sql内置函数pivot强大的行转列功能 语法: PIVOT用于将列值旋转为列名(即行转列),在SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT的一般语法是:PIVO ...
- NhibernateProfiler-写个自动破解工具(源码)
04 2013 档案 [屌丝的逆袭系列]是个人都能破解之终结NhibernateProfiler-写个自动破解工具(源码) 摘要: 破解思路分析及手动破解 增加“附加到进程”功能--功能介绍增加“ ...
- mysql主从同步配置(windows环境)
mysql主从同步配置(mysql5.5,windows环境) A主机(作为主服务器)环境:windows8.mysql5.5 ip:192.168.1.100(自己填) B主机(作为从服务器,由 ...
- w5cValidator【AngularJS】 2.0 版本发布
w5cValidator 插件基于angular原有的表单验证,在原有的基础上扩展了一些错误提示的功能,让大家不用在每个表单上写一些提示信息的模板,专心的去实现业务逻辑. 代码地址:https://g ...
- OWC11生成统计图案例
(1)饼状图:----通过修改参数生成不同的走势图, string strCategory = "优良率" + '\t' + "合格率" + '\t' + &q ...
- [QT Creator]LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 。
这个问题很恶心!网上说的原因是因为安装了多了版本的VS.在高版本的2010和2012上都会有问题,解决方法是使用visual studio 2008安装目录下的一个文件替代vs2010安装目录下的文件 ...
- c#中关于String、string,Object、object,Int32、int
在java中,string和String有着明显的区别,后者就是前者的一个封装.在c#中,好像是通用的,大部分情况下,两者互换并不会产生问题.今天特意查了一下资料,了解了一下两者的关系. 简单的讲,S ...
- iOS基础 - UITableViewController
1. 继承UITableViewController默认会设置数据源和代理,并且会自动遵守数据源和代理协议,并且self.tableView 相当于 self.view 2.更换控制器时,注意把sto ...