【html、CSS、javascript-12】jquery-效果

一、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-效果的更多相关文章

【Python全栈-JavaScript】jQuery效果
jQuery效果 jQuery 效果函数: 方法描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...
Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】
一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...
Jquery效果代码--（二）
//jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...
推荐12款实用的 JavaScript 书页翻转效果插件
Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一.他们可以用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内 ...
php面试专题---12、JavaScript和jQuery基础考点
php面试专题---12.JavaScript和jQuery基础考点一.总结一句话总结: 比较常考察的是JavaScript的HTML样式操作以及jQuery的选择器和事件.样式操作. 1.下列不 ...
使用javaScript和JQuery制作经典面试题：光棒效果
使用javaScript与jQuery添加CSS样式的区别和步骤使用javaScript制作光棒效果 --首先是javaScript <script> $(function () { v ...
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 ...
前端~HTML~CSS~JavaScript~JQuery~Vue
HTML CSS JavaScript DOM文档操作 jQuery实例 Vue
HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
JavaScript、Jquery选择题
尚学堂Java EE软件工程师认证考试试题库-选择题一. 选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是( )(选择一项) A. numb_1 ...

随机推荐

wpf 纯样式写按钮
 <LinearGradientBrush x:Key="LinearGradientBlueBackground" EndPoint ...
IDA 远程调试设置
第一步,先去 IDA dbgsrv 这个目录下,找到要调试的那个远程计算机对应的可用客户端, 比如,android_server, 把它拷贝到目标计算机中, 比如 adb push .... 然 ...
java_迭代器
java的迭代器(Iterator): 一个可迭代的对象调用iterator可以得到一个迭代器对象 HasNext:判断是否还有下一个元素 next:返回迭代的元素步骤: public static ...
iOS开发系列-JSON解析
概述 JOSN是一种轻量级的数据格式,一般用于数据交互.服务器返回给客户端,一般都是JSON格式或者XML格式. JSON的格式: {"name" : "CoderHon ...
JS规则多样化的我(变量赋值）我们使用"="号给变量存储内容,你可以把任何东西存储在变量里，如数值、字符串、布尔值等，
多样化的我(变量赋值) 我们可以把变量看做一个盒子,盒子用来存放物品,那如何在变量中存储内容呢? 我们使用"="号给变量存储内容,看下面的语句: var mynum = 5 ; / ...
从虚拟机视角谈 Java 应用性能优化
从虚拟机视角谈 Java 应用性能优化周祥, 软件工程师, IBM 简介:Java 的普及和广泛应用,以及其基于虚拟机运行的机制,使得性能问题越来越重要.本文从 Java 虚拟机的角度,特别是垃圾 ...
apache tomcat 一个网站多域名的实现方法
因此处是进行多域名设置,所以 Apache 与 tomcat的结合没有详述,此处只是设置多域名的方法 windows下 C:\WINDOWS\system32\drivers\etc 文件夹内 hos ...
Django简介以及安装
目录前言 Web框架本质服务器和应用程序基于第三方模块实现Web框架 Python三大主流Web框架 django flask tornado Django框架介绍安装创建项目创建App ...
Ubuntu 快速安装配置Odoo 12
Odoo 12预计将于今年10月正式发布,这是一次大版本更新,带来了一些不错的新特性,如文件管理系统(DMS) 用户表单中新增字段(Internal user, Portal, Public) HR ...
day71test
目录练习: settings.py views.py: exception.py urls.py 练习: 视图类渲染,解析, 异常配置: 作业: 1..简单过过请求模块的源码流程,建立一个视图类,完 ...

【html、CSS、javascript-12】jquery-效果

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

随机推荐

热门专题