一、jQuery 是一个 JavaScript 函数库
jQuery 库包含以下特性:HTML 元素选取,HTML 元素操作,CSS 操作,HTML 事件函数,JavaScript 特效和动画HTML DOM 遍历和修改,AJAX,Utilities
二、jQuery 语法
基础语法是:$(selector).action(),比如$(this).hide(),表示 jQuery hide() 函数,隐藏当前的 HTML 元素。
三、jQuery常见的效果
1)隐藏和显示
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
2)滚动
slideDown(),slideUp(),slideToggle()都是jQuery的滚动方法,滚动的形式看单词意思就能理解
下滚
$("#flip").click(function(){
$("#panel").slideDown();
});
上滚
$("#flip").click(function(){
$("#panel").slideUp();
});
而slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
3)动画效果
jQuery animate() 方法用于创建自定义动画。它的语法是$(selector).animate({params},speed,callback);其中params 参数定义形成动画的 CSS 属性
speed 参数规定效果的时长,callback 参数是动画完成后所执行的函数名称。
比如一个基本的动画多样变化效果
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
动画的效果是图片从左往右移动,过程中均匀变高变宽,然后颜色变浅。
4)当然动画在移动过程中有时需要我们能控制最好了,所以这里可以有一个jQuery stop() 方法用于在动画或效果完成前对它们进行停止。语法是$(selector).stop(stopAll,goToEnd);
$("#stop").click(function(){
$("#panel").stop();
});