本文已参与「新人创作礼」活动,一起开启掘金创作之路。
9.元素操作
元素遍历
-
each(function (index,domEle){ });
$(this).each(function(index,domEle){ …… }) //index:此时遍历到元素的索引号 //domEle:此时遍历到的DOM对象，用$(domEle)转换为jQuery对象 -
("this"),function(index,domEle){});
$.each(object,function(index,domEle){ …… }) //$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象 //里面的函数有2个参数: index是每个元素的索引号; element 遍历内容
创建元素
var li=$("< li>value< /li>");
var li=$("<li>value</li>");
//创建li节点
添加元素
//内部添加
$(this).append(li);//将创建的li添加到this内容的最后面
$(this).prepend(li);//将创建的li添加到this内容的最前面
//外部添加
$(this).after(li);//将创建的li添加到this元素的后面
$(this).before(li);//将创建的li添加到this元素的前面
删除元素
$(this).remove();//删除this元素本身
$(this).empty();//删除this元素的所有子元素
$(this).html("");//删除this元素的所有子元素
10.元素尺寸操作
| 语法 | 用法 |
|---|---|
| width()/height() | 取得匹配元素宽度和高度值只算width / height |
| innerWidth()/ innerHieght() | 取得匹配元素宽度和高度值包含padding |
| outerWidth() / outerHeight() | 取得匹配元素宽度和高度值包含padding . border |
| outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值包含padding . borde、margin |
11.元素位置
- offset() 设置或获取元素偏移值
- offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
- 该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。
- 可以设置元素的偏移∶offset({ top: 10, left: 30 });
- position() 获取带有定位父亲相对偏移值
- position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
- 只能获取值，不能设置值
- scrollTop()scrollLeft() 设置或获取元素被卷去的头部和左侧
- scrollTop()方法设置或返回被选元素被卷去的头部。
12.on事件注册
- on方法在匹配元素上绑定一个或多个事件的事件处理函数
element.on(events,[select],fn);//多个事件绑定一个相同的函数
element.on({
event1:fn1,
event2:fn2,
……
})//多个事件绑定不同的函数
- events:—个或多个用空格分隔的事件类型，如"click"或"keydown”。
- selector:元素的子元素选择器。
- fn:回调函数即绑定在元素身上的侦听函数。
- 可以事件委派操作。事件委派的定义就是，把原来给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$("ul").on(event,"li",function(){})
//给父类绑定事件，使得子类中的所有li都绑定，事件委托
- 可以给动态创建的元素绑定事件
$("ol li").click(fn);//无法绑定后面动态创建的元素
$("ol").on("click","li",fn);//可以绑定后面创建的元素
var li=$("<li></li>");
$("ol").append(li);
