5. jq属性操作
元素固有属性:
prop()
适合表单属性操作: disabled/checked/selected
元素自定义属性:
arr()
获取属性: arr("属性"),类似原生的getAttribute
设置属性: arr("属性","属性值"),类似原生的setAttribute
适合自定义属性
6. jq文本属性值
普通元素内容:
html() 相当于原生的innerHTML()
普通元素文本内容:
text() 相当于原生的innerText()
表单的值:
val() 相当于原生的value()
7. 动态创建,添加,删除
创建:
var li = $("<li></li>")
内部添加:(子类添加)
.append()
相当于原生appendChlid,添加在当前元素的子类最后
.prepend()
添加在当前元素的子类最前面
外部添加:(同级添加)
.after()
把元素添加在目标元素后面
.before()
把元素添加在目标元素前面
删除元素:
.remove()
删除元素本身
.empty()
删除所有子节点
.html('')
清空内容
注意:
remove删除的是元素本身,
empty和html删除的是元素里面的内容
8. 事件
8.1 事件对象
element.事件(function(){})
$('div').click(function(){}); 类似原生DOM element.onclick()=function(){}
8.2 事件处理 on()绑定事件
优点:
1.on()可以绑定多个事件:
$('div').on({"事件(例:click)":function(){},})
2.on()可以把父元素的事件,通过事件委托给子元素
$('ul').on("click","li",function(){})
3.on()可以给动态添加的元素绑定事件
通过.append添加
8.3 事件处理 off()解绑事件
$('p').off(); 解绑p元素所有事件处理程序
$('p').off('click'); 解绑p元素上面的点击事件
$('p').off('click','li'); 解绑事件委托
8.4 事件处理 trigger()自动触发事件
可以在定时器中,定时触发其他事件,通过trigger自动触发
element.onclick=function(){}
element.trigger("click")
9. jq位置操作
offset(): 设置或获取元素相对于 文档 的偏移坐标
获取:
offset().top/offset().left
设置:
可以设置
position(): 获取元素相对于 有定位的父级 偏移坐标
只能获取:
position().top/position().left
scrollTop()/scrollLeft(): 设置或获取 滚动条滚动的距离
获取:
scrollTop()/scrollLeft()