一:jQuery 属性操作
1:设置或获取元素固有属性值 prop()
//1. 获取属性语法
prop(''属性'');
//2. 设置属性语法
prop(''属性'', ''属性值'');
2:设置或获取元素自定义属性值 attr()
//1. 获取属性语法
attr(''属性'');
//2. 设置属性语法
attr(''属性'', ''属性值''); // 类似原生 setAttribute()
改方法也可以获取 H5 自定义属性
3:数据缓存 data()
data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。
//1. 附加数据语法
data(''name'',''value''); // 向被选元素附加数据
//2. 获取数据语法
date(''name''); // 向被选元素获取数据
同时,还可以读取 HTML5 自定义属性 data-index ,得到的是数字型
二:jQuery 内容文本值
1:普通元素内容 html()( 相当于原生inner HTML)
html() // 获取元素的内容
html(''内容'') // 设置元素的内容
2:普通元素文本内容 text() (相当与原生 innerText)
text(); // 获取元素的文本内容
text(''文本内容'') // 设置元素的文本内容
3:表单的值 val()( 相当于原生value)
val() // 获取表单的值
val(''内容'') // 设置表单的值
三 :jQuery 元素操作
1:遍历元素
//方法一
$("div").each(function (index, domEle) {
xxx; })
- each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
- 里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个DOM元素对象,不是jquery对象
- 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象 $(domEle)
//方法二
$.each(object,function (index, element) {
xxx; })
- $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
- 里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容
2:创建元素
$('' '');
3:添加元素
//内部添加
element.append(''内容'') //把内容放入匹配元素内部最后面,类似原生 appendChild。
element.prepend(''内容'') //把内容放入匹配元素内部最前面。
//外部添加
element.after(''内容'') // 把内容放入目标元素后面
element.before(''内容'') // 把内容放入目标元素前面
- 内部添加元素,生成之后,它们是父子关系。
- 外部添加元素,生成之后,他们是兄弟关系。
4:删除元素
element.remove() // 删除匹配的元素(本身)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('''') // 清空匹配的元素内容
- remove 删除元素本身。
- empt() 和 html(’’’’) 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容。
四:jQuery 尺寸
属性 | 描述 |
---|---|
width() / height() | 取得匹配元素宽度和高度值只算width / height |
innerWidth() / innerHieght() | 取得匹配元素宽度和高度值包含padding |
outerWidth() / outerHeight() | 取得匹配元素宽度和高度值包含padding . border |
outerWidth(true)/ outerHeight(true) | 取得匹配元素宽度和高度值包含padding . borde、margin |
- 以上参数为空,则是获取相应值,返回的是数字型。
- 如果参数为数字,则是修改相应值。
- 参数可以不必写单位
五:jQuery位置操作
1:offset() 设置或获取元素偏移
- 相对于文档的偏移坐标,跟父级没有关系。
- 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
- 可以设置元素的偏移:offset({ top: 10, left: 30 });
- 父盒子加定位,依旧依据文档的距离
2:position() 获取元素偏移
- 相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
- 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定位父级左侧的距离。
- 该方法只能获取,不可以设置。
3:scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
- scrollTop() 方法设置或返回被选元素被卷去的头部。
- 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。