$("p").after("<b>hello</b>"); //每个p节点同级之后插入内容
$("p").before("<b>hello</b>"); //在每个p节点同级之前插入内容
$("p").insertAfter("#node"); //所有p节点插入到id为node节点的后面
$("p").insertBefore("#node"); //所有p节点插入到id为node节点的前面

4.14、DOM替换

$("p").replaceWith("<b>Paragraph. </b>"); //将所有匹配的节点替换成指定的HTML或DOM节点
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的节点替换掉所有 selector匹配到的节点

4.15、DOM删除

$("p").empty(); //删除匹配的节点集合中所有的子节点，不包括本身
$("p").remove(); //删除所有匹配的节点,包括本身
$("p").detach(); //删除所有匹配的节点(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)

4.16、DOM复制

$("p").clone() 　　//克隆节点并选中克隆的副本
$("p").clone(true) //布尔值指事件处理函数是否会被复制

4.17、DOM加载完成事件

$(document).ready(function(){
    您的代码...
});

//缩写
$(function($) {
   您的代码...
});

4.18、绑定事件

//bind 为每个匹配节点绑定事件处理函数，绑定多个用{}。
$("p").bind("click", function(){
    alert( $(this).text() );
});
$('#div1').bind({
    "mouseover":function () {
         $('#div1').parent().removeClass("hide");
    },"mouseout":function () {
         $('#div1').parent().addClass("hide");
    }
});

$("p").one( "click", function(){}) //事件绑定后只会执行一次
$("p").unbind( "click" ) //反绑一个事件

//与bind 不同的是当时间发生时才去临时绑定。
$("p").delegate("click",function(){
   您的代码
});

$("p").undelegate(); 　　　//p节点删除由 delegate() 方法添加的所有事件
$("p").undelegate("click") //从p节点删除由 delegate() 方法添加的所有click事件

$("p").click(); 　　//单击事件
$("p").dblclick(); //双击事件
$("input[type=text]").focus() //节点获得焦点时,触发 focus 事件
$("input[type=text]").blur() //节点失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup() //节点上放松鼠标按钮时触发事件
$("p").mousemove() //当鼠标指针在指定的节点中移动时触发事件
$("p").mouseover() //当鼠标指针位于节点上方时触发事件
$("p").mouseout() 　//当鼠标指针从节点上移开时触发事件
$(window).keydown() //当键盘或按钮被按下时触发事件
$(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup() //当按钮被松开时触发事件
$(window).scroll() //当用户滚动时触发事件
$(window).resize() //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change() //当节点的值发生改变时触发事件
$("input").select() //当input 节点中的文本被选择时触发事件
$("form").submit() //当提交表单时触发事件
$(window).unload() //用户离开页面时

4.19、事件对象

$("p").click(function(event){ 
     alert(event.type); //"click" 
});

(evnet object) 属性方法：
event.pageX 　 //事件发生时，鼠标距离网页左上角的水平距离
event.pageY 　 //事件发生时，鼠标距离网页左上角的垂直距离
event.type 　　//事件的类型
event.which 　 //按下了哪一个键
event.data 　　//在事件对象上绑定数据，然后传入事件处理函数
event.target 　//事件针对的网页节点
event.preventDefault() 　//阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation() //停止事件向上层节点冒泡

4.20、动态事件绑定

//当p中增加span时仍然有效
$("p").on("click",'span',function(){
     alert( $(this).text() );
});

4.21、动画效果

$("p").show() 　　　　//显示隐藏的匹配节点
$("p").show("slow"); //参数表示速度,("slow","normal","fast"),也可为600毫秒
$("p").hide() 　　　　//隐藏显示的节点
$("p").toggle(); 　　 //切换 显示/隐藏

$("p").slideDown("600"); //用600毫秒时间将段落滑下
$("p").slideUp("600"); 　//用600毫秒时间将段落滑上
$("p").slideToggle("600"); //用600毫秒时间将段落滑上，滑下淡入淡出

$("p").fadeIn("600"); 　　 //用600毫秒时间将段落淡入
$("p").fadeOut("600"); 　　 //用600毫秒时间将段落淡出
$("p").fadeToggle("600"); 　//用600毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6); //用600毫秒时间将段落的透明度调整到0.6

4.22、工具方法

$("#form1").serialize() //序列表表格内容为字符串。
$("select, :radio").serializeArray(); //序列化表单元素为数组返回 JSON 数据结构数据
$.trim() 　　//去除字符串两端的空格
$.each() 　　//遍历一个数组或对象，for循环
$.inArray() //返回一个值在数组中的索引位置，不存在返回-1 
$.grep() 　 //返回数组中符合某种标准的节点
$.extend({a:1,b:2},{b:3,c:4},{c:5:d:6}) //将多个对象，合并到第一个对象{a:1,b:3,c:5,d:6}
$.makeArray() //将对象转化为数组
$.type() //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
$.isArray() //判断某个参数是否为数组
$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)
$.isFunction() //判断某个参数是否为函数
$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象
$.support() //判断浏览器是否支持某个特性

4.23、AJAX

//保存数据到服务器，成功时显示信息
$.ajax({
     type: "POST",
     url: "some.php",
     data: "name=John&location=Boston",
     success: function(msg){
          alert( "Data Saved: " + msg );
     }
});

//加载 feeds.html 文件内容。
$("#feeds").load("feeds.html");

//请求 test.php 网页，传送2个参数，忽略返回值。
$.get("test.php", { name: "John", time: "2pm" } );

//从 Flickr JSONP API 载入 4 张最新的关于猫的图片。
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format
=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
         $("<img/>").attr("src", item.media.m).appendTo("#images");
         if ( i == 3 ) return false;
   });
});

//加载并执行 test.js ，成功后显示信息
$.getScript("test.js", function(){
     alert("Script loaded and executed.");
});

//向页面 test.php 发送数据，并输出结果（HTML 或 XML，取决于所返回的内容）：
$.post("test.php", { name: "John", time: "2pm" },
function(data){
     alert("Data Loaded: " + data);
});

//AJAX 请求完成时执行函数。
$("#msg").ajaxComplete(function(event,request, settings){
     $(this).append("<li>请求完成.</li>");
});

//AJAX 请求失败时显示信息。
$("#msg").ajaxError(function(event,request, settings){
     $(this).append("<li>出错页面:" + settings.url + "</li>");
});

//AJAX 请求发送前显示信息。
$("#msg").ajaxSend(function(evt, request, settings){
     $(this).append("<li>开始请求: " + settings.url + "</li>");
});

//AJAX 请求开始时显示信息。
$("#loading").ajaxStart(function(){
     $(this).show();
});

//AJAX 请求结束后隐藏信息。
$("#loading").ajaxStop(function(){
     $(this).hide();
});

//当 AJAX 请求成功后显示消息。
$("#msg").ajaxSuccess(function(evt, request, settings){
     $(this).append("<li>请求成功!</li>");
});

//请求前过滤
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) { 
     // Modify options, control originalOptions, store jqXHR, etc 
});

//设置全局 AJAX 默认选项，设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。
$.ajaxSetup({
     url: "/xmlhttp/",
     global: false,
     type: "POST"
});
$.ajax({ data: myData });

五、AJAX详解

AJAX全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的开发技术。其使用基于Web2.0标准的XHTML+CSS表示方式，使用DOM（Document Object Model）进行动态显示及交互，使用XML和XSLT进行数据交换及其相关操作，使用XMLHttpRequest进行异步数据查询、检索，使用JavaScript将所有的东西绑定在一起。

AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其他一些基于XML的Web Service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应速度更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，Web服务的处理时间也就减少了。

jQuery为AJAX带来方便，语法格式如下：

jQuery.ajax(url,[settings])

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见

.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax()可以不带任何参数直接使用。

注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。