jQuery 02
导读
- 属性操作 prop attr data
- jQuery 内容文本值
- JQuery 元素操作 创建 遍历 添加 删除
- jQuery 尺寸、位置操作 尺寸 位置
5. jQuery 属性操作
5.1 设置或获取元素固有属性值 prop()
- 所谓元素固有属性就是元素本身自带的属性,比如
<a>
里面的href
,比如<input>
元素里面的type
获取语法
prop("属性")
设置属性语法
prop("属性","属性值")
案例
$("input").change(function(){
console.log($(this).prop("checked"));
})
5.2 设置或获取元素自定义属性值 attr()
- 用户自己给元素添加的属性,我们称之为自定义属性,比如给div添加index=1
1. 获取属性语法
attr("属性") // 类似于原生 getAttribute
2. 设置属性语法
attr("属性","属性值") // 类似于原生 setAttribute
- 该方法也可以获取H5自定义属性
5.3 数据缓存 data()
- data()方法可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新,之前存放的数据也将被移除
1.附加数据语法
data("name","value") // 向被选元素添加数据
2. 获取数据语法
data("name")
- 同时,还可以读取HTML5自定义属性 data-index 得到的是数字型
6. jQuery 内容文本值
- 主要针对元素的 内容 还有 表单的值 操作
6.1 普通元素内容 html() (相当于原生inner HTML)
html() // 获取内容
html("内容") // 设置内容
6.2 普通元素文本内容 text() (相当于原生innerText)
text() // 获取内容
text("内容") // 设置内容
6.3 表单元素的值 val() (相当于原生value)
val() // 获取内容
val("内容") // 设置内容
- 返回指定祖先元素
console.log($(".checkall").parents("#app"));
- 返回两位小数
let price = (n * p).toFixed(2);
7. JQuery 元素操作
- 主要是遍历 创建 添加 删除元素操作
7.1 遍历元素
-
jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素不同的操作,需要用到遍历
-
语法1
$("div").each(function(index,domEle){ xxx; })
- each方法遍历匹配每一个元素,主要用DOM处理。each每一个
- 回调函数有两个参数 index 是每个元素的索引;domEle是每个DOM对象,不是jQuery对象
- 如果想要使用 jQuery方法,就需要转换成 jQuery对象 $(domEle)
- 语法2
$.each(object,function(index,element){ xxx; })
- $.each() 方法可用于遍历任何对象。主要用于数据处理,比如数组、对象
- 函数有2个参数 index 是每个元素索引号 element 遍历内容
7.2 创建元素
- 语法
$("<li></li>");
- 动态创建了一个li标签
7.3 添加元素
- 内部添加
element.append("内容")
- 把内容放入匹配元素内部最后面,类似原生
appendChild
element.prepend(li)
- 把内容放入匹配元素内部最前面
- 外部添加
element.after("内容"); // 内容放到目标元素后面
element.before("内容"); // 内容放到目标元素前面
- 内部添加元素,生成之后是父子关系
- 外部添加元素,生成之后是兄弟关系
7.4 删除元素
element.remove() // 删除匹配的元素(本身)
element.empty() // 删除匹配元素的内容及子节点
element.html("") // 删除匹配元素的内容及子节点
8. jQuery 尺寸、位置操作
8.1 jQuery 尺寸
width() / height()
- 取得匹配元素宽度和高度值 只算 width height
innerWidth() / innerHeight()
- 取得匹配元素宽度和高度值 包含 padding
outerWidth() / outerHeight()
- 取得匹配元素宽度和高度值 包含 padding border
outerWidth(true) / outerHeight(true)
- 取得匹配元素宽度和高度值 包含 padding border margin
8.2 jQuery位置
- 位置主要有三个
offset()
position()
scrollTop()
/scrollLeft()
1. offset()
设置或获取元素偏移
offset()
方法设置或返回被选元素相对于 文档body 的偏移坐标,跟父级没有关系- 该方法有2个属性left、top。
offset().top
用于获取距离文档顶部的距离,offset().left
用于获取距离文档左侧的距离 - 可以设置元素的偏移:
offset({top:10,left:30})
;
2. position()
获取元素偏移
position()
方法用于返回被选元素相对于 带有定位的父级 偏移坐标,如果父级都没有定位,则以文档为准
3. scrollTop()
/scrollLeft()
设置或获取元素被卷去的头部和左侧
scrollTop()
方法设置或返回被选元素被卷去的头部scrollLeft()
方法设置或返回被选元素被卷去的左部