【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{
            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- 400px) {
             .w6{
                width:50%;
                float: left;
                background-color: red;
            }
        }
        /*当浏览器的宽度>400px-800px时执行下面语句*/
        @media (min- 800px) {
            .w6{
            width:50%;
            float: left;
            background-color: blue;
            }
        }

    </style>
</head>
<body>
    <div class="w6">1111</div>
    <div class="w6">1111</div>
</body>
</html>

响应式布局