過濾器、綁定事件、動畫 - WJ-163－IT工程師數位筆記本

文章出處

一、基本過濾器

語法	描述	返回值
:first	選取第一個元素	單個元素
:last	選取最后一個元素	單個元素
:not(selector)	選取去除所有與給定選擇器匹配的元素	集合元素
:even	選取索引是偶數的所有元素(index 從0開始)	集合元素
:odd	選取索引是奇數的所有元素(index 從0開始)	單個元素
:eq(index)	選取索引等于index的元素	集合元素
:gt	選取索引大于index的元素	集合元素
:lt	選取索引小于index的元素	集合元素
:header	選取所有標題元素，如h1~h6	集合元素
:focus	選取當前獲取焦點的元素	集合元素

二、可見性過濾選擇器

選擇器	描述	返回值
:visible	選取所有可見的元素	集合元素
:hidden	選取所有隱藏的元素	集合元素

三、綁定事件與移除事件

為匹配的元素一次性綁定或移除一個或多個事件時，可以使用綁定事件方法bind()和移除事件方法unbind()

eg:實現光棒效果

        //綁定事件 bind  unbind

        $(function () {
            $("li").bind("mouseover", function () {
               $(this).css("background","pink");

            }).bind("mouseout", function () {
                $(this).css("background", "");

           });

         //移除事件
            $("li").unbind("mouseover mouseout");

        })

補充：也可使用on off、live die、delegate undelegate方案實現綁定移除事件

四、jQuery中的動畫

1、簡單動畫

① 控制元素顯示與隱藏

show()、hide()

②改變元素透明度

fadeIn()、fadeOut()

③改變元素高度

slideUp()和slideDown()

eg:實現淡入淡出效果

    <title></title>
    <script src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnIn").click(function () {
                $("img").slideDown("slow");

            });
            $("#btnOut").click(function () {
                $("img").slideUp("slow");

            });

        })

    </script>
</head>
<body>
    <img src="img/images/iocns.gif" />
    <input type="button" value="淡入" id="btnIn"/>
     <input type="button" value="淡出" id="btnOut"/>
</body>

2、復雜動畫<animate>

  <title></title>
    <style type="text/css">
        div {
        height:20px;
        border:1px solid red;
        }


    </style>
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/jquery-migrate-1.2.0.js"></script>
    <script type="text/javascript">

        $(function () {
            $("[type=button]").click(function () {

                $("div").animate({
                    width: "70%",
                    height: "300%",
                    borderWidth: 10
                    

                }).animate({
                    fontSize:"50px"

                }, {queue:false,duration:5000})

            })

        })


    </script>
</head>
<body>
    <div>我是div</div>
    <input type="button" value="樣式"/>
</body>