时间戳

首页 > 技术文章 > jQuery小记

jQuery小记

newcheer 2021-02-06 11:43 原文

jQuery

Ⅰ. 简介

jQuery 是一套跨浏览器的 JavaScript函数库，简化了 HTML 与 JavaScript 之间的操作

jQuery 由 约翰·雷西格(John Resig) 于 2006年1月发布；目前是最受欢迎的 JavaScript库

jQuery 官方网站：jQuery.com

若需使用 jQuery,需要去官网下载 jQuery库 或 使用 微软/谷歌的服务器获取，通过CDN(Content Delivery Networks 内容分发网络)从距离最近的服务器获取

  1. Google CDN:

    <head>
  <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
  </script>
</head>

  2. Microsoft CDN:

    <head>
  <script src = "http://ajax.aspnetch.com/ajax/jQuery/jquery-1.8.0.js">
  </script>
</head>

使用 谷歌/微软服务器上的 jQuery,优势在于，许多用户在访问其他站点时，已经从谷歌/微软加载过 jQuery，

当他们访问您的网站，会缓存加载的 jQuery库 同时 大多数 CDN 都是从用户距离最近的服务器返回响应，已达到减少加载的时间

jQuery库包含 HTML元素选取/操作、CSS操作、HTML事件函数、JavaScript特效和动画、HTML DOM 遍历和修改、AJAX 以及 Utilities 等特性

Ⅱ. jQuery 语法

jQuery 使用的语法 是 XPath(XML Path Language XML路径语言)和 CSS选择器 语法的组合

1. 基础语法

  1. 语法代码演示

    $(selector).action()
// $定义 jQuery
// selector 查询/查找 HTML 元素
// action( ) 执行对元素的操作

  2. 文档就绪函数

    // 为了防止文档在 完全加载(就绪)之前 运行jQuery代码，应将所有的jQuery函数置于一个document ready函数中
$(document).ready(function(){
  ---jQuery functions go here---
})

2. jQuery选择器

  1. jQuery 元素选择器

    jQuery选择器可以对元素组或单个元素进行操作

    $("p")                  // 选取所有<p>元素
$("*")                  // 选取所有元素
$("p.intro")            // 选取所有 class="intro"的<p>元素
$("p#demo")             // 选取所有 id = "demo"的<p>元素
$(this)                 // 选取当前 HTML元素
$("ul li:eq(3)")        // 选取列表中第四个元素(index从0开始)
$("ul li:gt(3)")        // 选取索引 index大于3的所有元素
$("ul li:lt(3)")        // 选取索引 index小于3的所有元素
$("input:not(:empty)")  // 选取所有不为空的 input元素
$("ul li:first")        // 选取每个<ul>的第一个<li>元素
$("p:last")             // 选取最后一个<p>元素
$("tr:even")            // 选取所有偶数<tr>元素
$("tr:odd")             // 选取所有奇数<tr>元素
$("div#id .head")       // 选取 id = "intro"的 <div>元素中所有 class = "head"的元素
$(".intro.demo")        // 选取所有 class = "intro" 下所有 class = "demo"的元素
$(":header")            // 选取所有标题元素<h1> - <h6>
$(":animated")          // 选取所有动画元素
$(":contains('a')")     // 选取所有包含 a字符 的元素
$(":empty")             // 选取所有无子(元素)节点的元素
$("p:hidden")           // 选取所有隐藏的<p>元素
$("table:visible")      // 选取所有可见的表格
$(":text")              // 选取所有 type= "text" 的<input>元素
$(":password")          // 选取所有 type= "password" 的<input>元素
$(":radio")             // 选取所有 type= "radio" 的<input>元素
$(":checkbox")          // 选取所有 type= "checkbox" 的<input>元素
$(":submit")            // 选取所有 type= "submit" 的<input>元素
$(":reset")             // 选取所有 type= "reset" 的<intpu>元素
$(":button")            // 选取所有 type= "button" 的<input>元素
$(":image")             // 选取所有 type= "image" 的<input>元素
$(":file")              // 选取所有 type= "file" 的<input>元素
$(":enabled")           // 选取所有激活的 input元素
$(":disabled")          // 选取所有禁用的 input元素
$(":selected")          // 选取所有被选取的 input元素
$(":checked")           // 选取所有被选中的 input元素

  2. jQuery 属性选择器

    jQuery 使用 XPath表达式 来选择带有给定属性的元素

    $("[href]")          // 选取所有带有 href 属性的元素
$("[href='#']")      // 选取所有带有 href 值等于 "#"的元素
$("[href$='.jpg']")  // 选取所有 href 值以 ".jpg"结尾的元素

  3. jQuery CSS选择器

    jQuery CSS选择器可用于改变 HTML元素的 CSS属性

    $("p").css("background-color","red");    // 把所有 p元素的背景颜色改为红色

Ⅲ. jQuery 事件

jQuery事件处理方法是 jQuery中的核心函数

将 jQuery函数 置于一个或多个独立的js文件更易于维护和修改

由于 jQuery是未处理HTML事件而特别设计的，应遵循以下原则，将使您的代码更恰当且易于维护：

  • 把所有jQuery代码置于事件处理函数中
  • 把所有事件处理函数置于文档就绪事件处理器中
  • 把jQuery代码置于单独的.js文件中
  • 若存在名称冲突，需重命名 jQuery库

1. 引用外部 jQuery文件

  1. 示例代码

    <head>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="my_jquery_function.js"></script>
</head>
<!--在html头部用<script>标签中的src属性引用外部jquery函数文件-->

特别说明:

​ jQuery 使用 $符号 作为jQuery 的简写方式

​ 某些其他 JavaScript库中的函数(比如 Prototype)同样使用 $符号

​ jQuery 使用 noConflict( ) 方法解决这个问题

​ 例如： var jq = jQuery.noConflict( ); 使用 jq来代替 $符号

2. jQuery 事件函数

  1. 代码演示

    // 1. bind( ) 为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
$("button").bind("click",function(){
  $("p").slideToggle();
});
// 代码解释：使用滑动效果隐藏p元素 slideToggle( ) 滑动切换

// 2. blur( ) 当元素失去焦点时发生 blur事件
$("input").blur(function(){
 $("input").css("background-color","#D6D6FF");
});
// 代码解释：当input输入框失去焦点，则改变其背景色

// 3. focus( ) 当元素获得焦点时发生 focus事件
$("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
})
// 代码解释：当input输入框获得焦点，则改变其背景色

// 4. click( ) 当点击元素时，会发生 click事件
$("button").click(function(){
    $("p").sideToggle( );
});
// 代码解释：当点击按钮时，滑动隐藏/显示p元素的内容

// 5. dblclick( ) 当双击元素时，会发生 dblclick事件
$("button").dblclick(function(){
    $("p").slideToggle( );
});
// 当双击按钮，滑动隐藏/显示p元素的内容

// 6. delegate( ) 为指定元素的子元素添加一个或多个事件处理程序，并规定这些事件发生时运行的函数
$("div").delegate("button","click",function(){
    $("p").slideToggle( );
});
// 当点击鼠标时，滑动隐藏/显示 div元素下面子元素p元素的内容

// 7. live( ) 为当前或未来的匹配元素添加一个或多个事件处理器(比如由脚本创建的新元素)
$(document).ready(function(){
    $("p").live("click",function(){
        $(this).slideToggle();
    });
    $("button").click(function(){
        $("<p> This is a new paragraph.</p>").insertAfter("button");
    });
});
// 代码解释：点击任意p元素会令其消失，包括本段落；点击按钮，将会在按钮后面插入新的p元素，并且新的p元素被点击后也会消失

// 8. die( ) 移除所有通过 live()函数 添加的事件处理器
$(document).ready(function(){
   $("p").live("click",function(){
      $(this).slideToggle(); 
   });
   $("button#first").click(function(){
      $("<p> This is a new paragraph.</p>").insertAfter("button#first"); 
   });
   $("button#second").click(function(){
       $("p").die();
   });
});
// 代码解释：点击任意p元素会令其消失，包括本段落；点击id为first的按钮，将会在该按钮后面插入新的p元素，并且新的p元素被点击后也会消失；
// 当点击id为second的按钮时，再次点击p元素则没有响应

// 9. error( )  当元素遇到错误(没有正确载入)时，发生error事件
$("img").error(function(){
    $("img").replaceWith("Missing image!");
});
// 代码解释：若图像不存在，则用 Missing image 这样一段文本替代它

//10.event.pageX/Y  获取相对于文档左边缘的鼠标位置，以及相对于文档上边缘的鼠标位置
$(document).mousemove(function(){
  $("span").text("X:"+e.pageX , "Y:"+e.pageY);
});
// 代码解释：显示当前鼠标指针的位置

//11.event.preventDefault( ) 阻止事件的默认动作
$("a").click(function(event){
  event.preventDefault();
});
// 代码解释：阻止 某个链接在被点击的时候打开URL

//12.event.result 包含由被指定事件触发的事件处理器返回的最后一个值
$(document).ready(function(){
  $("button").click(function(e){
    return("最后一次点击鼠标位置是：X:"+e.pageX +",Y:"+e.pageY);
  });
  $("button").click(function(e){
    $("p").html(e.result);
  });
});
// 代码解释：当点击某个按钮，返回最后一次鼠标点击的位置

//13.event.target 规定哪个DOM元素触发了该事件
$(document).ready(function(){
  $("p,button,h1,h2").click(function(event){
    $("div").html("点击事件由一个"+event.target.nodeName +"元素触发")
  });
});
// 代码解释：有 p,button,h1,h2四个元素定义了一个点击事件，若触发了某个事件，将在div里显示具体哪个元素触发了该事件

//14.event.timeStamp 包含从1970年1月1日到事件触发时的毫秒数(时间戳)
$("button").click(function(event){
  $("span").html(event.timeStamp);
});
// 代码解释：显示当对按钮元素的点击事件发生时的时间戳

//15.event.type 描述当前触发了哪种事件类型
$("p").bind('click,dbclick,mouseover,mouseout',function(event){
  $("div").html("事件："+event.type);
});
// 代码解释：p元素定义了click/dbclick/mouseover/mouseout 4个事件，若触发了某个事件，将在div里显示具体触发了哪种类型的事件

//16.event.which 指示具体按了哪个键或按钮
$("input").keydown(function(event){
  $("div").html("Key:"+event.which);
});
// 代码解释：显示具体按了哪个键

//17.keypress/keydown/keyup( ) 当按钮被按下触发keypress/keydown/keyup事件
$("input").keypress(function(){
  $("span").text(i+=1);
});
// 代码解释：计算在输入域中的按键次数

$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});
// 代码解释：当按下按键时，改变文本域的颜色

//18.load( ) 当指定的元素(及子元素)已加载时，会发生load()事件
$("img").load(function(){
  $("div").text("图像已加载");
});
// 代码解释：当图像加载完成时，改变div元素的文本

//19.mousedown()/mouseenter()/mouseleave()/mousemove()/mouseout()/mouseover()/mouseup() 某元素绑定或触发某个鼠标指针事件
$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color","blue");
  });
});
// 代码解释：当鼠标指针穿过p元素时，其背景色为黄色；当鼠标指针离开p元素时，其背景色为蓝色

$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("bakcground-color","pink");
  });
  $("p").mouseout(function(){
    $("p").css("background-color","orange");
  });
});
// 代码解释：当鼠标指针位于p元素上面时，其背景色为紫色；当鼠标指针从p元素移开时，其背景色为橙色

$("button").mouseup(function(){
  $("p").slideToggle();
});
// 代码解释:当鼠标松开按钮时，隐藏或显示p元素

//20.one( ) 向匹配元素添加事件处理器，且每个元素只能触发一次该处理器
$("p").one("click",function(){
  $(this).animate({fonSize:"+=6px"});
});
// 代码解释：当点击p元素时，增加该元素的文本大小且只能增加一次

//21.ready( )  当DOM已经加载，并且页面(包括图像)已经完全呈现时，会触发ready事件
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideToggle();
  });
});
// 代码解释：当文档加载后，激活该函数

//22.resize( ) 当调整浏览器窗口的大小时，会触发 resize事件
$(window).resize(function(){
  $("span").text(x+=1);
});
// 代码解释：对浏览器窗口被调整大小次数进行计数

//23.scroll( ) 当用户滚动指定元素时，会触发scroll事件
$("div").scroll(function(){
  $("span").text(x+=1);
});
// 代码解释：对div元素被滚动的次数进行计数

//24.select( ) 当 textarea或文本类型的input元素中的文本被选中时，会触发select事件
$("input").select(function(){
  $("input").after("文本已被标记!");
});
// 代码解释：在文本域后添加文本，并选中时，将显示提示文本

//25.submit( ) 当提交表单时，会触发submit事件(仅适用于表单元素)
$("form").submit(function(){
  alert("表单已被提交!");
});
// 代码解释：当提交表单时，显示警告框

//26.toggle( ) 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件
$("button").toggle(
	function(){
  	$("button").css("background-color","red");  
  }
  function(){
  	$("button").css("background-color","pink");
	}
	function(){
    $("button").css("background-color","orange");
  }
);
// 代码解释：通过点击按钮来切换不同的按钮背景色

//27.trigger( ) 触发被选元素的指定事件类型
$("input").select(function(){
  $("input").after("文本被选中!");
});
$("button").click(function(){
  $("input").trigger("select");
});
// 代码解释：点击按钮触发 input元素的 select事件

//28.unbind( )  移除被选元素的事件处理程序
$("button").click(function(){
  $("p").unbind();
});
// 代码解释：移除所有p元素的事件处理器

//29.undelegate( )  删除有 delegate()方法添加的一个或多个事件处理程序
$("bidy").delegate("p","click",function(){
  $(this).sliderToggle();
});
$("button").click(function(){
  $("body").undelegate();
});
// 代码解释：从所有元素删除由delegate()方法添加的所有事件处理器
//30.unload( ) 当点击某个离开页面的链接/在地址栏键入新的url/使用前进或后退按钮/关闭浏览器/重加载页面时，会触发 unload事件
$(window).unload(function(){
  alert("Goodbye!");
});
// 代码解释：当用户离开本页面，弹出一个警告框

Ⅳ. jQuery 效果

1. jQuery 隐藏/显示

  1. hide( ) 和 show( ) 方法隐藏和显示 HTML元素

    // 语法
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
// 语法解释：可选的speed参数规定隐藏/显示的速度，可取值：slow/fast/毫秒；可选的callback参数是隐藏/显示完成后执行的函数名称

$("$hide").click(function(){
    $("p").hide(1000);
});
$("$show").click(function(){
    $("p").show(2000);
})
// 代码解释：当点击id=hide的按钮时，以1000ms速度隐藏p元素；当点击id=show的按钮时，以3000ms速度显示p元素

  2. toggle( ) 方法可切换hide()和show()方法

    // 语法
$(selector).toggle(speed,callback);

$("button#toggle").click(function(){
    $("p").toggle(5000);
});
// 代码解释：当点击id=toggle的按钮时，以5000ms速度显示被隐藏的元素，并隐藏已显示的元素

2. jQuery 淡入淡出

  1. fadeOut( ) 方法用于淡出可见元素

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

$("button#fadeOut").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut(slow);
    $("#div3").faseOut(2000);
});
// 代码解释：当点击id=fadeOut按钮时，分别以默认/slow/2000ms速度淡出id为div1/div2/div3的元素

  2. fadeIn( ) 方法用于淡入隐藏元素

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

$("button#fadeIn").click(function(){
    $("#div4").fadeIn();
    $("#div5").fadeIn(fast);
    $("#div6").fadeIn(1000);
})
// 代码解释：当点击id=fadeIn按钮时，分别以默认/fast/1000ms速度淡入id为div4/div5/div6的元素

  3. fadeToggle( ) 方法可在fadeIn()和fadeOut()之间进行切换

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

$("button#fadeToggle").click(function(){
   $("#div7").fadeToggle();
   $("#div8").fadeToggle();
   $("#div9").fadeToggle();
});
// 代码解释: 若元素已淡出，则fadeToggle()会向元素添加淡入效果；若元素已淡入，则fadeToggle()会向元素添加淡出效果

  4. fadeTo() 方法允许渐变为给定的不透明度(值介于0~1之间)

    $(selector).fadeTo(speed,opacity,callback);
// 语法解释：必须的speed参数给定效果时长；必须的opacity参数给定淡入淡出效果的不透明度;可选的callback参数是该函数完成后所执行的函数名称

$("button#fadeTo").click(function(){
   $("#div10").fadeTo("slow",0.24);
   $("#div11").fadeTo("fast",0.5);
   $("#div12").fadeTo(2000,0.8);
});
// 代码解释：点击id=fadeTo的按钮，分别以各自设置的参数淡出id为div10/div11/div12的元素

3. jQuery滑动

  1. slideDown( ) 方法用于向下滑动元素

    // 语法 
$(selector).slideDown(speed,callback);

$("#slideDown").click(function(){
    $("#panel").slideDown();
});
// 代码解释：点击id=slideDown的按钮，将向下滑动id=panel的元素

  2. slideUp( ) 方法用于向上滑动元素

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

$("#slideUp").click(function(){
   $("panel").slideUp(); 
});
// 代码解释：点击id=slideUp的按钮，将向上滑动id=panel的元素

  3. slideToggle( ) 方法 可在slideDown()和slideUp()之间切换

    // 语法
$(selector).slideToggle(speed,callback);

$("#slideToggle").click(function(){
   $("panel").slideToggle(); 
});
// 代码解释：如果元素已向下滑动，则slideToggle()可向上滑动它们；如果元素已向上滑动，则slideToggle()可向下滑动它们

4. jQuery动画

​ animate( ) 方法用于创建自定义动画

  1. 语法

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

// 语法解释：
// 必需的params参数定义形成动画的CSS属性；可选的speed参数规定效果时长；可选的callback参数是动画完成后所执行的函数名称

$("button#animate").click(function(){
    $("div").animate({left:'250px'});
});
// 代码解释：当点击id=animate的按钮时，div元素移动到左边，直到left属性等于250像素为止
// 提示：默认地，所有HTML元素都有一个静态位置，且无法移动；若需对位置进行操作，要记得首先把元素的CSS position属性设置为relative/fixed/absolute

  2. animate( ) 操作多个属性

    $("button#animates").click(function(){
    $("div").animate({
        left:'250px',
        opacity:'0.2',
        hetight:'150px',
        width:'150px'
    });
})
// 代码解释：当点击id=animates的按钮时，div的多个css属性会发生预设好的变化

// 提示：几乎可以用 animate()方法来操作所有 CSS属性；不过值得注意的是，当使用animate()方法时，必须使用 Camel标记法 书写所有的属性名；
// 比如 margin-right 必须写成 marginRight

  3. animate( ) 使用相对值 和 预定义值

    $("button#animates").click(function(){
    $("div").animate({
        left:'hide',
        height:'+=150px',
        width:'-=150px'
    });
});
// 代码解释：若要为属性定义相对值，需在指的前面加上 += 或 -= ; 也可把属性值设为预定义的值 show/hide/toggle

  4. animate( ) 使用队列功能

    // 默认的，当存在多个 animate( ) 被调用，jQuery会创建包含这些方法调用的“内部”队列，然后逐一运行这些 animate调用

$("button#queue").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');
});
// 代码解释：animate()使用队列功能

5. jQuery 其他效果

  1. stop( ) 方法 用于停止动画或效果，在它们完成之前(适用于所有效果函数)

    // 语法
$(selector).stop(stopAll,goToEnd);
// 语法解释
// 可选的stopAll参数规定是否应该清除队列，默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行
// 可选的goToEnd参数规定是否立即完成当前动画，默认是false

$("#stop").click(function(){
    $("div#panel").stop();
});
// 代码解释：当点击id=stop的按钮，停止执行id=panel的div元素

  2. 当动画100% 完成后，即调用 Callback 函数

    // 语法
$(selector).hide(speed,callback);
// 语法解释：callback参数 是在一个 hide操作完成后被执行的函数

$("p").hide(1000);
alert("The paragraph is now hidden");

$("p").hide(1000,function(){
    alert("The paragraph is now hidden");
});
// 代码解释：注意上面两段代码的异同处；后者是用了callback函数，将在hide动画100%完成之后执行；而前者并非如此

  3. jQuery chaining 技术 允许在相同元素上允许多条 jQuery命令/方法

    $("button#chaining").click(function(){
  $("#p1").css("color","red").slideUp(2000).slideDown(1000);  
});
// 代码解释：当点击id=chaining的按钮时，p1元素首先会变为红色，然后向上滑动，接着向下滑动
$("button#chaining").click(function(){
    $("#p1").css("color","red")
    	.slideUp(2000)
    	.slideDown(1000);
})
// 上段代码也可以这样写，jQuery会抛掉多余的空格，并按照一行长代码来执行上面的代码行

Ⅴ. jQuery HTML

jQuery提供一系列 与 DOM相关的方法，这使访问和操作元素、属性变得很容易

ⅰ.文档操作

1. 获取(返回)/设置(改变)

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

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

    <p id = "text">这是段落中的<b>粗体</>文本</p>

$("#btn1").click(function(){
    alert("Text:" +$("#test").text());
});
// 返回 Text: 这是段落中的粗体文本。
$("#btn2").click(function(){
    alert("HTML:"+ $("#test").html());
});
// 返回 HTML: 这是段落中的<b>粗体</b>文本。

$("#btn4").click(function(){
    $("#test").html("<b>Hello Tom!</b>");
});
// 代码解释：获取id=test元素的内容，然后将其内容修改为 <b>Hello Tom!</b>

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

    <p>姓名：<input type="text" id="test" value="米老鼠"></p>

$("#btn3").click(function(){
    alert("Vaule:"+$("#test").val());
});
// 返回 Value:米老鼠

  4. attr( )/removeAttr( ) 方法用于 获取或设置/移除 匹配元素指定的属性(值)

    // attr( )
$("button").click(function(){
    alert($("#w3s").attr("href","http://www.w3school.com.cn/jquery"));
});
// 代码解释：获取并改变链接中href属性的属性值

// removeAttr( )
$("button").click(function(){
    $("p").removeAttr("style");
});
// 代码解释：点击按钮，移除p元素中style属性

  5. text( )/html( )/val( ) 回调函数

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

$("#btn5").click(function(){
    $("#test1").text(function(i,origText){
        return "Old text:"+origText + "New text: Hello !
        (index: "+ i +")";
    });
});
$("#btn6").click(function(){
    $("#test2").text(function(i,origTest){
        return "Old html:"+origText+ "New html: Hello <b> Jim </b>
        (index: "+ i +")"; 
    });
});

  6. attr( ) 回调函数

    // attr() 也拥有回调函数 
// 回调函数有两个参数：被选元素列表中当前元素的下标 以及 原始值(旧值)，然后以新值返回希望使用的字符串

$("button").click(function(){
    $("#w3s").attr("href",function(i,origValue){
        return origVaule + "/jqurey";
    });
});

2. 添加/删除

  1. append( )/prepend( )/appendTo( )/prependTo( ) 方法在被选元素的结尾/开头 插入内容（内部插入）

    // 1. append( ) / prepend( )
$("p").append("Some appended text");
$("p").prepend("Some prepend text");
// 代码解释：在p元素结果/开头插入字符串 Some appended text/ Some prepend text

function appendText() {
    var txt1="<p>Text.</p>";                   // 以 html 创建新元素
    var txt2=$("<p></p>").text("Text.");       // 以 jQurey 创建新元素
    var txt3=document.creatElement("p");       // 以 DOM 创建新元素
    txt3.innerHTML = "Text.";
    
    $("p").append(txt1,txt2,txt3);             // 追加新元素
}
// 代码解释：上述例子中，通过html/jQuery/DOM分别创建3个新元素，再通过append()方法把这些新元素追加到文本中

// 2. appendTo( ) /prependTo( )
// 语法
$(content).appendTo(selector);
$(content).prependTo(selector);

$("button").click(function(){
    $("<b>Hello Jim!</b>").appendTo("p");
});
// 代码解释：当点击按钮，向p元素内部结尾插入字符串 Hello Jim

// 总结：append()/appendTo() 以及 prepend()/prependTo()异同
// 答：两种方法执行的任务相同；不同之处在于：内容和选择器的位置以及append()/prepend()能够使用函数来附加内容
// 例如：
$("button").click(function(){
    $("p").append(function(n){
        return "<b> This p element has index" + n + "</b>";
    });
});
// 代码解释:参数n为p元素的索引位置，从0开始

  2. after( )/before( ) 方法在被选元素之后/前 插入内容（外部插入）

    $("img").after("Some text after");
$("img").before("Some text before");

function afterText(){
    var txt1 = "<b>ii</b>";                       // 以 html 创建 新元素
    var txt2 = $("<i></i>").text("love");         // 以 jQuery()创建 新元素
    var txt3 = document.createElement("big");     // 以 DOM 创建新元素
    txt3.innerHTML = "jQuery!";
    $("img").after(txt1,txt2,txt3);
}
// 代码解释：上述例子中，通过html/jQuery/DOM分别创建3个新元素，再通过after()方法把这些新元素追加到文本中

  3. remove( )/detach( ) 方法删除/移除 被选元素及其子元素

    // remove( )
$("#div1").remove();
// 代码解释：删除id=div1的元素及其子元素

$("p").remove(".italic");
// 代码解释：删除class=italic的所有p元素及其子元素

// detach( )
// detach( ) 会保留 jQuery对象中的匹配的元素，可以在将来再使用这些匹配的元素，同时会保留所有绑定的事件、附加的数据；这也是与remove()不同之处

$("button").click(function(){
    $("body").append($("p").detach());
});
// 代码解释：此例可以移动p元素；点击按钮会把p元素移到按钮后面去

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

     $("#div2").empty();
// 代码解释：删除id=div2的子元素

3. 其它文档操作

  1. 代码演示

    // 1.addClass() 向匹配元素添加指定的类名(1个或多个)

$("button#addClass").click(function(){
    $("p:first").addClass("intro");
});
// 点击id=addClass的按钮，向第一个p元素添加intro类

// 使用函数来添加多个类；语法如下
$(selector).addClass(function(index,oldClass));
// 语法解释：可选index参数，代表选择器index位置；可以oldClass，代表选择器的旧的类名                   
                     
<script>
	$(document).ready(function(){
    	$("button#addMoreClass").click(function(){
    	$("p").addClass(function(n){
        	return "par_" + n;
    	});
	});
})；
</script>
<style type="text/css">
	.par_0 {
        color:blue;
    }    
	.par_1 {
        color:red;
    }
</style>
//　代码解释：点击id=addMoreClass的按钮，向p元素按索引分别添加类par_0和par_1

// 2. hasClass( ) 检查匹配的元素是否拥有指定的类
$(selector).hasClass(class);

$("button").click(function(){
    alert($("p:first").hasClss("intro"));
});
// 代码解释：点击按钮，检查第一个p元素是否包含 intro类

// 3. removeClass( ) 从所有匹配的元素中删除全部或指定的类
$(selector).removeClass(class);

$("button").click(function(){
    $("p:first").removeClss("intro");
});
// 代码解释：移除第一个p元素的 intro类

// 4. toggleClass( ) 从匹配的元素中添加或删除一个类
$(selector).toggleClass(class,switch);
// 语法解释：必须的class参数，添加或移除class的指定元素，若多个class用逗号隔开；可选switch参数为布尔值，规定是否只添加或只移除class

$("button").click(function(){
    $("p").toggleClass("main");
});
// 代码解释：点击按钮，对设置和移除所有p元素的 main类进行切换

// 使用函数来切换类
$(selector).toggleClass(function(index,calss),switch);
// 语法解释：必需的function函数中，index参数是可选的，表示选择器的索引号，class参数也是可选的，表示选择器的当前的类

<script>
	$(document).ready(function(){
    	$("button#btn1").click(function(){
            $("ul li").toggleClass(function(){
                return "listitem_" + $(this).index();
            });
        });
	});
</script>
<style>
	.listitem_1 , .listitem_3 {
        color:red;
    }
	.listitem_2 , .listitem_4 {
        color:blue;
    }
</style>
<body>
	<ul>
    	<li>Apple</li>
		<li>IBM</li>
		<li>MicroSoft</li>
		<li>Google</li>
    </ul>    
	<button class="btn1">添加或移除列表项的类</button>
</body>
// 代码解释：点击id=btn1的按钮，添加或移除列表项的类，各列表项会显示不一样的颜色

// 5. clone( )  方法生成被选元素的副本，包含子节点、文本和属性
$(selector).clone(includeEvents)
// 语法解释：可选参数includeEvents为布尔值，规定是否复制元素的所有事件处理；默认为false

$("button").click(function(){
	$("body").append($("p:first").clone(true));    
});
$("p").click(function(){
    $(this).animate({fontSize:"+=1px"});
});
// 代码解释：点击按钮一次复制一次第一个p元素，并且每点击一次复制的p元素，其字体将增大1像素

// 6. insertAfter( )/insertBefore( )  方法把匹配的元素插入到另一个指定的元素集合后面/前面
$(content).insertAfter(selector);

$("button").click(function(){
    $("<span>Hello Jim</span>").insertAfter("p");
})
// 代码解释：在每个p元素之后插入 span元素

// 7. replaceAll( )/replaceWith( ) 方法用指定的 HTML内容或元素 替换被选元素
$(".btn1").click(function(){
    $("p").replaceAll("<b>Hello Jim</b>");
});
// 代码解释：点击class=btn1按钮时，用粗体文本替换每个段落
// replaceAll( ) 和 replaceWith( ) 作用相同，差异之处在于：replaceWith( )能够使用函数作为参数进行替换

// 8. wrap( )/wrapAll( ) /unwarp( )  把所有匹配的元素用指定的内容或元素包裹起来/ 移除并替换指定元素的父元素
// wrap( )/wrapAll( )
$(selector).wrap(wrapper);

$(".btn1").click(function(){
    $("p").wrap("<div></div>");
});
// 代码解释：点击class=btn1的按钮时，在div元素中包裹每个段落

// 使用函数来包裹元素
$(selector).wrap(function());

// unwrap()

$("button").toggle(
    function() {
        $("p").wrap("<div></div>");
    },
	function() {
        $("p").unwrap();
    });
<style>
	div{
        background-color:yellow;
        padding:10px;
    }    
</style>
<body>
	<p> This is a paragraph</p>
	<button>包裹或解开 p元素</button>
</body>
// 代码解释：点击按钮，包裹或解开 p元素

// 9. wrapInner( ) 方法使用指定的 HTML内容或元素，来包裹每个被选元素中的所有内容(inner HTML)

$(".btn1").click(function(){
    $("p").wrapInner("<b></b>");
});
// 代码解释：在每个 p元素的内容上包围b元素

ⅱ.jQuery CSS

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

  1. 返回 指定的CSS属性的值

    $("p").css("background-color");
// 代码解释：返回 首个p元素的background-color的值

  2. 设置 指定的CSS属性的值

    // 语法
$(selector).css("propertyname","value");

$("p").css("background-color","yellow");
// 代码解释：为所有p元素设置background-color值

  3. 设置多个css属性

    $(selector).css({"propertyname":"value","propetyname":"value",…})；

$("p").css({"background-color":"yellow","font-size":"200%"});
// 代码解释：同时为p元素设置 background-color,font-size属性

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

  1. width( ) 和 height( ) 方法设置或返回元素的宽度和高度(不包括内边距、边框或外边距)

  2. innerWidth( ) 和 innerHeight( ) 方法设置或返回元素的宽度和高度(包括内边距)

  3. outerWidth( ) 和 outerHeight( ) 方法设置或返回元素的宽度和高度(包括内边距和边框)

  4. outerWidth(true) 和 outerHeight(true) 方法返回元素的宽度和高度(包括内边距、边框和外边框)

    $("button").click(function(){
    $("#div1").width(320).height(320);
});
// 点击按钮，将id=div1的元素宽度和高度设置为320x320；

Ⅵ. jQuery 遍历

遍历(Traversal)：是指沿着某条搜索路线，依次对树(或图)中每一个节点均做依次访问；以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止

遍历是 二叉树数据结构上最重要的运算之一

图示解释：

上图展示了一个家族树，通过 jQuery遍历，能够从被选(当前的)元素开始，轻松地在家族中向上移动(祖先)，向下移动(子孙)，水平移动(同胞)

提示：祖先是父、祖父、曾祖父等；后代是子、孙、曾孙等 同胞拥有相同的父

1. 向上遍历

  1. parent( ) 方法返回被选元素的直接父元素（该方法只会向上一级对 DOM 树进行遍历）

  2. parents( ) 方法返回被选元素的所有祖先元素（该方法会一直向上知道根元素<html>）

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

    $("span").parent();               // 返回 span的直接父元素
$("span").parents();			  // 返回 span的所有祖先元素
$("span").parentsUntil("div");    // 返回 span到div的所有祖先元素

2. 向下遍历

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

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

    $("div").children("p.1");         // 返回属于div后代中所有类名为1的p元素
$("div").find("span");            // 返回属于div后代所有的span元素

3. 水平遍历

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

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

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

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

  5. prev( ) 方法返回被选元素的上一个同胞元素

  6. prevAll( ) 方法返回被选元素之前的所有同胞元素

  7. prevUntil( ) 方法返回介于两个给定参数之间的所有之前的同胞元素

    $("h2").siblings( );        // 返回h2所有同胞元素
$("h2").next();             // 返回h2下一个同胞元素
$("h2").nextUntil("h5");    // 返回h2到h5的所有同胞元素
$("h2").nextAll();          // 返回h2之后的所有跟随的同胞元素
$("h2").prev();             // 返回h2之前的上一个同胞元素
$("h2").prevAll();          // 返回h2之前的所有同胞元素
$("h4").prevAll("h1");      // 返回h4到h2之间的所有之前的同胞元素

4. 过滤规则

  1. first( ) 方法返回别选元素的首个元素(将匹配元素集合缩减为集合中的第一个元素)

  2. last( ) 方法返回被选元素的最后一个元素

  3. eq( ) 方法返回被选元素中带有指定索引号的元素(首个索引号从0开始)

  4. filter( ) 方法允许您规定一个标准，不匹配此标准的元素会被从集合删除，匹配的元素会被返回

  5. not( ) 方法返回不匹配标准的所有元素(与filter()相反)

    $("div p").first();            // 选择div元素内部第一个p元素
$("div p").last();             // 选择div元素内部最后一个p元素
$("p").eq(1);                  // 选取第二个p元素
$("p").filter(".intro");       // 返回带有intro类名的所有p元素
$("p").not(".intro");          // 返回不带有intro类名的所有p元素

5.其他遍历函数

jQuery 遍历函数包括了用于筛选、查找、串联元素的方法

  1. 代码演示

    // 1. add(selector/elements/html/jQueryObject/selector,context ) 方法将指定元素添加到匹配元素的集合中
// 语法解释：添加元素的形式可以是选择器、具体一个或多个元素、html片段、jQuery对象、(选择器以及其开始匹配的位置)

$("div").css("border","2px solid red")
				.add("p")
				.css("background-color","yellow");
// 代码解释：找到所有div并添加边框，然后将所有段落添加到该jQuery对象，并把它们的背景设为红色

// 2. andSelf( ) 方法把堆栈中之前的元素集添加到当前集合

$("li.third-item").nextAll().andSelf()
														.css("background-color","red");
<ul>
	<li>list item 1</li>
	<li>list item 2</li>
	<li class = "third-item">list item 3</li>
	<li>list item 4</li>
	<li>list item 5</li>
</ul>
// 代码解释：结果是item 3/4/5拥有红色背景
// 首先，初始的选择器会定位项目3，初始化的堆栈存有仅包含该项目的集合，
// 调用.nextAll()会将项目4,5的集合推入堆栈
// 最后，调用.andSelf()会合并这两个集合
// 于是所创建的 jQuery对象指向按照文档顺序的所有三个项目{[<li.thrid-item>,<li>,<li>]}

// 3. closest( ) 方法从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
<script>
	$(document).bind("click",function(e){
  	$(e.target).closest("li").toggleClass("height");
	});
</script>
<style>
	li.height {
    background:gellow;
  }  
</style>
// 代码解释：当被最接近的列表元素或其子后代元素被点击时，会切换为黄色背景

// 4. contents( ) 方法获得匹配元素的每个元素的子元素，包括文本和注释节点 

$("p").contents().filter(function(){
    return this.nodeType !=1;
}).wrap("<b/>");
// 代码解释:找到所有段落中的所有文本节点，并用粗体标签<b>包装它们

// 5. each( ) 方法对jQuery对象进行迭代，为每个匹配元素执行函数

$("button").click(function(){
    $("li").each(function){
        alert($(this).text())
    };
});
// 代码解释：点击按钮，输出每个li的文本

// 6. end( )  方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

$("p").find("span").end().css("border","2px red solid");
// 代码解释：选择所有段落，找到这些段落中的span元素，然后将它们恢复为段落，并把段落设置为两像素的红色边框

// 7. has( )  方法将匹配元素集合缩减为包含特定元素的后代的集合

<ul>
	<li>list item 1</li>   
	<li>list item 2</li>
		<ul>
        	<li>list item 2-a </li>
        	<li>list item 2-b </li>
        </ul>
	</li>
	<li>list item 3</li>
	<li>list item 4</li>   
</ul>

<script>
	$("li").has("ul").css("background-color","red");
</script>
//代码解释：检测ul是否在li元素中，并将筛选出的ul元素背景色设置为红色

// 8. is( )   方法根据选择器检查当前匹配元素集合，若存在至少一个匹配元素，则返回true

var isFormParent = $("input[type="checkbox"]").parent().is("form");
$("div").text("isFormParent = " + isFormParent);
//代码解释：检测input元素的父元素是否是form，若是则返回true，若不是则返回false

// 9. map( )  方法把当前匹配集合的每个元素传递给函数，产生包含返回值的新 jQuery对象

$("p").append($("input").map(function(){
    return $(this).val();
}).get().join(","));
// 代码解释：构建表单中所有值的列表(返回值是jQuery封装的数组，使用get()来处理返回的对象以得到基础的数组)

//10. offsetParent( ) 方法获取用于定位的第一个父元素

$("li.item-a").offsetParent().css("background-color","red");
// 代码解释：设置类名为item-a的li元素的最近定位父元素的背景色

//11. slice( )  方法将匹配元素结合缩减为指定范围的子集

.slice(selector,end)
// 语法解释：selector基于0的整数值，指示开始选取元素的位置；end基于0的整数值，指示结束选取元素的位置

$("p").slice(0,2),wrapInner("<b/>");
// 代码解释：选中所有段落，然后将所选内容缩减为只包含第一和第二个段落,并在其内部用元素<b>包裹

Ⅶ. jQuery AJAX

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

  1. $.ajax() 方法执行异步 HTTP(ajax)请求

    // 语法
$.ajax([settings]);
// 语法解释：可选的settings参数，用于配置 ajax请求的键值对集合(具体参数见：https://www.w3school.com.cn/jquery/ajax_ajax.asp)

$(document).ready(function(){
	$("#b01").click(function(){
        htmlobj = $.ajax({url:"/jquery/test1.txt",async:false});
        $("#myDiv").html(htmlobj.responseText);
    });
});

    <div id = "myDiv"><h2> Let Ajax change this text</h2></div>
<button id = "b01" type = "buttion">Change Content </button>  
// 代码解释：通过点击id=b01的按钮，使用ajax加载一段服务器端的文本

2. ajaxComplete()/ajaxStart()/ajaxStop()/ajaxError()/ajaxSucess()/ajaxSend()方法

```js
// 1. ajaxComplete( )  当ajax请求完成时要调用的处理程序，这是一个ajax事件

.ajaxComplete(function(event,xhr,options));
// 语法解释：必须规定当请求完成时运行的函数；额外参数event 包含event对象，xhr参数 包含XMLHttpRequest对象，options参数 包含ajax请求中使用的选项
// 该函数与ajaxSuccess( ) 不同的是，其规定的函数会在请求完成时运行，即时请求并未成功

// 2. ajaxStart( )  方法在ajax请求发送前执行函数，这是一个ajax事件
.ajaxStart(function());

$(document).ready(function(){
   $("#txt").ajaxStart(function(){
    	$("#wait").css("display","block");
	});
	$("#txt").ajaxComplter(function(){
    	$("#wait").css("display","none")
	}); 
});
$("button").click(function(){
    $("#txt").load("/example/jquery/demo_ajax_load.asp");
});
```

```html
<div id = "txt"><h2>通过 ajax 改变文本</h2></div>
<button>改变内容</button>
<div id = "wait" style = "
                          display:none;
                          width:69px;
                          height:89px;
                          position:absolute;
                          top:50%;
                          padding:2px;">
    <img src ='/i/demo_wait.gif' width ="64" height = "64"/ >
    <br / > 加载中…
</div>
// 代码解释：当ajax请求正在进行时显示“正在加载”的指示
```

```js
// 3. ajaxStop( ) 方法在ajax请求结束时执行函数，它是一个ajax事件(无论ajax请求在何时完成，jQuery都会检查是否存在其它的ajax请求；
// 若不存在，jQuery会触发该ajaxStop事件，此时，由ajaxStop()方法注册的任何函数都将被执行)
.ajaxStop(function());
          
$("div").ajaxStop(function(){
    alert("所有 AJAX 请求已完成");
});
// 代码解释：当所有 ajax请求完成时，触发一个提供框

// 4. ajaxError( ) 方法在 ajax请求发生错误时执行函数，它是一个 ajax事件
.ajaxError(function(event,xhr,options,exc));
// 语法解释：必需的函数规定请求失败时运行的函数；
// 额外的参数event 包含event对象，xhr参数 包含XMLHttpRequest对象，options参数 包含ajax请求中使用的选项，exc参数 包含JavaScript exception(异常)
           
$("div").ajaxError(function(){
    alert("An error occurred!");
});
// 代码解释：当ajax请求失败时，触发提示框

// 5. ajaxSuccess() 方法在 ajax请求成功时执行函数，它是一个 ajax事件(无论ajax请求在何时成功完成，jQuery都会触发该 ajaxSuccess() 事件)
.ajaxSuccess(function(event,xhr,options));

$("div").ajaxSuccess(function(){
    alert("ajax 请求已成功！");
});
// 代码解释：当ajax请求成功时，触发提示框

// ajaxSend( ) 方法 在ajax请求发送之前显示一条消息
.ajaxSend([function(event,xhr,options)]);
// 语法解释：必需的函数规定请求开始时执行函数；额外的参数 event参数 包含event对象，xhr 包含XMLHttpRequest对象，options 包含 ajax请求中使用的选项         

$("div").ajaxSend(function(e,xhr,opt){
    $(this).html("Requesting" + opt.url);
});
// 代码解释：当 ajax请求即将发送时，改变 div元素的内容
```

3. \$.ajaxSetup( ) 设置将来的 ajax请求的默认值(设置全局 ajax默认选项)

```js
$.ajaxSetup(name:value,name:value,…)；

$("button").click(function(){
    $.ajaxSetup({url:"demo_ajax.txt",success:function(result){
        $("div").html(result);
    }});
    $.ajax();
});
// 代码解释：为所有 ajax请求设置默认URL和 success函数
```

4. \$.get( ) / \$.post( ) 方法分别使用 HTTP GET/POST 请求从服务器加载数据

```js
// $.get( ) 
$(selector).get(url,data,success(response,status,xhr),dataType);
// 语法解释：必须的url参数 规定将请求发送到那个 URL；可选的data参数 规定连同请求发送到服务器的数据
// 可选的 success()参数 规定当请求成功时运行的函数，额外的response参数 包含来自请求的结果数据,status参数 包含请求的状态，xhr 包含XMLHttpRquest对象
// 可选的dataType,规定预计的服务器响应的数据类型,默认地，jQuery将智能判断(xml/html/text/json/jsonp/script)

// 该函数是简写的 ajax函数，等价于：
$.ajax({
    url:url,
    data:data,
    success:success,
    dataType:dataType
});

$("button").click(function(){
    $.get("demo_ajax_load.txt",function(result){
        $("div").html(result);
    });
});
// 代码解释：使用ajax 的 GET 请求来改变 div元素的文本

// $.post( ) 
// 该函数是简写的 ajax函数，等价于：
$.ajax({
    type:'POST',
    url:url,
    data:data,
    success:success,
    dataTyep:dataType
});

$("input"),keyup(function(){
    txt=$("input").val();
    $.post("demo_ajax_gethint.asp",{suggest:txt},function(){
        $("span").html(result);
    });
});
// 通过 ajax POST 请求改变 div元素的文本
```

5. \$.param( )/serialize( )/serializeArray() 方法 

```js
// $.param( )  方法创建数组或对象的序列化表示
$.param(object,traditional);
// 语法解释：object参数 规定要进行序列化的数组或对象；traditional参数 规定是否使用传统的方法浅层进行序列化(参数序列化)

$(document).ready(function(){
    personObj = new Object();
    personObj.firstname = "Bill";
    personObj.lastname = "Gates";
    personObj.age = 60;
    personObj.eyecolor = "blue";
    $("button").click(function(){
      	$("div").text($.param(personObj)); 
    });
});
// 返回 firstname=Bill&lastname=Gates&age=60&eyecolor=blue
// 代码解释：将 personObj对象序列化为一个 key/value结果

// serialize( ) 方法通过序列化表单值，创建 URL编码文本字符串 
$(selectior).serialize( );

$("button").click(function(){
    $("div").text($("form").serialize());
});
// 代码解释：输出序列化表单值的结果

// serializeArray( )  方法序列化表单元素，返回 JSON 数据结构数据
$(selector).serializeArray( )

$("button").click(function(){
    x=$("form").serializeArray();
    x.each(x,function(i,field){
        $("#result").append(field.name + ":" + field.value + "");
    });
});
// 代码解释：输出以数组形式序列化表单值的结果
```

6. \$.getJSON( ) / \$.getScript( ) 方法

```js
// $.getJSON( ) 方法 使用 HTTP GET 请求从服务器加载 JSON 编码数据
$.getJSON(url,data,success(data,status,xhr));

$("button").click(function(){
    $.getJSON("demo_ajax_json.js",function(result){
        $.each(result,function(i,field){
            $("div").append(field + "");
        });
    });
});
// 代码解释：使用 ajax 请求来获得 JSON 数据，并输出结果

// $.getScript( ) 方法通过 HTTP GET 请求载入并执行 JavaScript文件
$.getScript(url,success(response,status) );

// 该函数是简写的 ajax函数，等价于：
$.ajax({
    url:url,
    dataType:"script",
    success:success
});

$("button").click(function(){
    $.getScript("demo_ajax_script.js");
});
// 代码解释：通过 ajax请求 来获得并运行一个 JavaScript文件
```

7. load( ) 方法 通过ajax请求 从服务器加载数据，并把返回的数据值放置到指定的元素中

```js
load(url,data,function(response,status,xhr));

load( ) 方法几乎与 $.get( )等价，不同的是 load( ) 不是全局函数(允许插入远程文档的某个部分)，并且拥有隐式回调函数

$("button").click(function(){
    $("div").load("demo_ajax_load.txt");
});
// 使用 ajax请求来改变 div 元素的文本
```

Ⅷ. 其它

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

  1. noConflict( ) 方法会释放$ 标识符的控制，这样其它脚本就可以使用$ 符号了，避免冲突

    $.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍在运行！");
    });
});
// 代码解释：通过全名替代简写的方法来使用 jQuery

$.noConflict( );
jQuery(document).ready(function($){
    $("button").click(function(){
        $("p").text("jQuery 仍在运行！");
    });
});
// 代码解释：将$作为变量传递给ready()函数，函数内部可使用$符号代替，函数外部还是不能使用$符号

    其他的 JavaScript框架：

    MooTools/Backbone/Sammy/Cappuccino/Knockout/JavaScript MVC/Web Toolkit/Google Closure/Ember/Batman/Ext JS

推荐阅读