一、jQuery 效果- 隐藏和显示

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){

  $("p").hide();

});

$("#show").click(function(){

  $("p").show();

});

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

$("button").click(function(){

  $("p").hide(1000);

});

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){

  $("p").toggle();

});

实例：三个按钮分别是显示、隐藏、显示/隐藏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p>你好</p>

    <input id="show" type="button" value="显示">

    <input id="hide" type="button" value="隐藏">

    <input id =show_Hide type="button" value="显示/隐藏">

    <script src="jquery.js"></script>

    <script>

        $(function () {

            $("#show").click(function () {

                $("p").show(1000)

            })

            $("#hide").click(function () {

                $("p").hide(1000)

            })

            $("#show_Hide").click(function () {

                $("p").toggle(1000)

            })

        })

    </script>

</body>

</html>

渐变动画显示、隐藏元素

 二、jQuery效果-淡入、淡出（fade）

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() 用于淡入已隐藏的元素。

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法：

jQuery fadeOut() 方法用于淡出可见元素。

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法：

$("button").click(function(){

  $("#div1").fadeOut();

  $("#div2").fadeOut("slow");

  $("#div3").fadeOut(3000);

});

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法：

$("button").click(function(){

  $("#div1").fadeToggle();

  $("#div2").fadeToggle("slow");

  $("#div3").fadeToggle(3000);

});

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法：

$("button").click(function(){

  $("#div1").fadeTo("slow",0.15);

  $("#div2").fadeTo("slow",0.4);

  $("#div3").fadeTo("slow",0.7);

});
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .d1,.d2,.d3{

            width:200px;

            height:100px;

        }

        .d1{

            background-color:green;

        }

        .d2{

            background-color: #396bb3;

        }

        .d3{

            background-color: pink;

        }

    </style>

</head>

<body>

    <input id="fade_in"  type="button" value="fadeIn">

    <input id="fade_out"  type="button" value="fadeOut">

    <input id="fade_toggle"  type="button" value="fadeToggle">

    <input id="fade_to" type="button" value="fadeTo">

    <div class="d1"></div>

    <div class="d2"></div>

    <div class="d3"></div>

    <script src="jquery.js"></script>

    <script>

        $(function () {

            $("#fade_in").click(function () {

                $("div").fadeIn(1000);

            });

            $("#fade_out").click(function () {

                $("div").fadeOut(1000);

            });

            $("#fade_toggle").click(function () {

                $("div").fadeToggle(1000);

            });

            $("#fade_to").click(function () {

                $("div").fadeTo(1000,0.5);

            });

        });

    </script>

</body>

</html>

淡入、淡出实例

三、jQuery效果-滑动（slide）

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown() 方法用于向下滑动元素。

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法：

$("#flip").click(function(){

  $("#panel").slideDown();

});

jQuery slideUp() 方法用于向上滑动元素。

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法：

$("#flip").click(function(){

  $("#panel").slideUp();

});

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideToggle() 方法：

$("#flip").click(function(){

  $("#panel").slideToggle();

});
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

#panel,#flip

{

    padding:5px;

    text-align:center;

    background-color:#e5eecc;

    border:solid 1px #c3c3c3;

}

#panel

{

    padding:50px;

    display:none;

}

</style>

</head>

<body>

<div id="flip">点我，显示或隐藏面板。</div>

<div id="panel">Hello world!</div>

<script src="jquery.js">

</script>

<script>

$(document).ready(function(){

  $("#flip").click(function(){

    $("#panel").slideToggle("slow");

  });

});

</script>

</body>

</html>

滑动实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

#panel,#flip

{

    padding:5px;

    text-align:center;

    background-color:#e5eecc;

    border:solid 1px #c3c3c3;

}

#panel

{

    padding:50px;

    display:none;

}

</style>

</head>

<body>

<div id="flip">点我，显示或隐藏面板。</div>

<div id="panel">Hello world!</div>

<script src="jquery.js">

</script>

<script>

$(document).ready(function(){

  $("#flip").click(function(){

    $("#panel").slideToggle("slow",callBackFunc);  //callBackFunc是回调函数，当滑动结束后执行回调函数

  });

});

callBackFunc = function Over() {

    alert("滑动结束！")

}

</script>

</body>

</html>

滑动结束执行回调函数

 四、定义jQuery函数

1）扩展jQuery对象本身

用来在jQuery命名空间上增加新函数，查看jQuery.fn.extend获取更多添加插件的信息

在jQuery命名空间上增加两个函数

jQuery.extend({

    min:function (a,b) {return  a<b?a:b;},

    max:function (a,b) {return a>b?a:b;}

})

    jQuery.min(2,3)  //结果2

    jQuery.max(4,5)  //结果5

    $.max(2,3) //与 jQuery.min(2,3)相同

2）jQuery.fn.extend()

jQuery.fn.extend({

    check:function () {

        return this.each(function () {

            this.checked = true

        })

    },

    uncheck:function () {

        return this.each(function () {

            this.checked = false

        })

    }

})

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();
<body>

<div id="d1">11111</div>

<script src="jquery.js"></script>

<script>

    $(function () {

        $.fn.extend({   //定义函数

            hello:function () {

                return $(this).text()

            }

        })

        var div_text = $("#d1").hello()  //调用函数

        alert(div_text) //弹出div的text值11111

    })

</script>

</body>

实例1：面板拖动

<!DOCTYPE html>

<html lang="zh">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Qing's Web</title>

<script src="jquery.js"></script>

<style type="text/css">

.footer {

position: fixed;

bottom: 0;

width: 100%;

}

.moveBar {

position: absolute;

width: 250px;

height: 300px;

background: #666;

border: solid 1px #000;

}

#banner {

background: #52CCCC;

cursor: move;

}

</style>

</head>

<body style="padding-top: 50px;">

<div class="moveBar">

    <div id="banner">按住此处移动当前div</div>

    <div class="content">这里是其它内容</div>

</div>

<script>

jQuery(document).ready( function () {

    $('#banner').mousedown( function (event) {

        var isMove = true;

        var abs_x = event.pageX - $('div.moveBar').offset().left;

        var abs_y = event.pageY - $('div.moveBar').offset().top;

        $(document).mousemove(function (event) {

            if (isMove) {

                var obj = $('div.moveBar');

                obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});

            }

        }).mouseup( function () {

            isMove = false;

        });

    });

});

</script>

</body>

</html>

面板随鼠标移动

实例2：可编辑表格

1、在table的某个单元格点击中，先取出该单元格的值，再将该值赋给一个input text，并将这个input text动态添加到这个单元格中，代码可以写成：
    var tdvalue=$(this).val();
    $(this).html("<input id='tempinput' type='text' value='"+tdvalue+"'/>");
2、当单元格失去焦点时，将文本框的值回填给单元格，代码写成：
    $(this).html($("tempinput").val());
3、实际写代码时还要考虑临时加入的文本框的宽度要与单元格一致等内容。

实例3：响应式布局（可以自适应手机屏幕）
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*当浏览器的宽度>400px时执行下面语句*/

        @media (min-width: 400px) {

             .w6{

                width:50%;

                float: left;

                background-color: red;

            }

        }

        /*当浏览器的宽度>400px-800px时执行下面语句*/

        @media (min-width: 800px) {

            .w6{

            width:50%;

            float: left;

            background-color: blue;

            }

        }

    </style>

</head>

<body>

    <div class="w6">1111</div>

    <div class="w6">1111</div>

</body>

</html>

响应式布局

【html、CSS、javascript-12】jquery-效果的更多相关文章

  1. 【Python全栈-JavaScript】jQuery效果

    jQuery效果 jQuery 效果函数: 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...

  2. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  3. Jquery效果代码--（二）

    //jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...

  4. 推荐12款实用的 JavaScript 书页翻转效果插件

    Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一.他们可以用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内 ...

  5. php面试专题---12、JavaScript和jQuery基础考点

    php面试专题---12.JavaScript和jQuery基础考点 一.总结 一句话总结: 比较常考察的是JavaScript的HTML样式操作以及jQuery的选择器和事件.样式操作. 1.下列不 ...

  6. 使用javaScript和JQuery制作经典面试题：光棒效果

    使用javaScript与jQuery添加CSS样式的区别和步骤 使用javaScript制作光棒效果 --首先是javaScript <script> $(function () { v ...

  7. jsDelivr - Free open source CDN for javascript libraries, jQuery plugins, CSS frameworks, Fonts and more

    jsDelivr - Free open source CDN for javascript libraries, jQuery plugins, CSS frameworks, Fonts and ...

  8. 前端~HTML~CSS~JavaScript~JQuery~Vue

    HTML CSS JavaScript DOM文档操作 jQuery实例 Vue

  9. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  10. JavaScript、Jquery选择题

    尚学堂Java EE软件工程师认证考试 试题库-选择题     一.    选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是(   )(选择一项) A. numb_1 ...

随机推荐

  1. vue:使用element-ui制作动态表格

    参考; https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/dynamic-table/compon ...

  2. QSerialPort类

    一.简介     QSerialPort类是Qt5封装的串口类,可以与串口进行通信.QSerialPortInfo是一个辅助类,提供串口的一些信息,如可用的串口名称,描述,制造商,序列号,串口16位产 ...

  3. C++右值引用与转移语义

    std::forwad? C++11 中定义的 T&& 的推导规则为: 右值实参为右值引用,左值实参仍然为左值引用. 参考: 右值引用与转移语义

  4. [JZOJ4648] 【NOIP2016提高A组模拟7.17】锦标赛

    题目 描述 题目大意 有nnn个人,你要确定一个出场序列.每次新上台的人就会和擂主打一架,胜利的人继续当擂主.题目给出两两之间打架胜利(失败)的概率. 问111选手坚持到最后的最大概率. 思考历程 看 ...

  5. 「题解」：[AHOI2013]作业

    问题: 作业 时间限制: 10 Sec  内存限制: 512 MB 题面 题目描述 此时己是凌晨两点,刚刚做了Codeforces的小A掏出了英语试卷.英语作业其实不算多,一个小时刚好可以做完.然后是 ...

  6. SQLite C++ Wrapper 是一个 C++ 语言对 SQLite 的最小封装包。

    SQLite C++ Wrapper 是一个 C++ 语言对 SQLite 的最小封装包. 示例代码1:   #include <string> #include <iostream ...

  7. 第九章 Odoo 12开发之外部 API - 集成第三方系统

    Odoo 服务器端带有外部 API,可供网页客户端和其它客户端应用使用.本文中我们将学习如何在我们的客户端程序中使用 Odoo 的外部 API.为避免引入大家所不熟悉的编程语言,此处我们将使用基于 P ...

  8. LUOGU P1654 OSU! (概率期望)

    传送门 解题思路 首先考虑对于一个点来说,如果这个点是1的话,那么对于答案来说 $(ans+1)^3=ans^3+3*ans^2+3*ans+1$,这对于上一个答案来说其实贡献了 $3*ans^2+3 ...

  9. 出错提示：“Could not flush the DNS Resolver Cache: 执行期间，函数出了问题”的解决方法

    在DNS解析中,出错提示:"Could not flush the DNS Resolver Cache: 执行期间,函数出了问题"的解决方法  . 由于公司网站空间更换了服务商. ...

  10. Hibernate（五）之一对多&多对一映射关系

    既然我们讲到了一对多和多对一关系,必然要提到多表设计的问题.在开发中,前期需要进行需求分析,希求分析提供E-R图,根据ER图编写表结构. 我们知道表之间关系存在三种: 一对多&多对一:1表(主 ...