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）的更多相关文章

  1. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  2. JQuery基础知识（2）

    JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...

  3. 0417 jQuery基础知识

    jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...

  4. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

  5. 【JQuery基础知识/statusCode(状态码)】---初学者必备

    今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...

  6. 【前端】之jQuery基础知识

    jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...

  7. jQuery基础知识总结

    1.  jQuery基本概念介绍             1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...

  8. jQuery基础知识准备

    一． 代码风格在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起始的.而这个"$"就是jQuery当中最重要且独有的对象:jQu ...

  9. Jquery基础知识；

    1.jquery语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 基础语法: $(selector).action() 美元符号定义 jQuery 选择符(select ...

随机推荐

  1. 《C语言 学生成绩管理系统》

    /* (盯着先拔头筹程序) * 该计划的版权声明和版本号 * Copyright (c) 2011, 烟台大学计算机学院学生的学校 * All rights reserved. * 文件名: 学生成绩 ...

  2. Coffee

    Coffee 从接触Spring 到现在已经差不多2年多了,期间用它做过几个项目,从个人使用角度来说,Spring无疑是非常的成熟和方便的,但是知道怎么用,却不知道原理是码农和攻城师的区别,现在准备自 ...

  3. iOS 制作 framework 教程

    直接看步骤 废话不多说,哈哈! 1.新建一个静态库工程: 2:取自己喜欢的名字: 3.删除向导所生成工程中的 Target: 3.删除TestFrameWork对应的工程文件夹: 5:删除bulid ...

  4. C#伪彩色处理

    伪彩色处理是指将灰度图像转换成彩色图象.因为人眼对于彩色的分辨能力远高于对灰度图像的分辨能力,所以将灰度图像转换成彩色可以提高人眼对图像细节的辨别能力.伪彩色并不能真实的反映图像像的彩色情况. 效果图 ...

  5. Google C++测试框架系列：入门

    Google C++测试框架系列:入门 原始链接:V1_6_Primer 注 GTest或者Google Test: Google的C++测试框架. Test Fixtures: 这个词实在找不到对应 ...

  6. [RM 状态机详解2] RMAppAttempt状态机详解

    摘要 本文详细描述RMAppAttempt状态机内的状态与其转换关系,分析的代码基于Apache社区Hadoop最新的2.3.0版本. RMAppAttempt状态机 在RM中,一个RMApp可能对于 ...

  7. 初探中间件(middleware)

    初探中间件(middleware) 因为考虑到文章的长度, 所以 BaseHandler 的展开被推迟了. 在 BaseHandler 中隐藏着中间件的信息, 较常见的 SessionMiddlewa ...

  8. Oracle JDBC存入图片Blob

    创建测试表 create table test_img( id integer primary key, name ), image blob ); 存储图片 import java.io.FileI ...

  9. LinqToXml高级用法介绍

    LinqToXml高级用法介绍 一.函数构造 什么是函数构造?其是指通过单个语句构建XML树的能力. 那么它有什么作用呢? 作用1.用单个表达式快速创建复杂的XML树 见实例代码CreateXml( ...

  10. SL.XNA中的Popup

    如果要xna与sl混合显示,就不能用popup,不然会有各种显示错乱的问题.如果xna与sl单独显示,可以使用popup,但是要记得移除UIElementRenderer.就是说popup只能交给系统 ...