jQuery笔记(3)

jQuery元素操作

主要是遍历,创建,添加,删除元素操作

遍历元素each()

jQuery隐式迭代是对同一类元素做了相同的操作,如果想要给同一元素做不同的操作,就需要用到遍历

语法1:

$("div").each(function(index, domEle){xxx;})

1. each()方法遍历匹配的每一个元素.主要用DOM处理.each每一个
2. 里面的回调函数有2个参数,index是每个元素的索引号,domEle是每个DOM元素对象,不是jQuery对象
3. 所以想要使用jQuery方法,需要将这个DOM元素转换成jQuery对象 $(domEle)

语法2:

$.each(object, function(index, element){xxx;})

1. $.each()方法可用于遍历任何对象.主要用于数据处理,比如数组,对象
2. 里面的函数有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的,比如我们重新刷新页面时,即使页面在很下面,导航栏也没有出现

这是因为我们将它放入了滚动事件中,刚刷新完是没有滚动的,所以自然不会出现,所以我们要将里面的代码封装成函数

今天学了好多呀,刚刚其实还做了一个案例,只是我懒得写了..