jQuery----2

一、jquery事件应用

　　ready()：类似onLoad()，但ready()只要页面DOM结构加载后触发，而onLoad()必须页面全部元素加载成功才触发

//$(document).ready(function(){});等价于$(function(){});//设置id为tip的内容$(document).ready(function(){
   $("#tip") .html("我被加载了！");
})

　　bind()：给元素绑定事件

//bind()演示
$("button").bind(‘click‘,function(){
    $this.attr("disabled","true");
});

　　删除事件：unbind(event,fun)，event为事件名称，多个以空格隔开，fun为事件执行时调用的函数，若没有任何参数则删除指定元素的所有事件处理函数

　　聚焦、失焦：hover(over,out);over为鼠标移入时触发的函数，out为鼠标移出时触发的函数

　　隐藏、显示：toggle()，该方法可以给元素点击事件绑定两个或两个以上的函数，还可以实现元素的隐藏与切换

//每次点击div元素显示不同内容
$(function(){
    $("div").toggle(
        function(){
            $(this).html("苹果");
        },
         function(){
             $(this).html("香蕉");
         }
    )
});
//实现按钮的隐藏和显示
$(function{
    $("button").bind("click",function(){
          $("div").toggle();
     })
});

　　一次性事件：one(event,fun)，给元素绑定只会执行一次的事件

　　手动触发指定事件：trigger(event)，其中event可以是元素自身事件，也可是自定义事件，该事件必须能执行

       <style>
            .color
            {
                color: red;
            }
        </style>
        <div>土豪，咱们交个朋友吧</div>

        <script>
            //当页面加载完时触发
            $(function () {
                //其中change-color为自定义的事件
                $("div").bind("change-color", function () {
                    $(this).addClass("color");
                });
                //绑定自定义事件
                $("div").trigger("change-color");
            });
        </script>

　　文本框的聚焦失焦：focus、blur

　　　　focus：在元素获取焦点时触发，如单击文本框

　　　　blur：在元素失去焦点时触发，如单击除文本框的任何位置

(function(){
    //输入框的聚焦事件
    $("input").bind("focus",function{
         $("div").html("请输入您的姓名");
    });
    //输入框的失焦事件
    $("input").bind("blur",function(){
         if($(this).val().length == 0)
              $("div").html("您的名称不能为空!");
    });
});

　　下拉框的change事件：当一个元素的值发生改变时触发的事件，如在下拉列表框中

$(function(){
                //绑定change事件
                $("select").bind("change",function(){
                   if($(this).val() == ‘苹果‘)
                        $(this).css("background-color","red");
                   else
                        $(this).css("background-color","green");
                });
});

　　live()：jquery1.9之后不再支持，1.7版本开始不推荐使用，与bind()方法相同，live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素

$(function () {
                $("input").live("click", function () {
                    $(this).attr("disabled", "true");
                })
                $("input").live("mouseout",function(){
                    $(this).attr("disabled","true");
                });
                $("body").append("<input id=‘btntest‘ type=‘button‘ value=‘点击或移出就不可用了‘ />");
});

二、动画

　　显示：$(selector).show(speed,[callback])

　　隐藏：$(selector).hide(speed,[callback])

speed：设置隐藏或显示的速度值，可为‘slow’、‘fast’或毫秒值

callback：为隐藏或显示动作执行完成后调用的函数名

<h4>我喜欢吃的水果</h4>
     <ul>
            <li>苹果</li>
            <li>甘桔</li>
            <li>梨</li>
     </ul>
<input id="hidval" type="hidden" value="0"/>

<script>
$(function(){
     $("h4").bind("click",function(){
          if($("#hidval").val() == 0){
               //显示ul标签
               $("ul").show();
               $("#hidval").val(1);
           }else{
               //隐藏ul标签
               $("ul").hide();
               $("#hidval").val(0);
           }
     });
});
</script>

<h4>我爱吃水果</h4>
<ul>
       <li>苹果</li>
       <li>西瓜</li>
       <li>梨</li>
</ul>
<input type="hidden" value="0"/>
<script>
         $(function(){
                   $("h4").bind("click",function(){
                             if($("input").val() == 0){
                                   $("ul").show(3000,function(){
                                         $("input").val(1);
                                    });
                             }else{
                                    $("ul").hide(3000,function(){
                                           $("input").val(0);
                                     });
                             }
                    });
          });
</script>

显示隐藏二合一：$(selector).toggle(speed,[callback]);

元素处于显示状态调用该方法则影藏该元素，处于隐藏状态则显示

$(function(){
       $("h4").bind("click",function(){
              $("ul").toggle(3000,function(){
                    $("span").html() == "影藏" ?　$("span").html("显示") : $("span").html("影藏");
              });
       });
});

toggle()演示

　　上下滑动：

　　$(selector).slideUp(speed,[callback])，向上滑动元素，仅适用于显示的元素

　　$(selector).slideDown(speed,[callback])，向下滑动元素，该函数仅适用于被隐藏的元素

$(function(){
        $("button").bind("click",function(){
                if($("hidden").val() == 0){
                        $("ul").slideUp(1000,function(){
                                $("hidden").val(1);
                        });
                }else{
                        $("ul").slideDown(1000,function(){
                                $("hidden").val(0);
                        });
                }
        });
});

slideUp、slideDown用法

　　上下滑动二合一：

　　$(selector).slideToggle(speed,[callback])，调用该方法，若元素已向上滑，则自动向下滑，反之亦然

$(function(){
    $("h4").bind("click",function(){
        //slideToggle()的用法
        $("ul").slideToggle(1000,function(){
            $("span").html() == "向下滑" ? $("span").html("向上滑") : $("span").html("向下滑");
        });
    });
});