JQuery 文档就绪速记

JQuery 是一个快速，简洁的 JavaScript 库，主要用于处理 HTML 文档的交互、动画、事件等。以下是一些 JQuery 的文档就绪速记，帮助程序员快速掌握这个库。

基本语法

JQuery 的基本语法格式如下：

$(selector).action();

• $ 定义 jQuery
• selector 查找 HTML 元素
• action() 在元素上执行的动作

比如，以下代码使用 jQuery 改变所有的 <p> 元素的背景颜色：

$("p").css("background-color", "yellow");

文档就绪

在使用 jQuery 处理 HTML 代码之前，必须确保代码已经加载完毕，即文档已经就绪。以下是三种挂载 jQuery 代码的方法：

方法一：load()

$(window).load(function(){
  // 代码放在这里
});

当整个页面已加载完毕（包括所有图片、JavaScript 文件等）时，该函数才会被执行。注：该方法已经弃用，取而代之的是 ready 函数。

方法二：ready()

$(document).ready(function(){
  // 代码放在这里
});

当 DOM 已经就绪（但不包括图片、JavaScript 文件等）时，该函数才会被执行。

方法三：简写

$(function(){
  // 代码放在这里
});

与 ready() 函数的效果相同。可以简写为传入一个函数。

选择器

以下是常用的选择器：

• $(document)：文档对象
• $(this)：当前 HTML 元素
• $("p")：所有 <p> 元素
• $("p.intro")：class 为 intro 的 <p> 元素
• $("p#demo")：id 为 demo 的 <p> 元素

可以通过以下方式来组合选择器：

• $("p.intro.demo")：class 中同时包含 intro 和 demo 的 <p> 元素
• $("p, a")：所有 <p> 和 <a> 元素

还可以选择特定位置的元素：

• $("ul li:first")：选择第一个 <li> 元素
• $("ul li:last")：选择最后一个 <li> 元素
• $("ul li:even")：选择偶数位置的 <li> 元素
• $("ul li:odd")：选择奇数位置的 <li> 元素

事件

以下是常用的事件：

• click()：单击事件
• dblclick()：双击事件
• mouseenter()：鼠标进入事件
• mouseleave()：鼠标离开事件
• mousedown()：鼠标按下事件
• mouseup()：鼠标释放事件
• keydown()：键盘按下事件
• keyup()：键盘释放事件
• focus()：元素获得焦点事件
• blur()：元素失去焦点事件
• change()：元素内容修改事件
• submit()：表单提交事件
• resize()：窗口大小改变事件
• scroll()：滚动事件

可以使用 on() 函数来注册事件：

$("p").on("click", function(){
  // 代码放在这里
});

也可以使用 bind() 函数来注册事件：

$("p").bind("click", function(){
  // 代码放在这里
});

动画效果

以下是常用的动画效果：

• $(selector).hide()：隐藏元素
• $(selector).show()：显示元素
• $(selector).toggle()：切换元素的可见性
• $(selector).fadeIn()：淡入元素
• $(selector).fadeOut()：淡出元素
• $(selector).fadeToggle()：淡入淡出元素的可见性
• $(selector).slideUp()：向上滑动元素
• $(selector).slideDown()：向下滑动元素
• $(selector).slideToggle()：向上或向下滑动元素的可见性
• $(selector).animate()：使用自定义动画效果来改变元素

以下代码演示了如何使用动画效果：

$("button").click(function(){
  $("div").animate({left: '250px', opacity: '0.5'}, "slow");
});

AJAX

使用 AJAX 可以动态地加载服务器端的数据，避免了全部重新载入页面的开销。以下是使用 AJAX 加载 HTML 文件的例子：

$("button").click(function(){
  $("#div1").load("demo.html");
});

特殊效果

以下是常用的特殊效果：

• $(selector).addClass()：为元素添加一个或多个 class
• $(selector).removeClass()：从元素中删除一个或多个 class
• $(selector).toggleClass()：添加、删除或切换一个或多个 class
• $(selector).attr()：设置或返回元素的属性值
• $(selector).removeAttr()：删除元素的属性值
• $(selector).text()：设置或返回元素的文本内容
• $(selector).html()：设置或返回元素的 HTML 内容
• $(selector).val()：设置或返回元素的值

可以使用以下方式来组合特殊效果：

• $("p.intro").addClass("demo")：添加 class 名为 demo 的新 class
• $("p.intro").removeClass("intro")：删除 class 名为 intro 的 class
• $("p.intro").toggleClass("intro demo")：切换 class 为 intro 和 demo 的元素之间的效果

总结

以上为常用的 jQuery 方法和函数，帮助程序员在处理 HTML 文档时更快速高效。学习 jQuery 只需要掌握基本语法和常用函数，接下来可以通过实践开发更多功能丰富、用户友好的前端界面。