前端：jQuery效果

原文：https://www.w3school.com.cn/jquery/jquery_traversing.asp

目录

 

简介

添加 jQuery 库

1、下载jQuery文件

2、或通过 CDN（内容分发网络） 引用它（用户加载更快）

Google CDN

Microsoft CDN

jQuery语法：$(selector).action()

1、 文档就绪函数

2、选择器

实例

1、显示与隐藏

简单隐藏：

有样式效果的隐藏：

切换 hide() 和 show() 方法

2、淡入与淡出

切换 fadeIn() 与 fadeOut() 方法

​3、给定的不透明度

4、滑动

​5、动画

创建动画

队列功能：连续多个效果

​停止动画

​方法连接：

---

简介

1、jQuery 是一个 JavaScript 函数库

2、为了便于维护，通常将jQuery函数放在一个js文件中，通过 src 属性来引用文件

3、jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

4、遵循以下原则时，您的代码会更恰当且更易维护

5、特性：

添加 jQuery 库

jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

1、下载jQuery文件

把下载文件放到与页面相同的目录中，这样更方便使用

2、或通过 CDN（内容分发网络） 引用它（用户加载更快）

Google CDN

若要最新版本，则将1.8.0改为1.8

Microsoft CDN

jQuery语法：$(selector).action()

1、 文档就绪函数

jQuery 函数位于一个 document ready 函数中，这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，如果在文档没有完全加载之前就运行函数，操作可能失败

2、选择器

实例

1、显示与隐藏

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称，可不填。

简单隐藏：

有样式效果的隐藏：

切换 hide() 和 show() 方法

$(selector).toggle(speed,callback);

2、淡入与淡出

切换 fadeIn() 与 fadeOut() 方法

$(selector).fadeToggle(speed,callback);

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

3、给定的不透明度

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

4、滑动

$(selector).slideDown(speed,callback);//向下滑动

$(selector).slideUp(speed,callback);//向上滑动

$(selector).slideToggle(speed,callback);//上下滑动

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

5、动画

创建动画

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

色彩动画并不包含在核心 jQuery 库中，如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=

可以把属性的动画值设置为 "show（显示）"、"hide（隐藏）" 或 "toggle（上下滑动）"

队列功能：连续多个效果

停止动画

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

方法连接：

连续执行多个，这样的话，浏览器就不必多次查找相同的元素

$("#p1").css("color","red").slideUp(2000).slideDown(2000);