属性操作
$().prop() 操作的是固有属性
如果传递一个参数,获取对应属性的值
$().prop(‘id’)
如果传递两个参数,那么是设置值
$().prop(‘id’,‘div’)
$().attr() 操作自定义属性
如果传递一个参数,获取对应属性的值
$().attr(‘index’)
如果传递两个参数,那么是设置值
$().attr(‘index’,‘1’)
$().data() 操作属性
设置的属性会在dom树上吗? 不会,只存在于内容中
$().data(‘属性名’)
利用这个方法能获取H5的自定义属性
文本设置
表单元素
$().val()
如果不带参数代表是获取
如果写参数代表是 设置值
非表单元素
$().html()
如果不带参数代表是获取
如果写参数代表是 设置值
$().text()
如果不带参数代表是获取
如果写参数代表是 设置值
元素操作
遍历
遍历元素对象
$().each(function(index, eleDom){
index 索引
eleDom 元素的DOM对象
})
遍历数据
可以遍历 数组、对象、集合
$.each(data, function(param1,param2){
如果是遍历数组 param1 代表是索引,param2 代表是索引对应的值
如果是遍历对象 param1 代表是属性名 param2 代表是属性值
})
创建一个元素对象
var $div =
(
′
<
d
i
v
>
<
/
d
i
v
>
′
)
此
时
创
建
的
元
素
对
象
还
在
内
存
中
添
加
到
d
o
m
树
p
a
r
e
n
t
.
a
p
p
e
n
d
(
('<div></div>') 此时创建的元素对象还在内存中 添加到dom树 parent.append(
(′<div></div>′)此时创建的元素对象还在内存中添加到dom树parent.append(div) 追加子孩子
parent.prepend($div) 添加第一个子孩子
兄弟添加
$().after() 添加到对应元素的下一个兄弟位置
$().before() 添加到对应元素的上一个兄弟位置
删除
$().remove() 自杀
$().empty() 清空所有的子节点
获取父辈元素
$().parents() 里面如果不放参数,那么获取的是所有的父辈元素的集合;如果里面放参数,那么获取的是对应的父辈元素
元素的尺寸和位置
尺寸
$().width()|height()
获取|设置 的是内容的宽高
$().innerWidth() | innerHeight()
获取|设置 的是宽高 内容的宽高+ padding
$().outerWidth() | outerHeight()
获取|设置的是宽高 内容的宽高 + padding + border
如果里面的参数是true 那么代表的是获取是: 内容的宽高 + padding + border + margin
位置
$().offset()
获取|设置 的是 元素相对应文档的距离
两个属性: left | top
$().position()
获取 的是 元素 相对于带有定位的最近的父辈元素的距离,如果如被元素都没有定位,那么 获取的是参照body的距离
$().scrollTop()|scrollLeft()
获取|设置的是 滚动(水平|垂直)出去的距离