原文:https://www.w3school.com.cn/jquery/jquery_traversing.asp
目录
简介
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);