jQuery操作DOM
1.属性操作
attr
设置单个 attr(name,value)//字符串类型
设置多个 attr(obj)
获取 $("div").attr(name)
prop 对于 boolean布尔类型 标签属性操作
eg:checked disabled selected
设置 prop("checked","true")
获取 prop("checked")
2.操作表单值 val()
获取 $("input").val()
设置 $("input").val("hello word")
3.尺寸操作 返回值均为数值类型
width() 返回content 宽度
innerWidth() content + padding
outerWidth() content + padding + border
outerWidth(true) content + padding + border + margin
height() innerHeight() outerHeight() outerHeight(true)
4.offset()
1.获取:获取相当于整个页面的top和left
返回值:对象 {top:100,left:100}
2.设置:offset({top:100,left:100})
5.position()
获取相对有定位父元素的偏移 返回一个对象
返回值:对象 {top:100,left:100}
注意:计算偏移,不计算margin
6.scrollTop() scrollLeft()
获取滚动条滚去的上边或左边的距离
$(window).scrollTop()
$(window).scrollLeft()
给页面设置滚动条滚去的距离
$("html).animate({scrollTop:0})
7.事件发展历程
简单事件(不能同时绑定多个)
=>bind("click mouseenter",function(){})
bind({click:function(){} })
缺点:不支持动态创建的元素绑定事件
事件代理
delegate("p","click",function(){})
on进行统一
1.注册事件
on("click",function(){})
2.委托事件
$("div")on("click","p",function(){})
事件委托优点:
1.重要绑定一次
2.新添加的元素也有事件
委托事件中的this指向当前目标元素
8.事件解绑
unbind undelegate(不用)
off()
1.off()移除所有事件
2.off("click") 移除click事件
3.off("click","**")移除委托事件
9.事件触发
1.$("#txt").focus()
2.$("#txt").trigger("focus");触发事件的同时,也会触发浏览器默认行为
3.$("#txt").triggerHandler("focus");只触发事件,不触发浏览器默认行为
10.事件对象
jquery 中的事件对象 就是对 事件对象的 一个兼容封装
event.keyCode 获得键盘码
阻止冒泡:
1.return false;
2.e.stopPropagation()
阻止浏览器默认行为:
1.return false;
2.e.preventDefault();
