转载:菜鸟教程

什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities
  提示： 除此之外，Jquery还提供了大量的插件。

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作
  实例:
• $(this).hide() - 隐藏当前元素
• $("p").hide() - 隐藏所有 <p> 元素
• $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
• $("#test").hide() - 隐藏 id="test" 的元素

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

'元素选择器'
在页面中选取所有 <p> 元素:
$("p")

'#id 选择器'
$("#test")

.class 选择器
$(".test")

jQuery 事件

$("p").click(function(){
    // 动作触发后执行的代码!!
});
点击 click()
双击 dblclick()
穿过 mouseenter()
离开 mouseleave()
移到上方并按下鼠标 mousedown()
松开鼠标 mouseup()
悬停 hover()
例子:$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);
获取焦点 focus()
失去焦点 blur()

jQuery 效果- 隐藏和显示

hide() 隐藏
show() 显示
toggle() 自动切换显示隐藏

淡入淡出

fadeIn() 淡入隐藏元素
fadeOut() 淡出可见元素
fadeToggle() 自动淡入淡出
fadeTo() 设置颜色渐变

jQuery 效果 - 滑动

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

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

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。