什么是 jQuery ？

jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的 “写的少，做的多” 的 JavaScript 库。
jQuery 库包含以下功能：

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

基础jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行 “操作”（actions）。
基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）“查询” 和 “查找” HTML 元素
jQuery 的 action () 执行对元素的操作

所有 jQuery 函数位于一个 document ready 函数中：

    $(document).ready(function(){
     
       // 开始写 jQuery 代码...
     
    });

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。
提示：简洁写法（与以上写法效果相同）:

$(function(){//这是jQuery的入口函数
 
   // 开始写 jQuery 代码...
 
});

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等 “查找”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

#id 选择器
当用户点击按钮后，有 id=“test” 属性的元素将被隐藏：
实例

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

.class 选择器
用户点击按钮后所有带有 class=“test” 属性的元素都隐藏：
实例

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

三个简单实用的用于 DOM 操作的 jQuery 方法：

text () - 设置或返回所选元素的文本内容
html () - 设置或返回所选元素的内容（包括 HTML 标记）
val () - 设置或返回表单字段的值

实例：

//获得内容 - text ()、html () 以及 val ()
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

//设置内容 - text ()、html () 以及 val ()
$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass () - 向被选元素添加一个或多个类
removeClass () - 从被选元素删除一个或多个类
toggleClass () - 对被选元素进行添加 / 删除类的切换操作
css () - 设置或返回样式属性

实例

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

//使用此方法，某些标签会增添class这个属性，如果此时在配合css样式

例如：


.blue
{
        color:blue;
}
//就可以让标签达到变色的效果。

jQuery 遍历

什么是遍历？
jQuery 遍历，意为 “移动”，用于根据其相对于其他元素的关系来 “查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

遍历 DOM 树
这些 jQuery 方法很有用，它们用于遍历 DOM 树：

parent() ：方法返回被选元素的直接父元素。
parents()：方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
parentsUntil()：方法返回介于两个给定元素之间的所有祖先元素。
children () 方法返回被选元素的所有直接子元素。
find () 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回介于 <span>与<div> 元素之间的所有祖先元素：
实例

$(document).ready(function(){
  $("span").parentsUntil("div");
});

下面的例子返回属于 <div>后代的所有 <span>元素：
实例

$(document).ready(function(){
  $("div").find("span");
});

jQuery - AJAX 简介

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

jQuery load () 方法

jQuery load () 方法是简单但强大的 AJAX 方法。
load () 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键 / 值对集合。
可选的 callback 参数是 load () 方法完成后所执行的函数名称。

可选的data (Map) 是发送至服务器的 key/value 数据。
实例：

$("#box").load("testa.html",{name:"bingo",sex:"man"});

可选的 callback 参数规定当 load () 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load () 方法完成后显示一个提示框。如果 load () 方法已成功，则显示 “外部内容加载成功！”，而如果失败，则显示错误消息：

实例

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert(" 外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

jQuery - AJAX get () 和 post () 方法

jQuery get () 和 post () 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求 - 响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get () 方法

$.get () 方法通过 HTTP GET 请求从服务器上请求数据。
语法：

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get () 方法从服务器上的一个文件中取回数据：
实例

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert(" 数据: " + data + "\n 状态: " + status);
  });
});

jQuery $.post () 方法

$.post () 方法通过 HTTP POST 请求向服务器提交数据。
语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post () 连同请求一起发送数据：
实例

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:" 菜鸟教程 ",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert(" 数据: \n" + data + "\n 状态: " + status);
    });
});

$.post函数会从页面传信息到php页面，PHP页面通过
$.get () 和 $.post () 方法是 jQuery 中的全局函数，而在此之前讲的 load () 是对 jQuery 对象进行操作的。

jQuery 杂项方法

data() 向被选元素附加数据，或者从被选元素获取数据
each() 为每个匹配元素执行函数
get() 获取由选择器指定的 DOM 元素
index() 从匹配元素中搜索给定元素
$.noConflict() 释放变量 $ 的 jQuery 控制权
$.param() 创建数组或对象的序列化表示形式（可在生成 AJAX 请求时用于 URL 查询字符串中）
removeData() 移除之前存放的数据
size() 在版本 1.8 中被废弃。返回被 jQuery 选择器匹配的 DOM 元素的数量
toArray() 以数组的形式检索所有包含在 jQuery 集合中的所有 DOM 元素
pushStack() 将一个 DOM 元素集合加入到 jQuery 栈
$.when() 提供一种方法来执行一个或多个对象的回调函数

jQuery教程——jQuery的快速入门

目录