jQuery 简介

jQuery 库可以通过一行简单的标记被添加到网页中。

什么是 jQuery ？

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

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

提示：除此之外，Jquery还提供了大量的插件。

为什么使用 jQuery ？

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
很多大公司都在使用 jQuery，例如:

Google
Microsoft
IBM
Netflix

您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？
在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

使用 Staticfile CDN、百度、又拍云、新浪、谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

jQuery 语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()

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

实例:

$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有
元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
$("#test").hide() - 隐藏 id=“test” 的元素

你对 CSS 选择器熟悉吗？
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。

文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

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

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

提示：简洁写法（与以上写法效果相同）:

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

以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。

jQuery 入口函数:

$(document).ready(function(){
    
    
    // 执行代码
});

或者

$(function(){
    
    
    // 执行代码
});

JavaScript 入口函数:

window.onload = function () {
    
    
    // 执行代码
}

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

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

jQuery 选择器

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

jQuery 选择器

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

元素选择器

jQuery 元素选择器基于元素名选取元素。
在页面中选取所有

元素:

$("p")

实例
用户点击按钮后，所有

元素都隐藏：

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：

$("#test")

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

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：

$(".test")

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

jQuery 事件

jQuery 是为事件处理特别设计的。

什么是事件？

页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：

在元素上移动鼠标。
选取单选按钮
点击元素

在事件中经常使用术语"触发"（或"激发"）例如： “当您按下按键时触发 keypress 事件”。
常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
    
    
    // 动作触发后执行的代码!!
});

常用的 jQuery 事件方法

$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个

元素上触发时，隐藏当前的

元素：

实例
$("p").click(function(){
    
    
  $(this).hide();
});

dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

jQuery 效果

jQuery 效果- 隐藏和显示

隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！

jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

语法:

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

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法，并使用回调函数：

实例
$(document).ready(function(){
    
    
  $(".hidebtn").click(function(){
    
    
    $("div").hide(1000,"linear",function(){
    
    
      alert("Hide() 方法已完成!");
    });
  });
});

第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 “swing”，其他可以使用相关的插件）。

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：

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

尝试一下 »
语法:

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

jQuery 效果 - 淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery Fading 方法

通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法:
$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：

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

尝试一下 »

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法:
$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法:
$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法:
$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：

实例
$("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 效果 - 滑动

jQuery 滑动方法可使元素上下滑动。

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。
语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法：

实例
$("#flip").click(function(){
    
    
  $("#panel").slideDown();
});

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

语法:
$(selector).slideUp(speed,callback);

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

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。

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

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

jQuery 效果- 动画

jQuery animate() 方法允许您创建自定义的动画。

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。
语法：

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

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把

元素往右边移动了 250 像素：

实例
$("button").click(function(){
    
    
  $("div").animate({
    
    left:'250px'});
});

默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position
属性设置为 relative、fixed 或 absolute！

jQuery animate() - 操作多个属性

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

实例
$("button").click(function(){
    
    
  $("div").animate({
    
    
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

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

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用
paddingLeft 而不是 padding-left，使用 marginRight 而不是
margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从jquery.com下载颜色动画插件。

jQuery animate() - 使用相对值

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

实例
$("button").click(function(){
    
    
  $("div").animate({
    
    
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

jQuery animate() - 使用预定义的值

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

实例
$("button").click(function(){
    
    
  $("div").animate({
    
    
    height:'toggle'
  });
});

jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

实例 1
$("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");
});

队列操作

jquery中有一个Queue队列的接口，这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的，Queue队列如同data数据缓存与Deferred异步模型一样，都是jQuery库的内部实现的基础设施
Queue队列
队列是一种特殊的线性表，只允许在表的前端（队头）进行删除操作（出队），在表的后端（队尾）进行出入操作（入队），队列的特点是先进先出，最先插入的元素最先被删除。
为什么要引入队列

var a = 1;
setTimeout(function(){
    
    
　　a=2;
},0)
alert(a);

我们一直习惯于线性的编写代码逻辑，但是在JavaScript编程几乎总是伴随着异步操作：
setTImeout，css3Transition/Animation,ajax,dom的绘制，postmessage，web Database 等等，大量异步操作所带来的回调函数会把我们的算法分解，对于“异步+回调”的模式，怎么“拉平”异步操作使之跟同步一样，因为异步操作进行流程控制的时候无非避免的要嵌套大量的回调逻辑，所以就会出现 promises 约定了。
那么 jQuery 引入队列其实从一个角度上可以认为：允许一系列函数被异步地调用而不会阻塞程序。
看一个代码段：

$("#Aaron").slideUp().fadeIn()

这是 jQuery 的一组动画链式序列，它的内部其实就是一组队列 Queue，所以队列和 Deferred 地位类似，是一个内部使用的基础设施。

当 slideUp 运行时，fadeIn 被放到 fx 队列中
当 slideUp 完成后，从队列中被取出运行

Queue 函数允许直接操作这个链式调用的行为，同时 Queue 可以指定队列名称获得其他能力而不局限于 fx 队列。
jQuery 提供了 2 组队列操作的 API：

jQuery.queue/dequeue
jQuery.fn.queue/dequeue

但是不同与普通队列定义的是：

jQuery.queue 和 jQuery.fn.queue 不仅执行出队操作返回队头元素，还会自动执行返回的队头元素
fn 是扩展在原型上的高级API是提供给实例使用的
.queue/.dequeue 其内部是调用的 .queue，.dequeue 静态的底层方法实现入列与出列

2.动画调度

对于 jQuery 的动画的设计我们要分 2 个层面理解：

每一个动画效果可以看作一个独立的动画对象，每个对象都实现了针对自己这个动画的生命周期的控制
动画对象与动画对象之间其实是没有直接关系，但是为了做到连续调用就需要引入一套队列机制也就是 Queue 来控制对象之间的转换的控制

动画的源码：

animate: function(prop, speed, easing, callback) {
    
    
   doAnimation = function() {
    
    
      var anim = Animation(this, args, optall);
   };
   this.queue(optall.queue, doAnimation);
}

这个代码缩减了，但是我们上面提到的最重要的 2 点这里都涉及到了：通过 queue 调度动画的之间的衔接，Animation 方法执行单个动画的封装。
jQuery 在 queue 的调度上涉及了一个关键的处理：同步与异步代码同时执行，同步收集动画序列，异步调用序列，看看整个调用的流程是这样的：

通过多个 animate 方法形成动画链，那么这个动画链其实都是会加入到 queue 队列里面
在每一次 queue 方法中会把动画数据写到队列中，然后取出队列中的第一个序列通过 dequeue 方法执行
开始执行之前写一个进程锁“inprogress”到 queue
里面，代表这个动画还在执行中，防止同个序列的多个动画重复执行，这个就是异步执行同步收集的处理方案
此时动画开始了，这里注意动画是在异步执行的同步的代码，继续调用下一个 animate
执行同样的 animate 方法逻辑但是此时问题来了，动画可能还在执行可是后续的 animate
还在继续调用，所以这个时候后面的动画代码就需要等待了（进程锁）
队列头是有一把“inprogress”进程锁的，那么这时候动画只需要加入队列，但是可以通过 inprogress 是否存在来判断是否执行
所有的 animate 方法在加入队列都是按照以上的逻辑依次执行，动画执行完毕了就会有一个结束通知，然后从 queue
取出第一个队列继续执行了，如此循环

以上是整个动画的调度一个流程，其实都是利用队列异步的空闲然后执行同步的代码，这样在处理上是没有浪费资源的，而且精确度也是最高的。

jQuery 停止动画

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:

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

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法，不带参数：

实例
$("#stop").click(function(){
    
    
  $("#panel").stop();
});

动画队列停止动画测试，只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行：

$(document).ready(function(){
    
    
  $("#flip").click(function(){
    
    
    $("#panel").slideDown(5000);
    $("#panel").slideUp(5000);
  });
  $("#stop").click(function(){
    
    
    $("#panel").stop();
  });
});

可以在 stop() 中设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画：

$(document).ready(function(){
    
    
  $("#flip").click(function(){
    
    
    $("#panel").slideDown(5000);
    $("#panel").slideUp(5000);
  });
  $("#stop").click(function(){
    
    
    $("#panel").stop(true);
  });
});

jQuery Callback 方法

Callback 函数在当前动画 100% 完成之后执行。

jQuery 动画的问题

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子：$(“p”).hide(“slow”)
speed 或 duration 参数可以设置许多不同的值，比如 “slow”, “fast”, “normal” 或毫秒。
实例
以下实例在隐藏效果完全实现后回调函数:

使用 callback 实例
$("button").click(function(){
    
    
  $("p").hide("slow",function(){
    
    
    alert("段落现在被隐藏了");
  });
});

以下实例没有回调函数，警告框会在隐藏效果完成前弹出：

没有 callback(回调)
$("button").click(function(){
    
    
  $("p").hide(1000);
  alert("段落现在被隐藏了");
});

jQuery - 链(Chaining)

通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

jQuery 方法链接

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。
不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
提示：这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。“p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动：

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

如果需要，我们也可以添加多个方法调用。
提示：当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。
如下书写也可以很好地运行：

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

jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

jQuery HTML

jQuery - 获取内容和属性

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：“W3C
文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获得内容 - text()、html() 以及 val()

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

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

下面的例子演示如何通过 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());
});

获取属性 - attr()

jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：

实例
$("button").click(function(){
    
    
  alert($("#runoob").attr("href"));
});

attr 和 prop 的区别介绍：
对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。
实例 1：

<a href="https://www.runoob.com" target="_self" class="btn">菜鸟教程</a>

这个例子里 <a> 元素的 DOM 属性有: href、target 和 class，这些属性就是 <a> 元素本身就带有的属性，也是 W3C 标准里就包含有这几个属性，或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop 方法。

<a href="#" id="link1" action="delete" rel="nofollow">删除</a>

这个例子里 <a> 元素的 DOM 属性有: href、id 和 action，很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的，<a> 元素本身是没有这个属性的。这种就是自定义的 DOM 属性。处理这些属性时，建议使用 attr 方法。
prop()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是空字符串。
attr()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是 undefined。
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

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

下面的例子演示如何通过 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");
});

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：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 + ")"; 
    });
});

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：

实例
$("button").click(function(){
    
    
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性：

实例
$("button").click(function(){
    
    
    $("#runoob").attr({
    
    
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法：

实例
$("button").click(function(){
    
    
  $("#runoob").attr("href", function(i,origValue){
    
    
    return origValue + "/jquery"; 
  });
});

jQuery - 添加元素

通过 jQuery，可以很容易地添加新元素/内容。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

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

jQuery append() 方法

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

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

jQuery prepend() 方法

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

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

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。
不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 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() 和 before() 方法

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

实例
$("img").after("在后面添加文本");
 
$("img").before("在前面添加文本");

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

实例
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

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>

结果是这样的:

<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>

after

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>

结果是这样的:

<p>
  <span class="s1">s1</span>
</p>
<span class="s2">s2</span>

总结：

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

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

参数可以是个 list:

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]);          // 在图片后添加文本
}

jQuery - 删除元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

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

jQuery remove() 方法

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

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

jQuery empty() 方法

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

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

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class=“italic” 的所有

元素：

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

jQuery - 获取并设置 CSS 类

通过 jQuery，可以很容易地对 CSS 元素进行操作。

jQuery 操作 CSS

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

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

jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

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

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

实例
$("button").click(function(){
    
    
  $("body div:first").addClass("important blue");
});

jQuery removeClass() 方法

下面的例子演示如何在不同的元素中删除指定的 class 属性：

实例
$("button").click(function(){
    
    
  $("h1,h2,p").removeClass("blue");
});

jQuery toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

实例
$("button").click(function(){
    
    
  $("h1,h2,p").toggleClass("blue");
});

jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：
css(“propertyname”);
下面的例子将返回首个匹配元素的 background-color 值：

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

设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

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

设置多个 CSS 属性

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

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

下面的例子将为所有匹配元素设置 background-color 和 font-size：

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

jQuery 尺寸

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

jQuery 尺寸方法

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

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

jQuery 尺寸

在这里插入图片描述

jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
下面的例子返回指定的

元素的宽度和高度：

实例
$("button").click(function(){
    
    
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
下面的例子返回指定的 <div> 元素的 inner-width/height：

实例
$("button").click(function(){
    
    
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

在这里插入图片描述

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
下面的例子返回指定的

元素的 outer-width/height：

实例
$("button").click(function(){
    
    
  var txt="";
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

jQuery 遍历

什么是遍历？

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
在这里插入图片描述

图示解析：

<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

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

遍历 DOM

jQuery 提供了多种遍历 DOM 的方法。
遍历方法中最大的种类是树遍历（tree-traversal）。
下一章会讲解如何在 DOM 树中向上、下以及同级移动。

jQuery 遍历 - 祖先

祖先是父、祖父或曾祖父等等。
通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。

向上遍历 DOM 树

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

parent()
parents()
parentsUntil()

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个元素的直接父元素：

实例
$(document).ready(function(){
    
    
  $("span").parent();
});

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
下面的例子返回所有元素的所有祖先：

实例
$(document).ready(function(){
    
    
  $("span").parents();
});

您也可以使用可选参数来过滤对祖先元素的搜索。
下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
实例

$(document).ready(function(){
    
    
  $("span").parents("ul");
});

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

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

jQuery 遍历 - 后代

后代是子、孙、曾孙等等。
通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

children()
find()

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
下面的例子返回每个

元素的所有直接子元素：

实例
$(document).ready(function(){
    
    
  $("div").children();
});

您也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 “1” 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

实例
$(document).ready(function(){
    
    
  $("div").children("p.1");
});

jQuery find() 方法

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素：

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

下面的例子返回 <div> 的所有后代：

实例
$(document).ready(function(){
    
    
  $("div").find("*");
});

jQuery 遍历 - 同胞(siblings)

同胞拥有相同的父元素。
通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。

在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历：

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。
下面的例子返回 <h2> 的所有同胞元素：

实例
$(document).ready(function(){
    
    
  $("h2").siblings();
});

您也可以使用可选参数来过滤对同胞元素的搜索。
下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：
实例

$(document).ready(function(){
    
    
  $("h2").siblings("p");
});

jQuery next() 方法

next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
下面的例子返回 <h2> 的下一个同胞元素：

实例
$(document).ready(function(){
    
    
  $("h2").next();
});

jQuery nextAll() 方法

nextAll() 方法返回被选元素的所有跟随的同胞元素。
下面的例子返回 <h2> 的所有跟随的同胞元素：
实例

$(document).ready(function(){
    
    
  $("h2").nextAll();
});

jQuery nextUntil() 方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：

实例
$(document).ready(function(){
    
    
  $("h2").nextUntil("h6");
});

jQuery prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

jQuery 遍历- 过滤

缩小搜索元素的范围

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

jQuery first() 方法

first() 方法返回被选元素的首个元素。
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

实例
$(document).ready(function(){
    
    
  $("div p").first();
});

jQuery last() 方法

last() 方法返回被选元素的最后一个元素。
下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：

实例
$(document).ready(function(){
    
    
  $("div p").last();
});

jQuery eq() 方法

eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

实例
$(document).ready(function(){
    
    
  $("p").eq(1);
});

jQuery filter() 方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
下面的例子返回带有类名 “url” 的所有 <p> 元素：

实例
$(document).ready(function(){
    
    
  $("p").filter(".url");
});

jQuery not() 方法

not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。
下面的例子返回不带有类名 “url” 的所有

元素：

实例
$(document).ready(function(){
    
    
  $("p").not(".url");
});

jQuery Ajax

jQuery - AJAX 简介

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

什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
如果没有 jQuery，AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

jQuery - AJAX load() 方法

jQuery load() 方法

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

语法:
$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
这是示例文件（“demo_test.txt”）的内容：

<h2>jQuery AJAX 是个非常棒的功能！</h2>
<p id="p1">这是段落的一些文本。</p>

下面的例子会把文件 “demo_test.txt” 的内容加载到指定的

元素中：

实例
$("#div1").load("demo_test.txt");

也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 “demo_test.txt” 文件中 id=“p1” 的元素的内容，加载到指定的 <div> 元素中：

实例
$("#div1").load("demo_test.txt #p1");

可选的 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);
  });
});

为了避免多页面情形下的代码重复，可以利用 load() 方法，将重复的部分（例如导航栏）放入单独的文件，使用下列方法进行导入：

//1.当前文件中要插入的地方使用此结构：
<div class="include" file="***.html"></div>

//2.***.html中放入内容，用html格式仅仅因为会有编辑器的书写辅助。。

//3.代码：
$(".include").each(function() {
    
    
    if (!!$(this).attr("file")) {
    
    
        var $includeObj = $(this);
        $(this).load($(this).attr("file"), function(html) {
    
    
            $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
        })
    }
});

或者在index文件里只写重复部分，剩下的一股脑放各自单独文件 load() 进来~

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

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求：GET vs. POST

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

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

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
如需学习更多有关 GET 和 POST 以及两方法差异的知识，请阅读 HTTP 方法 - GET 对比 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);
  });
});

$.get() 的第一个参数是我们希望请求的 URL（"demo_test.php"）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
提示：这个 PHP 文件 (“demo_test.php”) 类似这样：

demo_test.php 文件代码:
<?php
echo '这是个从PHP文件中读取的数据。';
?>

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() 的第一个参数是我们希望请求的 URL ("demo_test_post.php")。
然后我们连同请求（name 和 url）一起发送数据。
“demo_test_post.php” 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
提示： 这个 PHP 文件 (“demo_test_post.php”) 类似这样：

demo_test_post.php 文件代码:
<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>

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 方法主要用于更新数据。

jQuery 其他

jQuery - noConflict() 方法

如何在页面上同时使用 jQuery 和其他框架？

jQuery 和其他 JavaScript 框架

正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。
如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？
其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。
jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

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 仍然在工作!");
  });
});

jQuery详细总结及提升

目录

jQuery 简介

什么是 jQuery ？

为什么使用 jQuery ？

jQuery 语法

jQuery 语法

文档就绪事件

jQuery 选择器

jQuery 选择器

元素选择器

#id 选择器

.class 选择器

jQuery 事件

什么是事件？

jQuery 事件方法语法

常用的 jQuery 事件方法

jQuery 效果

jQuery 效果- 隐藏和显示

jQuery hide() 和 show()

jQuery toggle()

jQuery 效果 - 淡入淡出

jQuery Fading 方法

jQuery fadeIn() 方法

jQuery fadeOut() 方法

jQuery fadeToggle() 方法

jQuery fadeTo() 方法

jQuery 效果 - 滑动

jQuery 滑动方法

jQuery slideDown() 方法

jQuery slideUp() 方法

jQuery slideToggle() 方法

jQuery 效果- 动画

jQuery 动画 - animate() 方法

jQuery animate() - 操作多个属性

jQuery animate() - 使用相对值

jQuery animate() - 使用预定义的值

jQuery animate() - 使用队列功能

队列操作

2.动画调度

jQuery 停止动画

jQuery stop() 方法

jQuery Callback 方法

jQuery 动画的问题

jQuery - 链(Chaining)

jQuery 方法链接

jQuery HTML

jQuery - 获取内容和属性

jQuery DOM 操作

获得内容 - text()、html() 以及 val()

获取属性 - attr()

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

text()、html() 以及 val() 的回调函数

设置属性 - attr()

attr() 的回调函数

jQuery - 添加元素

添加新的 HTML 内容

jQuery append() 方法

jQuery prepend() 方法

通过 append() 和 prepend() 方法添加若干新元素

jQuery after() 和 before() 方法

通过 after() 和 before() 方法添加若干新元素

jQuery - 删除元素

删除元素/内容

jQuery remove() 方法

jQuery empty() 方法

过滤被删除的元素

jQuery - 获取并设置 CSS 类

jQuery 操作 CSS

jQuery addClass() 方法

jQuery removeClass() 方法

jQuery toggleClass() 方法

jQuery css() 方法

jQuery css() 方法

返回 CSS 属性

设置 CSS 属性

设置多个 CSS 属性

jQuery 尺寸

jQuery 尺寸方法