jQuery 简介
jQuery 极大地简化了 JavaScript 编程。
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
•HTML 元素选取
•HTML 元素操作
•CSS 操作
•HTML 事件函数
•JavaScript 特效和动画
•HTML DOM 遍历和修改
•AJAX
•Utilities
[if !supportLists]Ø [endif]jQuery 语法
通过jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。
1.jQuery语法实例
$(this).hide()
演示jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
演示jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()
演示jQuery hide() 函数，隐藏所有
元素。
$(".test").hide()
演示jQuery hide() 函数，隐藏所有 class="test" 的元素。
2.jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
•美元符号定义 jQuery
•选择符（selector）“查询”和“查找” HTML 元素
•jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
我们的实例中的所有jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载（就绪）之前运行jQuery 代码。
[if !supportLists]Ø [endif]jQuery 选择器
选择器允许您对元素组或单个元素进行操作。
1.jQuery 选择器
在前面的章节中，我们展示了一些有关如何选取HTML 元素的实例。
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对HTML 元素组或单个元素进行操作。
在HTML DOM 术语中：
选择器允许您对DOM 元素组或单个 DOM 节点进行操作。
2.jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取
元素。
$("p.intro") 选取所有 class="intro" 的
元素。
$("p#demo") 选取所有 id="demo" 的
元素。
3.jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
4.jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有p 元素的背景颜色更改为红色：
$("p").css("background-color","red");
jQuery 事件
jQuery 是为事件处理特别设计的。
1.jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把jQuery 代码放到 部分的事件处理方法中：
$("button").click(function(){
$("p").hide();
});
在上面的例子中，当按钮的点击事件被触发时会调用一个函数：
$("button").click(function() {..some code... } )
该方法隐藏所有
元素：
$("p").hide();
2.单独文件中的函数
如果您的网站包含许多页面，并且您希望您的jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
3.jQuery名称冲突
jQuery 使用 $ 符号作为jQuery 的简介方式。
某些其他JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如jq）来代替 $ 符号。
由于jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
把所有jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名jQuery 库
$(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件
[if !supportLists]Ø [endif]jQuery - 获得内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
提示：DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
三个简单实用的用于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("Value: " + $("#test").val());
});
获取属性- attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中href 属性的值：
$("button").click(function(){
alert($("#w3s").attr("href"));
});
[if !supportLists]Ø [endif]jQuery - 设置内容和属性
设置内容- text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容：
•text() - 设置或返回所选元素的文本内容
•html() - 设置或返回所选元素的内容（包括 HTML 标记）
•val() - 设置或返回表单字段的值
下面的例子演示如何通过text()、html() 以及 val() 方法来设置内容：
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text()、html() 以及 val() 的回调函数
上面的三个jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
设置属性- attr()
jQuery attr() 方法也用于设置/改变属性值。
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置href 和 title 属性：
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
[if !supportLists]Ø [endif]jQuery - 添加元素
通过jQuery，可以很容易地添加新元素/内容。
我们将学习用于添加新内容的四个jQuery 方法：
•append() - 在被选元素的结尾插入内容
•prepend() - 在被选元素的开头插入内容
•after() - 在被选元素之后插入内容
•before() - 在被选元素之前插入内容
jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容。
$("p").append("Some appended text.");
jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
$("p").prepend("Some prepended text.");
通过append() 和 prepend() 方法添加若干新元素
append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中，我们创建若干个新元素。这些元素可以通过text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：
function appendText()
{
var txt1="
Text.
"; // 以 HTML 创建新元素var txt2=$("
").text("Text."); // 以 jQuery 创建新元素var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
$("img").after("Some text after");
$("img").before("Some text before");
通过after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中，我们创建若干新元素。这些元素可以通过text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：
function afterText()
var txt1="I "; // 以 HTML 创建新元素
var txt2=$("").text("love "); // 通过 jQuery 创建新元素
var txt3=document.createElement("big"); // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素
[if !supportLists]Ø [endif]jQuery - 删除元素
通过jQuery，可以很容易地删除已有的 HTML 元素。
如需删除元素和内容，一般可使用以下两个jQuery 方法：
•remove() - 删除被选元素（及其子元素）
•empty() - 从被选元素中删除子元素
$("#div1").remove();
$("#div1").empty();
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何jQuery 选择器的语法。
下面的例子删除class="italic" 的所有
元素：
$("p").remove(".italic");