jQuery 属性尺寸位置

1. jQuery 属性操作

---

1.1 元素固有属性 prop

元素固有属性就是元素本身自带的属性，如 <a> 标签里面的 href

• 获取：prop("属性")

• 设置：prop("属性", "属性值")

注意：prop 除了普通属性操作，更适合操作表单属性

---

1.2 元素自定义属性 attr

我们给元素添加的属性，称自定义属性，如：给 div 添加 index="1"

• 获取：attr("属性")（似 getAttribute）
• 设置：attr("属性", "属性值")（似 setAttribute）

注意：可操作 H5 自定义属性（需加 data-）

---

1.3 数据缓存 data

该方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构

一旦页面刷新，之前存放的数据都将被移除

• 向被选元素附加数据：data("name", "value")
• 向被选元素获取数据：data("name")

注意：可读取 H5 自定义属性，得到的是数字型（无需加 data-）

---

2. jQuery 文本属性值

主要针对元素的内容还有表单的值操作

• 普通元素内容：html("内容")（同 innerHTML）
• 普通元素文本内容：text("内容")（同 innerText）
• 表单的值：val("内容")（同 value ）

注意：括号有内容就设置内容，括号为空则获取内容

---

3. jQuery 元素操作

---

3.1 遍历

隐式迭代是对同一类元素做同样的操作， 如果想给同一类元素做不同操作，就要用遍历

方法一：遍历匹配的每一个元素，主要用 DOM 处理

语法：元素.each(function(index, domEle){回调函数])

• index：每个元素的素引号
• demEle：每个 DOM 元素对象，不是jquery对象

---

方法二：可用于遍历任何对象，主要用于数据处理，比如数组，对象

语法：$.each(对象, function(index, domEle){回调函数])

• index：每个元素的素引号
• demEle：每个遍历的元素

注意：两种方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想使用 jQuery 方法需要转换 $(domEle)

$.each({
	name: "andy",
	age: 18
	}, function(i, ele) {
	console.log(i); // 每个属性名
	console.log(ele); // 每个属性值
});

---

3.2 创建

语法：$("<li></li>")（动态的创建了一个 <li>）

注意：里面直接当 html 标签的写，可包含多个标签

---

3.3 添加

可为目标元素添加孩子、兄弟

内部（孩子）：把内容放入目标元素内部的最前 / 后面

• 最后：append("内容")
• 最前：prepend("内容")

外部（兄弟）：把内容放入目标元素的最前 / 后面

• 最后：after("内容")
• 最前：before("内容")

---

3.4 删除

• 删除目标元素（本身）：元素.remove()
• 删除目标元素里面的所有子节点：元素.empty()
• 清空目标元素的所有内容：元素.html("")

注意：后两种方法作用等价，都可删除元素里的内容，只不过html还可以设置内容

---

4. jQuery 尺寸操作

元素宽高的获取和设置，且不一样的API对应不一样的盒子模型（高同理）

语法	用法
width()	获取匹配元素宽度值（width）
innerWidth()	获取匹配元素 width + padding
outerWidth()	获取匹配元素 width + padding + border
outerWidth(true)	获取匹配元素 width + padding + border + margin

• 以上参数为数字时，则修改相应值（只修改其中的 width）
• 返回值：数字（不带单位）

---

5. jQuery 位置操作

---

5.1 设置或获取元素偏移 offset

该方法设置或返回被选元素距离文档顶部 / 左侧的距离，跟父级没有关系

• 获取：offset.top（左侧同理）
• 设置：offset({ top: 数值, left: 数值 })

---

5.2 获取元素偏移 position

该方法返回被选元素相对于最近一级带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准

• 获取：position().top（左侧同理）

---

5.3 设置或获取元素被卷去部分 scrollTop

该方法设置或返回被选元素被卷去的头部或左侧

• 获取：scrollTop() （左侧同理）
• 设置：scrollTop(数值) （无需单位）

---