jQuery基础总结

jQuery是一个轻量级 JavaScript 库

jQuery 是一个 JavaScript 函数库。

1.jQuery 库包含以下特性：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

2.引入jQuery库

    <!-- 本地 -->
    <script type="text/javascript" src="jquery.js"></script>
    <!-- 使用 Google 的 CDN -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <!-- 使用 Microsoft 的 CDN -->
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.8.0.js"></script>

3.jQuery 语法

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

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

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合

4.文档就绪函数

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。类似window.onload = function(){};

5.常见选择器

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

6.常见事件

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

7.jQuery名称冲突

　　jQuery 使用 $ 符号作为 jQuery 的简介方式。

　　某些其他 JavaScript 库中的函数（比如 Prototype.js）同样使用 $ 符号。

　　jQuery 使用名为 noConflict() 的方法来解决该问题。

　　var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

　　<script>

　　　　$.noConflict();

　　　　jQuery(document).ready(function(){

　　　　　　jQuery("button").click(function(){

　　　　　　　　jQuery("p").text("jQuery 仍在运行！");

　　　　　　});

　　　　});

　　</script>

8.显示隐藏函数

示例：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

$("button").click(function(){
  $("p").toggle();
});

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

可选的 callback 参数是 hide() show() toggle() 方法完成后所执行的函数

9.淡入淡出

示例：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

语法：

$(selector).fadeIn(speed,callback);

$(selector).fadeOut(speed,callback);

$(selector).fadeToggle(speed,callback);

$(selector).fadeTo(speed,opacity,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动作完成后所执行的函数名称。

opacity设定淡入淡出的透明度，是fadeTo方法特有的参数。

10.滑动

示例：略

语法：

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback); 

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

11.动画

示例：

（1）操作多个属性

$("button").click(function(){

　　$("div").animate({

　　　　left:'250px',
　　　　opacity:'0.5',
　　　　height:'150px',
　　　　width:'150px'
　　});
});

（2）设置相对值
$("button").click(function(){
　　$("div").animate({
　　　　left:'250px',
　　　　height:'+=150px',
　　　　width:'+=150px'
　　});
});
（3）使用队列功能逐一运行动画
$("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");
});
语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

12.stop方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法：
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。

13.callback

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。
为了避免这个情况，您可以以参数的形式添加 Callback 函数。当动画 100% 完成后，即调用 Callback 函数。
典型的语法：
$(selector).hide(speed,callback)
callback 参数是一个在 hide 操作完成后被执行的函数。

示例：

$("p").hide(1000,function(){
　　alert("The paragraph is now hidden");
});

结论：如果希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数。

14.方法链

在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示：这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

示例：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

或者拆分加换行：

$("#p1").css("color","red")
　　.slideUp(2000)
　　.slideDown(2000);

15.获取和设置内容

获得内容 - text()、html()、val()以及attr()
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() - 设置或返回属性值
示例：获取
$("#btn1").click(function(){
　　alert($("#test").text());
});
$("#btn2").click(function(){
　　alert($("#test").html());
});
$("#btn1").click(function(){
　　alert($("#test").val());
});
$("button").click(function(){
　　alert($("#w3s").attr("href"));
});
示例：设置
$("#btn1").click(function(){
　　$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
　　$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
　　$("#test3").val("Dolly Duck");
});
$("button").click(function(){
　　$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

$("button").click(function(){
　　$("#w3s").attr({
　　　　"href" : "http://www.w3school.com.cn/jquery",
　　　　"title" : "W3School jQuery Tutorial"
　　});
});

包含回掉函数的获取和设置：

text()、html() 以及 val() 同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
实例
$("#btn1").click(function(){
　　$("#test1").text(function(i,origText){
　　　　return "Old text: " + origText + " New text: Hello world!(index: " + i + ")";
　　});
});

$("#btn2").click(function(){
　　$("#test2").html(function(i,origText){
　　　　return "Old html: " + origText + " New html: Hello <b>world!</b>(index: " + i + ")";
　　});
});
attr()也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
实例
$("button").click(function(){
　　$("#w3s").attr("href", function(i,origValue){
　　　　return origValue + "/jquery";
　　});
});

注意：获取设置文本和属性的这四个函数，如果包含回掉函数，效果相当于先获取当前文本和属性，再设置文本和属性。

16.添加新内容/新元素

append() 　　- 在被选元素的结尾插入内容/新元素
prepend()　　- 在被选元素的开头插入内容/新元素
after()　　　  - 在被选元素之后插入内容/新元素
before() 　　  - 在被选元素之前插入内容/新元素

示例：$("p").prepend("Some prepended text.");

示例：三种方式创建新元素，然后通过append()方法插入到备选元素的结尾

function appendText()
{
　　var txt1="<p>Text.</p>";　　　　　　 　　 // 以 HTML 创建新元素
　　var txt2=$("<p></p>").text("Text."); 　　　   // 以 jQuery 创建新元素
　　var txt3=document.createElement("p");　　// 以 DOM 创建新元素
　　txt3.innerHTML="Text.";
　　$("p").append(txt1,txt2,txt3);　　　　　　  // 追加新元素
}

示例：三种方式创建新元素，然后通过after()方法插入到备选元素的后面

function afterText()
{
　　var txt1="<b>LOVE</b>"; 　　　　　　　　 // 以 HTML 创建新元素
　　var txt2=$("<i></i>").text("love");　　　　　  // 通过 jQuery 创建新元素
　　var txt3=document.createElement("big"); 　  // 通过 DOM 创建新元素
　　txt3.innerHTML="jQuery!";
　　$("img").after(txt1,txt2,txt3);              　　　  // 在 img 之后插入新元素
}

17.删除元素

remove() 　　- 删除被选元素（及其子元素）
empty() 　　  - 从被选元素中删除子元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。
示例：$("p").remove(".italic"); 　　 //删除 class="italic" 的所有 <p> 元素

18.jQuery 操作 CSS

addClass() 　　- 向被选元素添加一个或多个类
removeClass()  - 从被选元素删除一个或多个类
toggleClass()    - 对被选元素进行添加/删除类的切换操作
css() 　　　　  - 设置或返回样式属性
示例：
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
可以在添加类时，您也可以选取多个元素
$("button").click(function(){
　　$("h1,h2,p").addClass("blue");
　　$("div").addClass("important");
});
也可以在 addClass() 方法中规定多个类：
$("button").click(function(){
　　$("#div1").addClass("important blue");
});
可以在不同的元素中删除指定的 class 属性：
$("button").click(function(){
　　$("h1,h2,p").removeClass("blue");
});
添加/删除类的切换操作：
$("button").click(function(){
　　$("h1,h2,p").toggleClass("blue");
});

19.css() 方法

设置或返回被选元素的一个或多个样式属性

示例：

返回首个匹配元素的 background-color 值：
$("p").css("background-color");

为所有匹配元素设置 background-color 值：
$("p").css("background-color","yellow");

为所有匹配元素设置 background-color 和 font-size：
$("p").css({"background-color":"yellow","font-size":"200%"});

20.处理尺寸的方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
$("#div1").width()
$("#div1").height()
innerWidth() 方法返回元素的宽度（包括内边距）
innerHeight() 方法返回元素的高度（包括内边距）
$("#div1").innerWidth()
$("#div1").innerHeight()
outerWidth() 方法返回元素的宽度（包括内边距和边框）
outerHeight() 方法返回元素的高度（包括内边距和边框）
$("#div1").outerWidth()
$("#div1").outerHeight()
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）
$("#div1").outerWidth(true)
$("#div1").outerHeight(true)

更多的 width() 和 height()
文档（HTML 文档）的宽度和高度
$(document).width();
$(document).height()
窗口（浏览器视口）的宽度和高度
$(window).width();
$(window).height();
设置<div> 元素的宽度和高度
$("button").click(function(){
　　$("#div1").width(500).height(500);
});

21. jQuery 遍历

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

（1）向上遍历 DOM 树：parent()、parents()、parentsUntil()

parent() 方法返回被选元素的直接父元素
返回每个 <span> 元素的的直接父元素：
$(document).ready(function(){
　　$("span").parent();
});
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素<html>
返回所有 <span> 元素的所有祖先：
$(document).ready(function(){
　　$("span").parents();
});
可以使用可选参数来过滤对祖先元素的搜索。
返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
$(document).ready(function(){
　　$("span").parents("ul");
});
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
返回介于 <span> 与 <div> 元素之间的所有祖先元素：
$(document).ready(function(){
　　$("span").parentsUntil("div");
});

（2）向下遍历 DOM 树：children()、find()

children() 方法返回被选元素的所有直接子元素
返回每个 <div> 元素的所有直接子元素：
$(document).ready(function(){
　　$("div").children();
});
使用可选参数来过滤对子元素的搜索
返回类名为 "guo" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
$(document).ready(function(){
　　$("div").children("p.guo");
});
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代
返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
　　$("div").find("span");
});
返回 <div> 的所有后代：
$(document).ready(function(){
　　$("div").find("*");
});

（3）在 DOM 树进行水平遍历：siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()

siblings() 方法返回被选元素的所有同胞元素
返回 <h2> 的所有同胞元素：
$(document).ready(function(){
　　$("h2").siblings();
});
可以使用可选参数来过滤对同胞元素的搜索
返回属于 <h2> 的同胞元素的所有 <p> 元素：
$(document).ready(function(){
　　$("h2").siblings("p");
});
next() 方法返回被选元素的下一个同胞元素
返回 <h2> 的下一个同胞元素：
$(document).ready(function(){
　　$("h2").next();
});
nextAll() 方法返回被选元素的所有跟随的同胞元素
返回 <h2> 的所有跟随的同胞元素：
$(document).ready(function(){
　　$("h2").nextAll();
});
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：
$(document).ready(function(){
　　$("h2").nextUntil("h6");
});
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似

（4）在 DOM 树遍历中的过滤方法：first()、last()、eq()、filter()、not()

first()、last()、eq()：最基本的过滤方法，它们允许你基于其在一组元素中的位置来选择一个特定的元素。
filter()、not()：其他过滤方法，允许你选取匹配或不匹配某项指定标准的元素。

first() 方法返回被选元素的首个元素
选取首个 <div> 元素内部的第一个 <p> 元素：
$(document).ready(function(){
　　$("div p").first();
});
last() 方法返回被选元素的最后一个元素
选择最后一个 <div> 元素中的最后一个 <p> 元素：
$(document).ready(function(){
　　$("div p").last();
});
eq() 方法返回被选元素中带有指定索引号的元素，索引号从 0 开始，因此首个元素的索引号是 0 而不是 1
选取第二个 <p> 元素（索引号 1）：
$(document).ready(function(){
　　$("p").eq(1);
});

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
返回带有类名 "intro" 的所有 <p> 元素：
$(document).ready(function(){
　　$("p").filter(".intro");
});
not() 方法返回不匹配标准的所有元素（提示：not() 方法与 filter() 相反）
返回不带有类名 "intro" 的所有 <p> 元素：
$(document).ready(function(){
　　$("p").not(".intro");
});

22.jQuery 提供多个与 AJAX 有关的方法

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示
通过 jQuery 提供的 AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素（如果没有 jQuery，AJAX 编程还是有些难度的）

（1）加载：load() 方法

load() 方法从服务器加载数据，并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

/* demo_test.txt 文件内容*/
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

        /*把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：*/
        $("#div1").load("demo_test.txt");
        
        /*可以把 jQuery 选择器添加到 URL 参数，例如把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中*/
        $("#div1").load("demo_test.txt #p1");

        /*可选的 callback 回调函数可以设置不同的参数：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);
            });
        });    

（2）HTTP 请求：$.get() 和 $.post()

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

$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

示例：使用 $.get() 方法从服务器上的一个文件中取回数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $.get("/example/jquery/demo_test.asp",function(data,status){
                    $("#div_get").text("数据：" + data + "\n状态：" + status);
                });
            });
        });
    </script>
</head>
<body>
    <button>HTTP GET 请求</button>
    <div id="div_get"></div>
</body>
</html>

/*这个 ASP 文件 demo_test.asp 类似这样*/
<%
response.write("This is some text from an external ASP file.")
%>

$.post() 方法通过 HTTP POST 请求从服务器上请求数据

$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

示例：使用 $.post() 连同请求一起发送数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $.post("/example/jquery/demo_test_post.asp",
                    {
                        name:"Donald Duck",
                        city:"Duckburg"
                    },
                    function(data,status){
                        $("#div_get").text("数据：" + data + "\n状态：" + status);
                    });
            });
        });
    </script>
</head>
<body>
    <button>HTTP GET 请求</button>
    <div id="div_get"></div>
</body>
</html>

/*这个 ASP 文件 demo_test_post.asp 类似这样*/
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>

（3）jQuery Ajax 操作函数汇总

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数	描述
jQuery.ajax()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()	设置将来的 Ajax 请求的默认值。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。

23.jQuery noConflict() 方法

/*noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。当然，您仍然可以通过全名替代简写的方式来使用 jQuery*/
$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍在运行！");
    });
});

/*您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用*/
var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery 仍在运行！");
    });
});

/*如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。
这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"*/
$.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
        $("p").text("jQuery 仍在运行！");
    });
});

24.待续。。

参考：http://www.w3school.com.cn/jquery/jquery_ajax_get_post.asp