module5-04-jQuery 节点操作和元素尺寸
一、jQuery 创建、追加、克隆元素方法
1.1 jQuery 创建元素
(1)使用$() 创建
-
语法:$('<li><
(2)追加元素
-
父子操作
-
在父元素最后追加
-
① 父元素jQuery对象.append(新创建的jQuery对象)
-
② 新元素JQ对象.appendTo('父元素选择器' 或 父元素JQ对象)
-
-
在父元素最前面追加
-
① 父JQ.prepend(新JQ)
-
② 新JQ.prependTo('父选择器' 或 父JQ)
-
-
-
兄弟操作
-
元素后面追加兄弟
-
JQ对象.after(新JQ)
-
新JQ.insertAfter(JQ对象)
-
-
元素前面追加兄弟
-
JQ对象.before(新JQ)
-
新JQ.insertBefore('选择器' 或 JQ对象)
-
-
1.2 jQuery 删除、清空元素
(1)删除元素
-
语法:JQ对象.remove()
-
删除谁就让谁调用这个方法
(2)清空元素
-
① JQ对象.empty():推荐使用,清空元素及其相关事件
-
② JQ对象.html(''):仅仅清空内部元素,不清理内存的元素事件
1.3 jQuery 克隆元素
-
语法:JQ对象.clone(布尔值):返回克隆好的元素
-
参数:
-
默认是false:
-
仅仅克隆内容
-
-
true:
-
克隆内容及事件
-
-
二、操作元素
2.1 操作元素尺寸方法
-
分别有width、innerWidth、outerWidth(width改为height即获取高度部分)
(1)width()、height()
-
获取元素盒子模型内容部分 content
(2)innerWidth()、innerHeight()
-
获取元素盒子模型边框里面部分 padding、content
(3)outerWidth()、outerHeight()
-
获取元素盒子模型边框及其内部部分 border、padding、content
-
当设置这些方法调用时候传入参数,即修改大小的时候修改的都是内容(width和height)的值,padding和border不变
2.2 jQuery 操作元素的位置
(1)获取元素距离文档的位置
-
语法:JQ对象.offset()
-
返回一个对象,里面包含了元素的left、right位置
-
永远参照浏览器窗口,和定位没有关系
(2)获取元素距离父级定位元素的距离
-
语法:JQ对象.position()
-
返回一个包含left、right的对象
-
参照最近父级定位元素,返回距离其的left和top
(3)操作滚动条卷走的距离
-
改方法反应的是已滚动距离
-
获取:
-
语法:JQ对象.scrollTop()
-
返回数字
-
-
设置:
-
语法:JQ对象.scrollTop(数字)
-
三、综合案例
3.1 固定导航
-
监控页面滚动$('body, html').css('scrollTop')来设置样式
3.2 返回顶部
-
通过改变scrollTop来改变页面滚动到哪里