【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 ...

随机推荐

iOS开发系列-NSOutputStream
NSOutputStream 创建一个NSOutputStream实例 - (nullable instancetype)initToFileAtPath:(NSString *)path appen ...
Extjs & Ext.net中的一些属性
Extjs & Ext.Net 弹出整个浏览器对话框的方法 top.Ext.Msg.alert("值"); top.Ext.Msg.confirm("值" ...
内核下枚举进程（二）ZwQuerySystemInformation
说明: SYSTEM_INFORMATION_CLASS 的5号功能枚举进程信息.其是这个函数对应着ring3下的 NtQuerySystemInformation,但msdn上说win8以后ZwQu ...
windows10 家庭版无法远程2012的解决
windows 10安装最新补丁后无法远程windows server 2008.2012服务器报错信息如下:出现身份验证错误,要求的函数不受支持可能是由于CredSSP加密Oracle修正. ...
Apache Flink 1.9.0版本新功能介绍
摘要:Apache Flink是一个面向分布式数据流处理和批量数据处理的开源计算平台,它能够基于同一个Flink运行时,提供支持流处理和批处理两种类型应用的功能.目前,Apache Flink 1.9 ...
&卡特兰数学习笔记
一.关于卡特兰数卡特兰数是一种经典的组合数,经常出现在各种计算中,其前几项为 : 1, 2, 5, 14, 42, 132, 429, 1430, 4862, 16796, 58786, 20801 ...
sudo apt-get常用命令
一.卸载 1. sudo apt-get autoclean 如果你的硬盘空间不大的话,可以定期运行这个程序,将已经删除了的软件包的.deb安装文件从硬盘中删除掉.如果你仍然需要硬盘空间的话,可以试试 ...
php中date() 函数
实例格式化本地日期和时间,并返回格式化的日期字符串: <?php // Prints the day echo date("l") . "<br>&q ...
vue2 + koa2全栈部署
1.首先打包前端上传修改config下的index.js 代理地址为服务器IP index: path.resolve(__dirname, '../dist/index.html'), asset ...
SpringBoot 01_HelloWorld
本文环境配置: JDK:1.8 开发工具:IDEA 操作系统:Windows10 集成工具:Maven SpringBoot版本:1.5.6.RELEASE 构件方式:Spring Initializ ...

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

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

随机推荐

热门专题