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. 按照鬼哥学so变化，四，第一章的例子

    跟随鬼哥伦比亚科学so变化,四.第一章的例子 图纸/文化  听鬼哥说故事 ---------------------------------------------切割线--------------- ...

  2. 有关Android存储的相关概念辨析

    我想念许多Android开发人员在碰到有关存储的相关问题时,肯定遇到过“内部存储/内存”.“外部存储/外存”等类似的概念,尤其是将相关概念跟非开发人员解释时,那真是“秀才遇到兵,有理说不清哪”.包括我 ...

  3. 2014.3.6-C语言学习小结

    链表基础: 知识点: 1.链表基础 2.节点的创建和添加 llist_append_node 3.链表的遍历 llist_print_each 4.链表的查找与修改 5.链表的插入与删除 6.链表的销 ...

  4. Xcode中如何集成Unity

    项目中需要集成unity,摸索了大半周,碰到了很多坑,终于搞定. 我的方法是,通过unity导出一个空的iOS项目,然后再新建一个Xcode项目,针对配置页面一一对应.直到配置完全一样,然后倒入相关资 ...

  5. NuGet管理

    使用NuGet管理项目类库引用   NuGet 是微软开发平台(包括.NET平台)的一个包管理器,这里只介绍和.NET相关的NuGet Visual Studio扩展客户端, 在VS2010 ,VS2 ...

  6. MongoDB：利用官方驱动改装为EF代码风格的MongoDB.Repository框架 六：支持多数据库操作

    本次主要内容:修正MongoDB.Repository框架对多数据库的支持. 在之前的五篇文章中对MongoDB.Repository框架做了简单的介绍是实现思路.之前是考虑MongoDB.Repos ...

  7. ios开发实践之UIDatePicker（已对之前无法解决的问题做了解答）

    需求:要做一个生日选择的控件,但除了选择之外还需要自定义几个控件,跟生日选择控件组合一起. 做法:自定义了一个UIImageView,并且作为背景.在这个背景view上再添加其他button和时间选择 ...

  8. POJ 3667 & 1823 Hotel (线段树区间合并)

    两个题目都是用同一个模板,询问最长的连续未覆盖的区间 . lazy代表是否有人,msum代表区间内最大的连续长度,lsum是从左结点往右的连续长度,rsum是从右结点往左的连续长度. 区间合并很恶心啊 ...

  9. andriod手机签到应用服务器架构

    andriod手机签到应用服务器架构 最近导师要求我和另一个同学开发一个手机上课签到应用,我负责客户端和服务器之间的通信架构编写和数据的存储 本人大学四年只用过汇编和C/C++,因此对andriod开 ...

  10. C++ 动态库导出函数名“乱码”及解决

    C++ 动态库导出函数名“乱码”及解决 刚接触C++,在尝试从 dll 中导出函数时,发现导出的函数名都“乱码”了. 导出过程如下: 新建一个Win32项目: 新建的解决方案里有几个导出的示例: // ...