01-JS-03

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();