為了賬號安全,請及時綁定郵箱和手機立即綁定

前端程序員應該知道的jQuery知識點

2016.06.12 19:47 7551瀏覽

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>
點擊查看更多內容

本文原創發布于慕課網 ,轉載請注明出處,謝謝合作

118人點贊

若覺得本文不錯,就分享一下吧!

評論

相關文章推薦

正在加載中
意見反饋 幫助中心 APP下載
官方微信

舉報

0/150
提交
取消
lpl竞猜