欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery中的事件与动画

程序员文章站 2022-04-17 16:31:18
1:加载DOM在JavaScript中使用window.onload事件作为窗体加载事件(它在页面所有数据加载完成之后才会执行)在jQuery里面中使用 $(document).ready(function()) 作为窗体加载事件(在DOM加载完成之后就会执行)2:事件绑定 在文档加载完成后,可以使 ......

1:加载dom
在javascript中使用window.onload事件作为窗体加载事件(它在页面所有数据加载完成之后才会执行)
在jquery里面中使用 $(document).ready(function()) 作为窗体加载事件(在dom加载完成之后就会执行)

2:事件绑定
   在文档加载完成后,可以使用bind()方法来对匹配元素进行特定事件的绑定
   bind(type [data],function)
   例子:$("div").bind("mouseover mouseout click",function(){  })
   unbind() 对匹配的元素进行移除事件的方法  unbind("type")   type--事件类型

3:常用的事件
   blur 失去焦点  focus 获取焦点  focusin focusout load  unload click dblclick mousedown mouseup
   mousemove mouseover  mouseout  mouseenter  mouveleave change select submit  keydown  keypress  
   keyup error

4: 阻止事件冒泡: event.stoppropagation()  

5:触发事件  trigger()

   $("#id").trigger("click") 常用模拟触发事件

6:事件对象的属性

   event.type  ----获取事件类型
   event.stoppropagation() -----阻止事件冒泡
   event.pagex   ---获取光标相对于页面的x坐标
   event.pagey    --获取光标相对于页面的y坐标
   event.target   --获取事件源对象(获取到触发事件的元素)
   event.which    --在鼠标单击事件中获取鼠标的左中右键
   event.metakey  --为键盘事件中获取ctrl键
   
   event.metakey :jquery1.4以及之前ctrl按下为true 后续版本改为false

7: 动画
   show("速度")   显示元素
   hide("速度")   隐藏元素
   toggle()       切换效果
   
   fadeout() fadein() 这两个方法是改变元素的不透明度(实现隐藏和显示的效果)
   slideup() slidedown() 这两个方法是改变元素的高度
   自定义动画:animate(params,speed,function(){ }) //一个包含样式属性及值的映射  速度  在动画完成之后执行的方法
   mousedown
   mouseup
   mousemove

例题:

jQuery中的事件与动画

代码截图:

jQuery中的事件与动画

代码:

<script type="text/javascript">
        //鼠标是否移动
        var moving = false;
        //图形上次移动位置
        var lasleft, lastop;
        $(function () {
            $("#mybox").mousedown(function (e)
            {
                moving = true;
                //鼠标相对于窗口的位置
                var mx = e.pagex;
                var my = e.pagey;
                //图形相对于窗口的位置
                var dx = $("#mybox").css("left");
                var dy = $("#mybox").css("top");
                //鼠标相对于图形的位置,要先去掉图形的px才能进行计算
                //去掉px
                dx = parseint(dx.substring(0, dx.length - 2));
                dy = parseint(dy.substring(0, dy.length - 2));
                //计算
                lasleft = mx - dx;
                lastop = my - dy;

            }).mouseup(function ()
            {
                moving = false;
            });
            $(document).mousemove(function (e)
            {
                if (moving) {
                    $("#mybox").css("left", (e.pagex - lasleft) + "px").css("top", (e.pagey - lastop) + "px");
                }
            });
        });
        

    </script>