jQuery中的事件与动画
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
例题:
代码截图:
代码:
<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>
上一篇: 心有千千结,吐槽开开心
下一篇: 很写实的幽默情感箴言