一、jQuery动画
1.1 jQuery 的显示和隐藏
-
jQuery 中显示方法为 .show(), 隐藏方法为 .hide() 。在无参数的时候,只是硬性的显示内容和隐藏内容
-
在 .show() 和 .hide() 方法可以传递一个参数,这个参数以毫秒(1000 毫秒等于 1 秒钟)来控 制速度。并且里面富含了匀速变大变小,以及透明度变换
-
除了直接使用毫秒来控制速度外, jQuery 还提供了三种预设速度参数字符串: slow 、normal 和 fast ,分别对应 600 毫秒、400 毫秒和 200 毫秒，不管是传递毫秒数还是传递预设字符串,如果不小心传递错误或者传递空字符串。 那么它将采用默认值:400 毫秒
-
如果需要控制动画的形式，则可以有第二个参数easing。默认有两个效果："linear"和"swing"。
其中swing（随着动画的开始变得更加快一些，然后再慢下来。swing是一个常用设置，因此，如果没有指定任何缓动，jQuery会使用swing方法）
-
使用第三个参数可以书写回调函数
-
jQuery 提供给我们一个显示隐藏的独立的方法 .toggle()
1.2 jQuery的滑动和卷动
- jQuery 提供了一组改变元素高度的方法 .slideUp() 、 .slideDown() 和 .slideToggle() 。顾名思义,向上收缩(卷动)和向下展开(滑动)。
- 参数参考show和hide方法
1.3 jQuery的淡入和淡出
- jQuery 提供了一组改变元素透明度的方法 .fadeIn() 、 .fadeOut() 和 .fadeToggle() 。
- 参数参考show和hide方法
1.4 jQuery自定义动画
1.4.1 自定义动画的基础使用
-
在jQuery中，可以使用
animate()方法来自定义动画，满足更多复杂多变的要求 -
animate()的语法结构为：animate(params,speed,callback)params：一个包含样式属性及值的映射速度speed：参数，可选
-
callback：在动画完成时执行的函数 -
累加、累减动画：可以在设置属性的时候，给属性的值为+= 或者 -= 实现累加累减动画
例如：
left:"+=500px"
1.4.2 动画队列
- 如果想要按照顺序执行动画，只需要把代码按照顺序就可以，
- 因为
animate()方法都是对同一个jQuery对象进行操作，所以也可以改为链式写法 - 动画效果的执行具有先后顺序，称为"动画队列"
- 但是除了动画以外，其他的方法不会放到队列中，而是直接执行
1.5 停止动画
1.5.1 停止动画
- 很多时候需要停止匹配元素正在进行的动画，如果需要在某处停止动画，需要
stop()方法 stop()方法的语法结构为：stop([clearQueue],[gotoEnd])，参数clearQueue和gotoEnd都是可选的参数，为Boolean值（true或false）clearQueue代表是否要清空未执行完的动画队列gotoEnd代表是否直接将正在执行的动画跳转到末状态
stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画
1.5.2 判断元素是否处于动画状态
-
当用户在某个元素上执行
animate()动画时，就会出现动画积累 -
使用
is(":animated")方法判断是否处于动画状态 -
解决办法是判断元素是否正在处于动画状态，如果元素不处于动画状态，才会为元素添加新动画
1.5.3 延迟动画
- 在动画执行过程，如果想对动画进行延迟操作，那么可以使用方法
delay()方法允许我们将队列中的函数延迟执行。它既可以推迟动画队列中函数的执行，也可以用于自定义队列
二、元素的样式操作
- 元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法。
- 还有内外边距和边框尺寸方法
- 还有位置相关的方法
| 方法名 | 描述 |
|---|---|
| css(name) | 获取某个元素的 CSS 样式 |
| css(name, value) | 设置某个元素行内的 CSS 样式 |
| css({name1 : value1, name2 : value2}) | 设置某个元素行内多个 CSS 样式 |
| addClass(class) | 给某个元素添加一个 CSS 类 |
| removeClass(class) | 删除某个元素的一个 CSS 类 |
| toggleClass(class) | 来回切换默认样式和指定样式 |
| width() | 获取某个元素的长度 |
| width(value) | 设置某个元素的长度 |
| height() | 获取某个元素的长度 |
| height(value) | 设置某个元素的长度 |
| innerWidth() /innerHeight() | 获取元素宽度 / 高度,包含内边距 padding |
| outerWidth() /outerHeight() | 获取元素宽度／高度,包含边框 border 和内边距 padding |
| outerWidth(ture) /outerHeight(true) | 同上,且包含外边距 |
| offset() | 获取某个元素相对于文档的偏移位置 |
| position() | 获取某个元素相对于父元素的偏移位置 |
| scrollTop() / scrollTop(value) | 获取/设置垂直滚动条的值 |
| scrollLeft() / scrollTop(value) | 获取/设置水平滚动条的值 |
三、jQuery的DOM操作
3.1 设置内容及属性
| 方法名 | 描述 |
|---|---|
| html() | 获取元素中 HTML 内容 |
| html(value) | 设置元素中 HTML 内容 |
| text() | 获取元素中文本内容 |
| text(value) | 设置元素中文本内容 |
| val() | 获取表单中的文本内容 |
| val(value) | 设置表单中的文本内容 |
| prop/attr(key) | 获取某个元素 key 属性的属性值 |
| prop/attr(key, value) | 设置某个元素 key 属性的属性值 |
| prop/attr({key1:value2, key2:value2...}) | 设置某个元素多个 key 属性的属性值 |
| removeattr(key) | 删除指定的属性 |
3.2 DOM 操作
3.2.1 创建节点
- 运用传统的 JavaScript 方法，创建一个 div 元素节点：
createElement() - jQuery 中创建一个 div 元素节点
$("<div></div>");
3.2.2 创建文本节点
- 运用传统的 JavaScript 方法，创建div的文本节点
createTextNode(); - jQuery 中创建一个 div 元素节点
$("<div>新创建文本</div>")
3.2.3创建属性节点
- 运用传统的 JavaScript 方法，创建div的属性节点，我们可以使用setAttribute(name,value)
- jQuery 中创建div 的属性节点可以使用 attr( )方法，也可以直接写在创建的 div 中
3.2.4 插入节点
| 方法名 | 描述 |
|---|---|
| append(content) | 向指定元素内部后面插入节点 content |
| appendTo(content) | 将指定元素移入到指定元素 content 内部后面 |
| prepend(content) | 向指定元素 content 内部的前面插入节点 |
| prependTo(content) | 将指定元素移入到指定元素 content 内部前面 |
| after(content) | 向指定元素的外部后面插入节点 content |
| insertAfter(content) | 将指定节点移到指定元素 content 外部的后面 |
| before(content) | 向指定元素的外部前面插入节点 content |
| insertBefore(content) | 将指定节点移到指定元素 content 外部的前面 |
3.2.5 删除节点
-
运用传统的JS方法，使用
removeChild来删除一个节点 -
删除节点 remove() 不带参数时,删除前面对象选择器指定的元素。
-
而 remove() 本身也可以带选择符参数的
-
清空节点 empty() 是用来删除掉节点里的内容
-
3.2.6 替换节点
- 运用传统的JS方法，使用
replaceChild来替换节点 - jQuery 中使用 replaceAll 的方法替换节点,节点被替换后,所包含的事件行为就全部消失了。
3.2.7复制节点
-
运用传统的JS方法，使用
cloneNode来复制节点 -
jQuery 中使用 clone() 的方法复制节点
clone(true) 参数可以为空,表示只复制元素和内容,不复制事件行为。而加上 true 参数的话,这个元素附带的事件处理行为也复制出来