首页手记前端程序员应该知道的jQuery知识点

前端程序员应该知道的jQuery知识点

标签：

JQuery JavaScript

jQuery事件处理

1.ready事件与onload事件
前者只要页面的DOM结构加载后便触发
后者必须在页面全部元素加载成功才触发

2.绑定事件-bind()
语法格式：
$(selector).bind(event,[data] function)

$(function () {
                $('#btntest').bind('click', function () {
                    $(this).attr("disabled", "true");
                }).bind('mouseout', function(){
                    $(this).attr("disabled", "true");
                })
            });

在jQuery版本1.8.2中绑定多个点击(click)事件可以使用toggle()方法来实现，function之间用逗号分隔，但toggle()在1.9.0之后的版本是不支持的。
移除绑定事件unbind()
$('#btntest').unbind("mouseout");

3.绑定事件-live()
live()方法拥有bind()方法的所有功能，除此之外，live()方法还可以绑定动态元素，即使用代码添加的元素事件。

<body>
        <h3>live()方法绑多个事件</h3>
        <input id='btntest2' type='button' value='tes了' />

        <script type="text/javascript">
            $(function () {
                //live()对于动态添加的元素，可用
                $('#btntest').live("click", function () {
                    $(this).attr("disabled", "true");
                })
                //live()对于静态的元素，可用
                $('#btntest2').live("click", function () {
                    $(this).attr("disabled", "true");
                })
                //bind()对于动态添加的元素，不可用
                $('#btntest').bind("click", function () {
                    $(this).attr("disabled", "true");
                })
                //bind()对于静态的元素，可用
                $('#btntest2').bind("click", function () {
                    $(this).attr("disabled", "true");
                })
                $("body").append("<input id='btntest' type='button' value='点击或移出就不可用了' />");
            });
        </script>
    </body>

4.切换事件-hover()
hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果
语法格式：
$(selector).hover(over，out);

$(function () {
                $('div').hover(
                function () {
                    $(this).addClass("orange");
                },
                function () {
                    $(this).removeClass("orange")
                })
            });

5.trigger()方法模拟手动触发指定的事件
trigger()方法可以直接手动触发元素指定的事件，这些事件可以是元素自带事件，也可以是自定义的事件
语法格式：
$(selector).trigger(event);

$(function () {
                $("div").bind("change-color", function () {
                    $(this).addClass("color-orange");
                });
                $("div").trigger("change-color");
                $("input").trigger("select");
            });

6.文本框的focus和blur事件
focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件。

$(function () {
                $("input")
                .bind("focus", function () {
                    $("div").html("请输入您的姓名！");
                })
                .bind("blur", function () {
                    if ($(this).val().length == 0)
                        $("div").html("你的名称不能为空！");
                })
            });

7.change事件
当一个元素的值发生变化时，将会触发change事件，例如在选择下拉列表框中的选项时，就会触change事件。

$(function () {
                $('#seltest').bind("change", function () {
                    if ($(this).val() == "苹果")
                        $(this).css("background-color", "red");
                    else
                        $(this).css("background-color", "green");
                })
                $('#input-test').bind("change", function(){
                    if($(this).val() == "")
                    {
                        $(this).css("background-color", "red");
                    }
                })
            });

jQuery动画效果

8.show()和hide()方法显示和隐藏元素
调用格式：
$(selector).hide(speed,[callback])
$(selector).show(speed,[callback])
参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名

<body>
        <h3>show()和hide()方法动画方式显示和隐藏元素</h3>
        <div>
            <h4>我喜欢吃的水果</h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>

        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $('ul').show(3000, function(){
                            $("#hidval").val(1);
                        })
                    } else {
                        $('ul').hide(3000, function(){
                            $("#hidval").val(0);
                        })
                    }
                })
            });
        </script>
    </body>

9.使用toggle()实现显示和隐藏元素
调用格式：
$(selector).toggle(speed,[callback])

<body>
        <h3>toggle()方法的动画切换效果</h3>
        <div>
            <h4>
               <span class="fl">我喜欢吃的水果</span>
               <span class="fr" id="spnTip">显示</span>
            </h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
        </div>

        <script type="text/javascript">
            $(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                    $('ul').toggle("slow", function(){
                     $spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏");
                    })
                });
            });
        </script>
    </body>

10.slideUp()和slideDown()方法的向上向下滑动效果
调用格式：
$(selector).slideUp(speed,[callback])
$(selector).slideDown(speed,[callback])
要注意的是：slideDown()仅适用于被隐藏的元素；slideup()则相反。

$(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $('ul').slideDown("slow", function() {
                            $("#hidval").val(1);
                        })
                    } else {
                        $('ul').slideUp("slow", function(){
                            $("#hidval").val(0);
                        })
                    }
                })
            });

11.slideToggle()方法的向上向下滑动效果
使用slideToggle()方法可以切换slideUp()和slideDown()，即调用该方法时，如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动
调用格式：
$(selector).slideToggle(speed,[callback])

$(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                    $('ul').slideToggle("slow", function() {
                        $spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑");
                    })
                })
            });

12.fadeIn()与fadeOut()方法实现淡入淡出效果
fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果，前者淡入隐藏的元素，后者可以淡出可见的元素
调用格式：
$(selector).fadeIn(speed,[callback])
$(selector).fadeOut(speed,[callback])

$(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $('ul').fadeIn("slow", function() {
                            $("#hidval").val(1);
                        })
                    } else {
                         $('ul').fadeOut("slow", function() {
                            $("#hidval").val(0);
                        })
                    }
                })
            });

13.animate()方法制作简单的动画效果
调用格式：
$(selector).animate({params},speed,[callback])

<style>
    span {
        float: left;
        border: solid 1px #ccc;
        margin: 0px 8px;
        background-color: Blue;
        color:White;
        vertical-align:middle
    }
</style>
<body>
        <h3>制作简单的动画效果</h3>
        <span></span>
        <div id="tip"></div>

        <script type="text/javascript">
            $(function () {
                //span从小变到大，直到宽和高都为80px
                $('span').animate({
                    width: "80px",
                    height: "80px"
                },
                3000, function () {
                    $("#tip").html("执行完成!");
                });
            });
             //span从左向右移动100px，再小变到大，宽和高都增加30px
            $('span').animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: '+=30px',
                        width: '+=30px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
        </script>
    </body>

点击查看更多内容