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>
- 还没有人评论，欢迎说说您的想法！
客服
