jQuery元素操作
主要是遍历,创建,添加,删除元素操作
遍历元素each()
jQuery隐式迭代是对同一类元素做了相同的操作,如果想要给同一元素做不同的操作,就需要用到遍历
语法1:
$("div").each(function(index, domEle){xxx;})
- each()方法遍历匹配的每一个元素.主要用DOM处理.each每一个
- 里面的回调函数有2个参数,index是每个元素的索引号,domEle是每个DOM元素对象,不是jQuery对象
- 所以想要使用jQuery方法,需要将这个DOM元素转换成jQuery对象 $(domEle)
语法2:
$.each(object, function(index, element){xxx;})
- $.each()方法可用于遍历任何对象.主要用于数据处理,比如数组,对象
- 里面的函数有2个参数:index是每个元素的索引号,element遍历内容
就比如刚刚的数组:
本文由“壹伴编辑器”提供技术支持
创建元素
语法:
$("<li></li>")
动态的创建了一个<li>
但是只是创建了元素是不会在结构中显示出来的,因为还没有说明要将元素放在哪里
1.内部添加:
追加到元素最后:element.append("内容")
把内容放入匹配元素内部最后面,类似原生的appendChild
添加到元素前面:element.prepend("内容")
本文由“壹伴编辑器”提供技术支持
2.外部添加
放在目标元素前面:element.before("内容")
放在目标元素后面:element.after("内容")
总结
①内部添加元素,生成之后,他们是父子关系
②外部添加元素,生成之后,他们是兄弟关系
本文由“壹伴编辑器”提供技术支持
删除元素
element.remove() 删除匹配的元素(自身)
element.empty() 删除匹配的元素集合中所有的子节点
element.html("") 清空匹配的元素内容(注意里面不能是空的,要加引号)
将匹配的子节点清空
本文由“壹伴编辑器”提供技术支持
jQuery尺寸
本文由“壹伴编辑器”提供技术支持
jQuery位置
位置主要有三个: offset(),position(), scrollTop()/scrollLeft()(可以获取 设置)
(真的好多啊,已经和原生的记混了...)
offset() 获取设置距离文档的位置
position() 获取距离带有定位父级位置 如果没有带定位的父级元素,则以文档为主.(只能获取值不能修改)
我们这样得到的是一个对象,如果只想拿到其中的属性,比如我们可以offset().top,得到它的top属性
返回顶部案例:
和之前一样,做一个当页面滚动到内容下方时,显示"返回顶部"的按钮,点击以后就可以回到页面顶部的功能.
因为scrollTop( )是可以获取和设置的,所以scrollTop(0)就是返回顶部
电梯导航栏案例:
一开始把offset()记成width()了,难住了好久...
东西实在太多,有点记不过来了...
但是这个导航栏其实是有bug的,比如我们重新刷新页面时,即使页面在很下面,导航栏也没有出现
这是因为我们将它放入了滚动事件中,刚刷新完是没有滚动的,所以自然不会出现,所以我们要将里面的代码封装成函数
今天学了好多呀,刚刚其实还做了一个案例,只是我懒得写了..
