module5-04-jQuery 节点操作和元素尺寸

jQuery 节点操作和元素尺寸

一、jQuery 创建、追加、克隆元素方法

1.1 jQuery 创建元素

（1）使用$() 创建

• 语法：$('<li></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来改变页面滚动到哪里

3.3 楼梯效果

• 跟返回顶部同理，利用排他