前端基础之JQuery (2)(属性操作,文本属性,动态添加,事件对象 )

30 阅读1分钟

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