jQuery事件和动画

事件，其实没什么好说的，因为一直都在用，就说几个荣誉出错的吧

bind()绑定事件

 <h5>标题</h5>
    <div class="1">qq</div>
    <div class="summary">
        asldjfalsjflasjdfklasjdflaksjflasjflsdjfla
        aslkdjflasjdflasjdlkfjaskldfjas'
        asdflasjdfla;sfj
    </div>

$(function () {
            $("h5").bind("click", function () {
                var t = $(this).next("div");  这个地方要注意一下哈，next()就是指定其相邻的下一个兄弟节点，默认不穿参数，你非要传也可以，单参数必须是其相邻的下一个节点，否则就会undefined
                console.log(t.html());
                if (t.is(":visible")) {
                    t.hide();
                }
                else {
                    t.show();
                }
            })
        })

上面的click事件里用来区分隐藏还是显示是用了节点的状态，换个事件就简单好多

$(function () {
            $("h5").bind("mouseover", function () {
                var t = $(this).next("div");              
                    t.show();
            })
            $("h5").bind("mouseout", function () {
                var t = $(this).next("div");
                t.hide();
            })
        })

但是呢，这样写起来也麻烦简化一点，就直接去掉bind()，就成了最熟悉的写法。

  $(function () {
            $("h5").mouseover( function () {
                var t = $(this).next("div");              
                    t.show();
            })
            $("h5").mouseout(function () {
                var t = $(this).next("div");
                t.hide();
            })
        })

合成事件：hover()和toggle()

hove()就是鼠标悬浮和离开时的切换，只不过参数是2个function而已

$(function () {
            $("h5").hover(function () {
                var t = $(this).next("div");
                t.show();
            },
            function () {
                var t = $(this).next("div");
                t.hide();
            })
        })

toggle()方法就比较有意思了，它必须的点击，如果有n个参数，那你点击n此，每次执行一个参数，大于n此后，就会从第一次点击，继续开始，而且哈，toggle()还可以切换当前元素的可见状态，对于那种显示隐藏来回切换来说，简直了。

 $(function () {
            $("h5").toggle(function () {
              $(this).next("div").toggle();      最开始是显示的，第一次点击，隐藏了       
            },
            function () {
                alert("我还是隐藏的");    第二次 只弹出框
            },
            function () {
                $(this).next("div").toggle();    第三次   显示了
                alert("显示了");
            })
        })


 <h5>标题</h5>
    <div class="1">qq</div>
    <div class="summary">
        asldjfalsjflasjdfklasjdflaksjflasjflsdjfla
        aslkdjflasjdflasjdlkfjaskldfjas'
        asdflasjdfla;sfj
    </div>

既然如此，以后对于点击隐藏显示的就方便多了，666666

 $(function () {
            $("h5").click(function () {
              $(this).next("div").toggle();             
            })
        })

 对于事件也可以移除

$("#t").unbind();移除指定元素上的所有事件

$("#t").unbind("click");移除指定元素上的所有click事件

$("#t").unbind("click",myFunction);移除指定元素上的function名为myFuntion的click事件。

 

模拟事件：

我们可以自定义一个事件，然后模拟它被自动调用

 $(function () {
            $("h5").bind("myClick",function () {              
                alert("123");
            })
            $("h5").trigger("myClick");
        })

因为是自定义的事件，所以一定要用bind进行绑定。

另外trigger还有第二个参数，主要传递给事件处理函数的附加数据，通常以数则形式传递

  $(function () {
            $("h5").bind("myClick", function (event, c1, c2) {
                alert("123" + c1 + c2);
            })
            $("h5").trigger("myClick", ["qq", "ww"]);
        })

注意要用数组的形式，然后注意，自定义的事件处理函数的参数一定要有event啊，没有会出不来要显示的结果，至于为什么，我也不知道。

另外，有些时候我们用了trigger来触发事件，但是会造成执行浏览器的默认行为，利用触发focus，结果是不仅触发了获得焦点时候的事件，还是使得文本框自动获得焦点，如果想取消浏览器的默认行为，而且还要继续触发事件的话，可以使用triggerHandler()方法

$("input").triggerHandler("focus");

 

==================================================动画====================================