三：Jquery-event

一:jq中事件
1.页面载入事件

    ready()方法
    格式:
        $(document).ready(function(){});
        $(function(){});

2.绑定事件

    click(),dblclick(),focus(),blur(),mouseover(),mouseout(),change(),select()
    keydown(),keyup()

js事件模型:

        第一种:在html标签上增加事件属性,让属性值等于处理该事件的函数名或程序代码
        第二种:在js代码中设置元素的事件属性,让属性值等于处理该事件的函数名或程序代码

jq事件一种统一的事件模型:

        在页面加载完毕后,为每个选取元素的事件绑定响应函数
        $(function(){
            $("#btn").click(function(){//执行代码});    //统一的事件模型
            $("#btn").bind(type,function(){//执行代码});    //type表示事件类型
            //为所选对象绑定多个事件处理函数
            $("#btn").bind({type:function(){//执行代码},type:function(){//执行代码}});
        });

3.切换事件

    hover():使元素在鼠标移入与移出的事件中进行切换
        hover(over,out);    //over:移入时处理的函数,out:移出时处理的函数
    toggle():依次调用N个指定的函数,直到最后一个,然后重复对函数进行调用
        toggle(
            function(){},
            function(){},
            function(){},...
        );

4.其它事件

    one():为所选的元素绑定一个仅触发一次的处理函数
        one(type,function(){});     //type表示事件类型
    trigger():在所选的元素上触发指定类型的事件
        trigger(type);  //type表示触发事件的类型

二:事件机制

事件在触发后分为两个阶段:一个是捕获(capture),另一个是冒泡(bubbling).
    往往事件触发后,直接执行冒泡过程,冒泡实质就是事件执行中的顺序.(大部分浏览器不支持捕获,jq也不支持)
    
(单击按钮,按钮的父标签div的单击事件也被触发,同时div的父标签body的单击事件也随之触发)
冒泡过程:整个事件波及的过程就行水泡一样向外冒,故称为冒泡过程
停止事件的冒泡过程:可以通过return false;语句实现.(单击按钮就执行单击事件,不触发其它父元素的单击事件)

三:开关

toggleClass():样式添加/删除开关
hover():鼠标移入/移出开关
toggle():显示/隐藏开关(没参数时)

四:获取元素的宽高

$("body").css("width");     //获取页面内容css样式中的宽度属性值
$("body").height();         //获取页面内容的高度
$(window).width();          //获取浏览器窗口的宽度
$(window).css("height");    //获取浏览器窗口css样式中的高度属性值
css("width/height"):值得形式是包含了单位"px"的字符串 -- "160px"
height()/width():值是数字型的,更方便进行数学运算 -- 160

猜你喜欢