jQuery 教程

jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由约翰·雷西格（John Resig）在2006年1月的BarCamp NYC上发布第一个版本。目前是由Dave Methvin领导的开发团队进行开发。全球前10000个访问最高的网站中，有65%使用了jQuery，是目前最受欢迎的JavaScript库。

jQuery

jQuery教程

认识jQuery

  • jQuery 是一个 JavaScript 库。
  • jQuery 极大地简化了 JavaScript 编程。
  • jQuery 很容易学习。
  • jQuery 是为事件处理特别设计的。
  • jQuery 拥有可操作 HTML 元素和属性的强大方法。
  • 通过 jQuery，可以很容易地添加新元素/内容。
  • 通过 jQuery，可以很容易地删除已有的HTML元素。
  • 通过 jQuery，可以很容易地对 CSS 元素进行操作
  • 官方网站
  • 官方API
  • w3school教程

引入jQuery

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

本地引入

下载地址

<head>
    <script src="jquery.js"></script>
</head>

Google CDN

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

Microsoft CDN

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

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

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

示例

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

jQuery选择器

jQuery 元素选择器

  • jQuery 使用 CSS 选择器来选取 HTML 元素。
  • $("p") 选取<p>元素。
  • $("p.intro") 选取所有 class="intro" 的<p>元素。
  • $("p#demo") 选取所有 id="demo" 的<p>元素。

jQuery 属性选择器

  • jQuery 使用 XPath 表达式来选择带有给定属性的元素。
  • $("[href]") 选取所有带有 href 属性的元素。
  • $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
  • $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
  • $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

  • jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
  • 下面的例子把所有<p>元素的背景颜色更改为红色：$("p").css("background-color","red");

jQuery事件函数

jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中：

实例：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

jQuery效果

隐藏/显示

  • jQuery hide()演示一个简单的 jQuery hide() 方法。
  • jQuery hide()另一个 hide() 演示。如何隐藏部分文本。
  • jQuery toggle()通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

语法：

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

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

淡入淡出

  • jQuery fadeIn() 用于淡入已隐藏的元素。
  • jQuery fadeOut() 方法用于淡出可见元素。
  • jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
    如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
    如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
  • jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法：

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是hide，show，toggle等方法完成后所执行的函数名称。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

滑动

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

语法：

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

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

动画

  • jQuery animate() 方法用于创建自定义动画。
    提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。
    如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

语法：

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

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

$("button").click(function(){
  $("div").animate({left:'250px'});
});
  • 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 下载 Color Animations 插件。

  • 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 调用。

实例：

$("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 停止动画

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

语法

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

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

参考

jQuery Callback 函数

Callback 函数在当前动画 100% 完成之后执行。如果您希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数。否则会出错

jQuery - Chaining

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

实例：

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

提示：当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。

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

jQuery HTML

jQuery DOM 操作：jQuery 中非常重要的部分，就是操作 DOM 的能力。

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

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

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

jQuery - 获得内容和属性

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

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

实例:

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

获取属性 - attr()

实例:

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

jQuery - 设置内容和属性

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

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

  • 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("Dolly Duck");
});

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()

实例:(改变（设置）链接中 href 属性的值)

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

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

实例：（同时设置 href 和 title 属性）

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

attr() 的回调函数

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

实例：（带有回调函数的 attr() 方法）

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

jQuery - 添加元素

添加新的 HTML 内容

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

实例：

$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("img").after("Some text after");
$("img").before("Some text before");

append() 和 prepend() 、after() 和 before()方法能够通过参数接收无限数量的新元素。可通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。、

实例：

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);         // 追加新元素
}

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);          // 在 img 之后插入新元素
}

jQuery - 删除元素

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

实例：

$("#div1").remove();
$("#div1").empty();
  • 过滤被删除的元素
    jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
    该参数可以是任何 jQuery 选择器的语法。
    下面的例子：

实例：（删除 class="italic" 的所有<p>元素）

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

jQuery - 获取并设置 CSS 类

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作

实例：

.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}

//add单个class
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

//add多个class
$("button").click(function(){
  $("#div1").addClass("important blue");
});

//remove class
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

//添加/删除类的切换操作
$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});
  • css() - 设置或返回样式属性

返回 CSS 属性

语法：css("propertyname");
实例：$("p").css("background-color");

设置 CSS 属性

语法：css("propertyname","value");
实例：$("p").css("background-color","yellow");

设置多个 CSS 属性

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

jQuery - 尺寸

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

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

  • innerWidth()返回元素的宽度（包括内边距）。

  • innerHeight()返回元素的高度（包括内边距）

  • outerWidth()返回元素的宽度（包括内边距和边框）

  • outerHeight()返回元素的高度（包括内边距和边框）

  • outerWidth(true) 返回元素的宽度（包括内边距、边框和外边距）

  • outerHeight(true) 返回元素的高度（包括内边距、边框和外边距）

更多实例

//返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度
$(document).width();
$(document).height();
$(window).width();
$(window).height()

//设置指定的`<div>`元素的宽度和高度 
$("#div1").width(500).height(500);

jQuery 遍历

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

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

遍历方法中最大的种类是树遍历（tree-traversal）。

jQuery 遍历 - 祖先

向上遍历 DOM 树

parent()

返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

实例：

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

parents()

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

实例:(返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素)

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

parentsUntil()

返回介于两个给定元素之间的所有祖先元素。

实例：（返回介于 <span> 与 <div> 元素之间的所有祖先元素）

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

jQuery 遍历 - 后代

向下遍历 DOM 树

children()

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

实例：

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

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

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

find()

返回被选元素的后代元素，一路向下直到最后一个后代。

实例:

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

实例:(返回 <div> 的所有后代)

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

jQuery 遍历 - 同胞

在 DOM 树中水平遍历

siblings()

返回被选元素的所有同胞元素。

实例:

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

实例:(返回属于 <h2> 的同胞元素的所有 <p> 元素)

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

next()

返回被选元素的下一个同胞元素。该方法只返回一个元素。

实例:

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

nextAll()

返回被选元素的所有跟随的同胞元素。

实例:

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

nextUntil()

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

实例:(返回介于 <h2> 与 <h6> 元素之间的所有同胞元素)

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

prev()

返回被选元素的前一个同胞元素。该方法只返回一个元素。类比于next()

prevAll()

返回被选元素的所有前面的同胞元素。类比于nextAll()

prevUntil()

返回介于两个给定参数之间的所有前面的同胞元素。类比于nextUntil()

jQuery 遍历 - 过滤

缩写(小)搜索元素的范围

jQuery first()

返回被选元素的首个元素。

实例：（选取首个 <div> 元素内部的第一个 <p> 元素）

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

jQuery last()

返回被选元素的最后一个元素。

实例:(选择最后一个 <div> 元素中的最后一个 <p> 元素)

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

jQuery eq()

返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。

实例:(选取第二个 <p> 元素（索引号 1）)

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

jQuery filter() 方法

允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

实例:(返回带有类名 "intro" 的所有 <p> 元素)

$(document).ready(function(){
  $("p").filter(".intro");
});

jQuery not() 方法

返回不匹配标准的所有元素。提示：not() 方法与 filter() 相反。

实例:(返回不带有类名 "intro" 的所有 <p> 元素)

$(document).ready(function(){
  $("p").not(".intro");
});

jQuery - AJAX

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

jQuery - AJAX load() 加载

jQuery load()

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

语法：$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

实例：（把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中）

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

实例：（把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div>元素中）

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

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

实例：

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

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

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

  • GET - 从指定的资源请求数据
  • POST - 向指定的资源提交要处理的数据
  • GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
  • POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get() 方法

通过 HTTP GET 请求从服务器上请求数据。

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

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

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

jQuery $.post() 方法

通过 HTTP POST 请求从服务器上请求数据。
语法：$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

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

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

jQuery - noConflict() 方法

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 教程 + 效果
    警告请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document....
    鹿守心畔光阅读 7,818评论 3赞 104
  • JQ
    通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。 jQuer...
    枇杷树8824阅读 3,882评论 0赞 3
  • 02-老马jQuery教程-jQuery事件处理
    本文章是老马jQuery视频的讲义和上课的代码。具体观看视频地址：https://chuanke.baidu.co...
    IT老马阅读 7,349评论 3赞 14
  • 本地工具
    文本编辑器：EditPlus 文本编辑器，常用于文本编辑、转码、搜索、Hex查看。尤其是文本搜索，可以查询所有子文...
    犀利兔子哥阅读 3,599评论 0赞 0
  • 初恋这件小事
    今年我第一次看《初恋这件小事》的电影，电影情节讲述了学生时期的小水为了追求学霸学长阿亮努力变好变美的故事。 主人公...
    笑出声来呀阅读 2,738评论 0赞 3