jQuery 安装
1、从 jquery.com 下载 jQuery 库
- Production version - 用于实际的网站中,已被精简和压缩。
- Development version - 用于测试和开发(未压缩,是可读的代码)
2、从 CDN 中载入 jQuery
百度CDN
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
新浪 CDN
<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>
又拍云 CDN
<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>
jQuery语法
jQuery 语法:1、选取 HTML 元素;2、对选取的元素执行某些操作。
基础语法:
$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)”查询”和”查找” HTML 元素(jQuery 中所有选择器都以美元符号开头:$()。)
- jQuery 的 action() 执行对元素
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
为了防止文档在完全加载(就绪)之前运行 jQuery 代码,避免在文档没有完全加载之前就运行函数引发的操作失败。
将所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
// 开始写 jQuery 代码...
});
简洁写法:
$(function(){
// 开始写 jQuery 代码...
});
关于选择器:
1、
2、jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素
页面中元素的 id 应该是唯一的,所以要在页面中选取唯一的元素需要通过 #id 选择器
$("#test")
3、jQuery 类选择器可以通过指定的 class 查找元素
$(".test")
关于jQuery事件
- 常见DOM事件
$(selector).toggle(speed,callback);
对于可选的 callback 参数,有以下两点说明:
1.$(selector)选中的元素的个数为n个,则callback函数会执行n次;
2.callback函数名后加括号,会立刻执行函数体,而不是等到显示/隐藏完成后才执行;
3.callback既可以是函数名,也可以是匿名函数;
jQuery 效果 - 淡入淡出
jQuery 拥有四种 fade 方法
- fadeIn()
淡入已隐藏的元素
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取:"slow"、"fast" 或毫秒
可选的 callback 参数是 fading 完成后所执行的函数名称
- fadeOut()
用于淡出可见元素
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取:"slow"、"fast" 或毫秒
可选的 callback 参数是 fading 完成后所执行的函数名称
- fadeToggle()
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取:"slow"、"fast" 或毫秒
可选的 callback 参数是 fading 完成后所执行的函数名称
- fadeTo()
允许渐变为给定的不透明度(值介于 0 与 1 之间)
$(selector).fadeTo(speed,opacity,callback);
可选的 speed 参数规定效果的时长。它可以取:"slow"、"fast" 或毫秒
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)
可选的 callback 参数是 fading 完成后所执行的函数名称
jQuery 效果 - 滑动
- slideDown()
用于向下滑动元素
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。可以取:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
- slideUp()
用于向上滑动元素
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。可以取:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
- slideToggle()
在 slideDown() 与 slideUp() 方法之间进行切换
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。可以取:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
jQuery 动画
jQuery animate() 方法用于创建自定义动画
$(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 animate() - 使用队列功能
jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个animate() 调用,jQuery 会创建包含这些方法调用的”内部”队列。然后逐一运行这些 animate 调用。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
jQuery 停止动画
jQuery stop() 方法用于停止动画或效果,在它们完成之前,适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画
$(selector).stop(stopAll,goToEnd);
stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行
goToEnd 参数规定是否立即完成当前动画。默认是 false
默认地stop() 会清除在被选元素上指定的当前动画
$("div").stop();//停止当前激活的动画,但之后我们能再动画队列中再次激活
$("div").stop(true);//停止当前动画,并清除动画队列,所以元素的所有动画都会停止
$("div").stop(true,true);//完成动作,快速完成动作,并停止它
注:Callback 函数在当前动画 100% 完成之后执行
jQuery - 链(Chaining)
通过 jQuery,可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上),浏览器就不必多次查找相同的元素。
如需链接一个动作,您只需简单地把该动作追加到之前的动作上
$("#p1").css("color","red").slideUp(2000).slideDown(2000);