jQuery笔记

Jqery的功能包括

1、HTML的元素选取

2、HTML的元素操作

3、HTML DOM遍历和修改

4、js特效和动画效果

5、css操作

6、HTML时间操作

7、Ajax异步请求方式

jQuery语法

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

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

$("p").hide()                隐藏所有<p>元素

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

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

文档就绪事件

$(function()){

      //开始写jQuery代码

}

jQuery入口函数与JavaScript入口函数的区别：

1、jQuery的入口函数是HTML所有标签都加载之后，才去执行

2、JavaScript的Window.onload事件是等到所有内容包括图片之类的文件都加载完成后，才去执行

jQuery选择器

jQuery选择器是基于元素的id、类、类型、属性、属性值等查找HTML元素，所有元素都以$()开头

元素选择器()

用户点击按钮后，所有 <p> 元素都隐藏：

$ ( document ) . ready ( function ( ) {

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

$ ( " p " ) . hide ( ) ;

} ) ; 

} ) ;

ID选择器（#）

当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

$ ( document ) . ready ( function ( ) {

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

$ ( " #test " ) . hide ( ) ;

} ) ; 

} ) ;

class选择器（.）

用户点击按钮后所有带有 class="test" 属性的元素都隐藏：

$ ( document ) . ready ( function ( ) {

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

$ ( " .test " ) . hide ( ) ; 

} ) ; 

} ) ;

$("")                                        选取所有元素

$(this)                                     选取当前HTML元素

$("p.in")                                  选取class为into的<p>元素

$("p:frist")                               选取第一个<p>元素

$("ul li:first")                            选取<ul>元素里的第一个<li>元素

$("ul li:first-child")                  选取每个 <ul>元素里的第一个<li>元素

$("[href]")                                选取带有href属性的元素

$("a[target="_blank"]")           选取所有target属性值等于"_blank"的<a>元素

$("a[target!="_blank"]")          选取所有target属性值不等于"_blank"的<a>元素

$(":button")                             选取所有type="button"和<button>元素

$("tr:even")                              选取所有偶数位置的<tr>元素

$("tr:odd")                               选取所有奇数位置的<tr>元素

：和[]有什么区别？

：可以理解为种类的意思，如：p:first   p的种类为第一个 

[]为属性的意思，如[href]选取带有href属性的元素

$("#id", ".class")                复合选择器

$(div p span)                层级选择器 //div下的p元素中的span元素

$(div>p)                父子选择器 //div下的所有p元素

$(div+p)                相邻元素选择器 //div后面的p元素(仅一个p)

$(div~p)                兄弟选择器 //div后面的所有p元素(同级别)

$(.p:last)                类选择器 加 过滤选择器 第一个和最后一个（first 或者 last）

$("#mytable td:odd") 层级选择 加 过滤选择器 奇偶（odd 或者 even）

$("div p:eq(2)")                索引选择器 div下的第三个p元素（索引是从0开始）

$("a[href='www.baidu.com']") 属性选择器

$("p:contains(test)") // 内容过滤选择器，包含text内容的p元素

$(":emtyp")                 //内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反

$(":hidden")                 //所有隐藏元素 visible

$("input:enabled")                 //选取所有启用的表单元素

$(":disabled")                //所有不可用的元素

$("input:checked")                //获取所有选中的复选框单选按钮等

$("select option:selected") //获取选中的选项元素

jQuery事件

页面对不同访问者的响应叫做事件

事件处理程序指HTML发生某些事件时所调用的方法

鼠标事件

click     dbclick     mouseenter    mouseleave  hover

键盘事件

keypress（ keydown和keyup中间一段时间触发的事件）  keydown   keyup

表单事件

submit   change  focus（ 元素获得焦点时） blur( 失去输入焦点 事件)

文档/窗口事件

load       从服务器加载数据,并把返回的数据放置到指定的元素中

resize        当调整浏览器窗口的大小时,发生  resize  事件

scroll         当用户滚动指定的元素时,会发生  scroll  事件

unload      当用户离开页面时,会发生  unload  事件

jQuery效果-

使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

$ ( " #hide " ) . click ( function ( ) {

$ ( " p " ) . hide ( ) ; 

} ) ;

$ ( " #show " ) . click ( function ( ) { 

$ ( " p " ) . show ( ) ;

} ) ;

带有 speed 参数的 hide() 方法，并使用回调函数：

$ ( document ) . ready ( function ( ) { 

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

$ ( " div " ) . hide ( 1000 , " linear " , function ( ) {

alert ( " Hide() 方法已完成! " ) ; 

} ) ; 

} ) ; 

} ) ;

第二个参数是一个字符串，表示过渡使用哪种缓动函数   jQuery自身提供"linear" 和 "swing"

jQuery toggle（）

可用来切换hide（）和show()方法

显示被隐藏的元素，并隐藏已显示的元素：

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

$ ( " p " ) . toggle ( ) ; 

} ) ;

jQuery fadeIn() 方法

用于淡入已隐藏的元素。

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

$ ( " #div1 " ) . fadeIn ( ) ;

$ ( " #div2 " ) . fadeIn ( " slow " ) ;

$ ( " #div3 " ) . fadeIn ( 3000 ) ;

} ) ;

jQuery fadeOut() 方法

用于淡出可见元素

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

$ ( " #div1 " ) . fadeOut ( ) ;

$ ( " #div2 " ) . fadeOut ( " slow " ) ;

$ ( " #div3 " ) . fadeOut ( 3000 ) ; 

} ) ;

fadeToggle() 方法

可以在 fadeIn() 与 fadeOut() 方法之间进行切换

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

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

$("#div1").fadeToggle();

$("#div2").fadeToggle("slow");

$ ( " #div3 " ) . fadeToggle ( 3000 ) ;

} ) ;

Query fadeTo() 方法

允许渐变为给定的不透明度（值介于 0 与 1 之间）

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

$ ( " #div1 " ) . fadeTo ( " slow " , 0.15 ) ;

$ ( " #div2 " ) . fadeTo ( " slow " , 0.4 ) ;

$ ( " #div3 " ) . fadeTo ( " slow " , 0.7 ) ;

} ) ;

一、注意大小写，fadeIn()   fadeOut()   fadeToggle()   fadeTo()  大小写不能变。

二、fadeTo()  没有默认参数，必须加上  slow/fast/Time  

jQuery slideDown() 方法

用于向下滑动元素

$ ( " #flip " ) . click ( function ( ) { 

$ ( " #panel " ) . slideDown ( ) ; 

} ) ;

jQuery slideUp() 方法

用于向上滑动元素。

$ ( " #flip " ) . click ( function ( ) { 

$ ( " #panel " ) . slideUp ( ) ; 

} ) ;

jQuery slideToggle() 方法

可以在 slideDown() 与 slideUp() 方法之间进行切换

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$("#flip").click(function(){ $("#panel").slideToggle(); });

jQuery animate() 方法

用于创建自定义动画。

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

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

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

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

把 <div> 元素往右边移动了 250 像素

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

$ ( " div " ) . animate ( { left : ' 250px ' } ) ; 

} ) ;

请注意，生成动画的过程中可同时使用多个属性：

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

$ ( " div " ) . animate ( {

left : ' 250px ' , 

opacity : ' 0.5 ' , 

height : ' 150px ' ,

width : ' 150px ' } ) ; 

} ) ;

可以用 animate() 方法来操作所有 CSS 属性吗？

是的，不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

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

$ ( " div " ) . animate ( {

left : ' 250px ' , height : ' +=150px ' , width : ' +=150px ' } ) ;

} ) ;

甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

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

$ ( " div " ) . animate ( { height : ' toggle ' } ) ;

} ) ;

编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

$ ( " 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 " ) ; 

} ) ;

把 <div> 元素往右边移动了 100 像素，然后增加文本的字号：

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

var div=$("div"); div.animate({left:'100px'},"slow");

div.animate({fontSize:'3em'},"slow");

});

Query stop() 方法

用于停止动画或效果，在它们完成之前。

语法：

$( selector ).stop( stopAll,goToEnd );

$ ( " #stop " ) . click ( function ( ) {

$ ( " #panel " ) . stop ( ) ;

} ) ;

隐藏动画

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

$ ( " p " ) . hide ( " slow " , function ( ) { alert ( " 段落现在被隐藏了 " ) ;

} ) ;

} ) ;

Chaining（链）

 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）

例

把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

$ ( " #p1 " ) . css ( " color " , " red " ) 

. slideUp ( 2000 ) 

. slideDown ( 2000 ) ;

jQuery HTML

jQuery捕获

DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。"

演示如何通过 jQuery text() 和 html() 方法来获得内容：

$ ( " #btn1 " ) . click ( function ( ) { 

alert ( " Text: " + $ ( " #test " ) . text ( ) ) ;

} ) ;

$ ( " #btn2 " ) . click ( function ( ) { 

alert ( " HTML: " + $ ( " #test " ) . html ( ) ) ;

} ) ;

如何通过 jQuery val() 方法获得输入字段的值：

$ ( " #btn1 " ) . click ( function ( ) { 

alert ( " 值为: " + $ ( " #test " ) . val ( ) ) ;

} ) ;

Query attr() 方法用于获取属性值。

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

alert ( $ ( " #runoob " ) . attr ( " href " ) ) ; 

} ) ;

attr 和 prop 的区别介绍：

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

         val() - 设置或返回表单字段的值

$ ( " #btn1 " ) . click ( function ( ) { 

$ ( " #test1 " ) . text ( " Hello world! " ) ; } ) ;

$ ( " #btn2 " ) . click ( function ( ) {

$ ( " #test2 " ) . html ( " <b>Hello world!</b> " ) ; } ) ;

$ ( " #btn3 " ) . click ( function ( ) {

$ ( " #test3 " ) . val ( " RUNOOB " ) ; 

} ) ;

text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

$ ( " #btn1 " ) . click ( function ( ) { 

$ ( " #test1 " ) . text ( function ( i , origText ) {  return " 旧文本: " + origText + " 新文本: Hello world! (index: " + i + " ) " ; } ) ;

} ) ;

$ ( " #btn2 " ) . click ( function ( ) {

$ ( " #test2 " ) . html ( function ( i , origText ) { return " 旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + " ) " ; } ) ;

} ) ;

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

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

$ ( " #runoob " ) . attr ( " href " , " jQuery 教程 | 菜鸟教程 " ) ;

} ) ;

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

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

$ ( " #runoob " ) . attr ( { " href " : " jQuery 教程 | 菜鸟教程 " , " title " : " jQuery 教程 " 

} ) ; 

} ) ;

jQuery 方法 attr()，

也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

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

$ ( " #runoob " ) . attr ( " href " , function ( i , origValue ) { 

return origValue + " /jquery " ;

} ) ; 

} ) ;

用于添加新内容的四个 jQuery 方法：

  append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）

$ ( " p " ) . append ( " 追加文本 " ) ;

 prepend() 方法在被选元素的开头插入内容。

$ ( " p " ) . prepend ( " 在开头追加文本 " ) ;

append() 和 prepend() 方法能够通过参数接收无限数量的新元素。

function appendText ( ) {

var txt1 = " <p>文本-1。</p> " ; // 使用 HTML 标签创建文本 

var txt2 =$ ( " <p></p> " ) . text ( " 文本-2。 " ) ; // 使用 jQuery 创建文本

var txt3 = document . createElement ( " p " ) ; 

txt3 . innerHTML = " 文本-3。 " ; // 使用 DOM 创建文本 text with DOM 

$ ( " body " ) . append ( txt1 , txt2 , txt3 ) ; // 追加新元素 }

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容

$("img").after("在后面添加文本");

$("img").before("在前面添加文本");

after() 和 before() 方法能够通过参数接收无限数量的新元素。

可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

function afterText ( ) { var txt1 = " <b>I </b> " ; // 使用 HTML 创建元素 

var txt2 =$ ( " <i></i> " ) . text ( " love " ) ; // 使用 jQuery 创建元素 

var txt3 = document . createElement ( " big " ) ; // 使用 DOM 创建元素 txt3 . innerHTML = " jQuery! " ;

$ ( " img " ) . after ( txt1 , txt2 , txt3 ) ; // 在图片后添加文本 }

append/prepend和after/before有什么区别呢？

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

删除元素和内容

一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

  remove() 方法删除被选元素及其子元素

$ ( " #div1 " ) . remove ( ) ;

 empty() 方法删除被选元素的子元素。

$ ( " #div1 " ) . empty ( ) ;

remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

$ ( " p " ) . remove ( " .italic " ) ;

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

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

向不同的元素添加 class 属性。

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

$ ( " h1,h2,p " ) . addClass ( " blue " ) ;

$ ( " div " ) . addClass ( " important " ) ;

} ) ;

也可以在 addClass() 方法中规定多个类：

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

$ ( " body div:first " ) . addClass ( " important blue " ) ; 

} ) ;

在不同的元素中删除指定的 class 属性：

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

$ ( " h1,h2,p " ) . removeClass ( " blue " ) ; 

} ) ;

使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

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

$ ( " h1,h2,p " ) . toggleClass ( " blue " ) ; 

} ) ;

CSS方法

返回CSS属性

css(" propertyname ");

返回首个匹配元素的 background-color 值：

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

       设置 CSS 属性

css(" propertyname "," value ");

为所有匹配元素设置 background-color 值：

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

        设置多个 CSS 属性，请使用如下语法：

css({" propertyname ":" value "," propertyname ":" value ",...});

为所有匹配元素设置 background-color 和 font-size：

$ ( " p " ) . css ( { " background-color " : " yellow " , " font-size " : " 200% " } ) ;

jQuery尺寸

jQuery 提供多个处理尺寸的重要方法：

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

下面的例子返回指定的 <div> 元素的宽度和高度：

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

var txt = " " ; 

txt += " div 的宽度是: " + $ ( " #div1 " ) . width ( ) + " </br> " ; 

txt += " div 的高度是: " + $ ( " #div1 " ) . height ( ) ;

$ ( " #div1 " ) . html ( txt ) ; 

} ) ;

  jQuery 遍历，

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

祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

向上遍历 DOM 树

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

parent()

parents()

parentsUntil()

        parent() 方法

        返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

$ ( document ) . ready ( function ( ) {

$ ( " span " ) . parent ( ) ; 

} ) ;

parents() 方法

返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

$ ( document ) . ready ( function ( ) {

$ ( " span " ) . parents ( ) ;

} ) ;

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

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

$(document).ready(function(){ 

$("span").parentsUntil("div");

});

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个 <div> 元素的所有直接子元素：

$ ( document ) . ready ( function ( ) {

$ ( " div " ) . children ( ) ;

} ) ;

也可以使用可选参数来过滤对子元素的搜索。

下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素

$ ( document ) . ready ( function ( ) {

$ ( " div " ) . children ( " p.1 " ) ; 

} ) ;

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

$ ( document ) . ready ( function ( ) {

$ ( " div " ) . find ( " * " ) ; 

} ) ;

jQuery遍历

siblings() 方法返回被选元素的所有同胞元素。

下面的例子返回 <h2> 的所有同胞元素：

$ ( document ) . ready ( function ( ) {

$ ( " h2 " ) . siblings ( ) ;

} ) ;

next() 方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

下面的例子返回 <h2> 的下一个同胞元素：

$(document).ready(function(){

$("h2").next(); 

});

nextAll() 方法返回被选元素的所有跟随的同胞元素。

下面的例子返回 <h2> 的所有跟随的同胞元素：

$(document).ready(function(){ 

$("h2").nextAll(); 

});

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：

$ ( document ) . ready ( function ( ) {

$ ( " h2 " ) . nextUntil ( " h6 " ) ; 

} ) ;

jQuery遍历

三个最基本的过滤方法是：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() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

下面的例子返回带有类名 "url" 的所有 <p> 元素：

$(document).ready(function(){ 

$("p").filter(".url"); 

});

not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

下面的例子返回不带有类名 "url" 的所有 <p> 元素

$ ( document ) . ready ( function ( ) {

$ ( " p " ) . not ( " .url " ) ;

} ) ;

在 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 ) ; 

} ) ; 

} ) ;

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

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

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

$.get("demo_test.php",

function(data,status){ 

alert("数据: " + data + "\n状态: " + status); 

});

});

$.get() 的第一个参数是我们希望请求的 URL（"demo_test.php"）。

第二个参数是回调函数。

第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

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

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

$("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() 的第一个参数是我们希望请求的 URL ("demo_test_post.php")。

然后我们连同请求（name 和 url）一起发送数据。

"demo_test_post.php" 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。

第三个参数是回调函数。

GET 和 POST 方法的区别：

1、发送的数据数量

在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。

在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。

2、安全性

GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。

POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。

3、加入书签中

GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。

4、编码

在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符。

在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符。

5、可变大小

GET 方法中的可变大小约为 2000 个字符。

POST 方法最多允许 8 Mb 的可变大小。

6、缓存

GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的。

7、主要作用

GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。