jQuery 中部分元素属性与内容操作

元素属性&内容操作

//内置属性
jquery对象.prop('id')  //获取id
jquery对象.prop('id','myname') //设置id
//自定义属性
jquery对象.attr('index')  //获取index属性
jquery对象.attr('index','myname') //设置index属性值
jquery对象.attr('data-index','myname') //设置data-index属性值
//缓存数据
jquery对象.data('index') //获取到之前用data方法存入的index属性值或者 data-index
jquery对象.data('index',10)//存入缓存数据index值为10

//获取普通元素内容
jq对象.html()  //获取到的内容包含标签相当于innerHTML
jq对象.html(值) //将元素内容设置为某个值
jq对象.text() //获取到的内容仅包含纯文本 相当于innerText
jq对象.text(值) //将元素文本内容设置为某个值
jq对象.val() //获取表单元素的值
jq对象.val(值) //设置表单元素的值

元素遍历

// jQuery通过each方法遍历元素
$('div').each(function(i,ele){
    console.log(i,ele)  //分别输出每个div的索引及dom对象
})
$('div').each(function(i,ele){
    console.log(i,ele)  //分别输出每个div的索引及dom对象
    return false //此时回调函数只会被调用一次，return false中止遍历
})

//$.each 为通用工具方法，能遍历元素、数组、对象等,通常用于遍历数据
$.each([1,2,3],function(i,ele){
    console.log(i,ele) //分别输出  0 1 , 1 2 , 2 3
})
$.each({name:'jim',age:20},function(i,ele){
    console.log(i,ele) //分别输出  name jim , age 20
})

元素创建 添加 删除 克隆

// 元素创建
var li = $('<li></li>')
// 元素添加
$('ul').append(li)  //追加到内部的最后面
$('ul').append('<li>新添加的</li>')
$('ul').prepend(li) //追加到内部的最前面

$('li:first').after(li) //追加到同级的后面
$('li:first').before(li) //追加到同级的前面

// 元素删除
$(选择器).remove() //删除选择器选中的元素,自杀
$(选择器).empty()/html('') //删除选择器选中的元素的所有内容

// 元素克隆
$(选择器).clone() //默认会克隆元素的内容
$(选择器).clone(true) //会克隆元素的内容及事件

元素尺寸、位置操作

//尺寸
jq对象.width() //获取width的值 数字型
jq对象.width(值) //设置width
jq对象.innerWidth() //获取padding+width的值 数字型
jq对象.innerWidth(值) //设置
jq对象.outerWidth() //获取width+padding+border的值 数字型
jq对象.outerWidth(值) //设置
jq对象.outerWidth(true) //获取width+padding+border+margin的值
//height同理

//位置
jq对象.offset() //获取相对于文档的偏移量 .left 左偏移量  .top 上偏移量
jq对象.offset({top:值1,left:值2}) //设置相对于文档的偏移量

jq对象.position()//获取相对于最近外层定位元素的偏移量 .left 左偏移量  .top 上偏移量 只能获取

//滚动距离
jq对象.scrollTop()  //不传参数时获取垂直滚动距离，传参数时设置
jq对象.scrollLeft() //不传参数时获取水平滚动距离，传参数时设置