Document

> 笔记来源：拉勾教育 - 大前端就业集训营 > > 文章内容：学习过程中的笔记、感悟、和经验 # jQ节点操作和元素尺寸 ## 创建、追加元素 **创建元素：`$( 字符串类型解构 )`** - **向父元素结尾添加元素：** - **`父元素jq对象.append( 新创建的元素 )`** - **`新创建元素.appendTo( 父元素jq对象 / 选择器 )`** - **向父元素开头添加元素** - **`父元素jq对象.prepend( 新创建的与元素 )`** - **`新创建元素.prependTo( 父元素jq对象 / 选择器 )`** - **向兄弟元素后面添加元素** - **`兄弟元素jq对象.after( 新创建的元素 )`** - **`新创建的元素.insertAfter( 兄弟元素jq对象 / 选择器 )`** - **向兄弟元素前面添加元素** - **`兄弟元素jq对象.before( 新创建的元素 )`** - **`新创建的元素.insertBefore( 兄弟元素jq对象 / 选择器 )`** ```html

我是旧的p标签

我是旧的p标签，我是me

我是旧的p标签

``` ## 删除、清空元素 - **删除元素：`jq对象.remove()`** - **清空元素内部内容** - **`jq对象.empy()`：直接清空全部内容，比较彻底，建议使用** - **`jq对象.html(' ')`：相当于把内部内容替换为空，但是内如如果之前定义过事件等内容无法被清空** ```html

我是旧的p标签

我是要删除的节点

我会被清空，如果你看到了我说明你写错了

``` ## 克隆元素 **语法：`jq对象.clone( true / false)`** **参数**： - **true表示全部克隆，即克隆内容，也克隆事件** - **flase（默认值）表示仅仅克隆内容** ```html

我是一个p，如果你发现有两个我既说明你克隆成功了，如果我的点击事件两个都有，擦么克隆参数就是true

``` ## 操作元素尺寸 - **获取、设置内容区域：** - **`jq对象.width( ' 可选参数 ' )`** - **`jq对象.height( ' 可选参数 ' )`** - **获取、设置内容区域 + padding** - **`jq对象.innerWidth( ' 可选参数 ' )`** - **`jq对象.innerHeight( ' 可选参数 ' )`** - **获取、设置内容区域 + padding + border** - **`jq对象.outerWidth( ' 可选参数 ' )`** - **`jq对象.outerHeight( ' 可选参数 ' )`** **无参数代表获取，有参数代表设置** ```html

``` **注意：当设置参数的时候，差值会在内容区域的width和height上增减，padding、border保持不变，如果设置的值太小，内容区域最小只能为0** ## 操作元素的位置 - **`jq对象.offtset( )`：获取元素到文档顶点的距离，和父元素什么都没关系，只针对文档顶点，就算文档滚动了也一样** - **`jq对象.position()`：获取元素距离上个参考元素的位置，和定位有关** ```html

``` ## 操作滚动条卷走的距离获取设置页面滚动条滚动的距离 **语法：`jq对象.scrollTop/Left( 可选参数 )`** **有参数代表设置，无参数代表查询** ```html

返回顶部 ``` ## 综合案例：固定导航和返回顶部 **需求：** **页面滚动到一定位置固定这个位置的元素于页面顶部，下面可以继续滚动，并且出现返回顶部按钮** **当点击返回顶部按钮页面以运动方式返回顶部** ```html Document

123

1234

1234451

1234456787654321

返回顶部 ``` ## 综合案例：楼梯导航需求：当页面滚动到指定楼层，右侧导航栏指定楼层高亮，并且点击导航跳到指定楼层，首层滚动到现实导航栏，否则隐藏导航栏 ```html 楼梯导航效果

顶楼

一层

二层

三层

四层

五层

底层

``` 补充： $.contains() 方法用于判断指定元素内是否包含另一个元素。即判断另一个DOM元素是否是指定DOM元素的后代。