您的位置：首页 > Web前端 > JQuery

jquery学习基础

2015-06-28 19:30 996 查看
这篇博客将会给大家带来jquery中的一些基础操作。

使用click绑定事件

使用click为div绑定点击事件

<div>
   testclick
</div>

$(function($) {
    $("div").click(
      function() {
        alert("hello world");
    }
  );
});




点击增加样式

点击div时候，改变其字体颜色和背景色

<div>
    click to change the backgroundcolor
</div>

$(function($) {
    $("div").click(
        function(){
            $(this).css({ color: "#ff0011", background: "blue" });
        }
    );
});




隐藏和显示

使用show()和hide()

先看下效果：




代码如下：

body{
    margin:0 auto;
    width:500px;
    height:100%;
}
a{
    text-decoration:none;
    hover:#ff0000;
}

a:hover{
    color:#ff0000;
}

div{
    height:200px;
    width:200px;
    background:rgb(200,100,150);
    display:none;
}

<a href="#" id="show">显示</a>
<a href="#" id="hidden">隐藏</a>
<div>

</div>


可以看到首先将div隐藏了。

jquery代码如下：

$(function($) {
        $("#show").click(
            function() {
                $("div").show("slow");
            }
        );
        $("#hidden").click(
            function() {
                $("div").hide("fast",
                    function() {
                        alert("隐藏完成");
                    }
                );
            }
        );
    });


这里当点击隐藏的时候，在隐藏完成的时候会触发一个匿名函数，会弹出一个alert。

使用toggle()

效果：




代码和上面是一样的，看下js代码：

$(function($) {
        $("#toggle").click(
            function() {
                $("div").toggle("slow");
            }
        );
 });


这里为id=”toggle”的元素绑定了一个click方法，使用了jquery提供的toggle方法，隐藏和显示div元素。

滑动显示隐藏

先看效果：




jquery代码如下：

$(function($) {
        $(".down").click(
            function() {
                $("div").slideDown("slow","linear",function(){
                    alert("slide down ok");
                });
            }
        );
        $(".up").click(
            function() {
                $("div").slideUp();
            }
        );
    });


这里，slideDown和slideUp可以接受 三个参数：

1.speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

2.easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”

3.fn在动画完成时执行的函数，每个元素执行一次。

fadeIn和fadeOut淡入淡出

先看效果：




jquery代码如下：

$(function($) {
        $(".in").click(
            function() {
                $("div").fadeIn(3000,"linear",function(){
                    alert("slide down ok");
                });
            }
        );
        $(".out").click(
            function() {
                $("div").fadeOut();
            }
        );
    });


这里，在淡入的时候我指定了需要三秒时间，淡入完成以后触发匿名函数。

使用delay()延迟执行

可以使用delay函数，延迟执行动画，先看效果： 



$(".delay").click(
    function() {
        $("div").fadeIn(4000).delay(800).slideUp("slow");
    }
);


这里我首使用4秒时间，将div淡入，然后在800毫秒以后又将该div隐藏。

hover的用法

hover表示当鼠标移动到元素上的情况。先看效果： 



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>jquery lazyLoad</title>
<script type="text/javascript" src="../jquery/jquery-2.1.4.js"></script>
<script type="text/javascript">
    $(function($) {
        $("ul li").hover(
            function () {
                $(this).addClass("hover");
            },
            function () {
                $(this).removeClass("hover");
            }
        );
    });
</script>
<style type="text/css">
body{
    margin:0 auto;
    width:500px;
    height:100%;
}

ul{
    list-style-type:none;
}
li{
    float:left;
    width:60px;
    background:#fff000;
    text-align:center;
    margin:3px;
}

.hover{
    border:2px solid blue;
}

</style>
</head>
<body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</body>
</html>


可以看到当鼠标滑过的时候，为当前的li元素添加了一个class。这里就是为其添加了一个样式。

toggleClass学习

toggleClass:如果存在（不存在）就删除（添加）一个类。 看效果： 



table{
    border:none;
    width:70%;
    border-collapse:collapse;
}
td{
    border: solid #000 1px;
}
.clicked{
    background:#58a936;
}


这里我提前定义好了一个class=”clicked”的样式。

$(function($) {
    $("table tr").click(
        function() {
            $(this).toggleClass("clicked");
        }
    );
 });


为table下的所有tr元素绑定click事件，并且在该事件中添加或删除该元素的class。

mouseover和mouseout

mouseover和mouseout分别定义鼠标移动到元素上和鼠标移出时的事件。看效果：




关键代码：

$(function($) {
        $("table tr").mouseover(
            function(){
                $(this).css({background:"#ff0892"});
            }
        );
        $("table tr").mouseout(
            function(){
                $(this).css({background:"#ffffff"});
            }
        );
  });


这里我动态的为选中的元素设置背景色，也可以提前定义好一个样式然后通过addClass和removeClass来实现。

each和find的用法

each：以每一个匹配的元素作为上下文来执行一个函数

find：搜索所有与指定表达式匹配的元素

$(function($) {
    $("ul").find("li").each(function(i){
        $(this).html($(this).html()+"---"+i);
    });
  });

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
    <li>eee</li>
</ul>


效果如下：



源码下载

css上下左右垂直居中

最后给大家带来一个上下左右垂直居中的demo：

效果如下：




css代码如下：

body{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}
div{
    position:absolute;
    top:50%;
    left:50%;
    width:600px;
    height:150px;
    margin-top:-75px;/*注意这里必须是DIV高度的一半*/
    margin-left:-300px;/*这里是DIV宽度的一半*/
    background:#f78644;
    border:2px solid rgb(123,200,89);
}


这样的居中方式，非常适合做登陆界面。大家需要的可以收藏了哈。

ok，今天关于jquery的学习就到这里了。该休息了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航