jQuery 简介
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery的使用
jQuery的导入
要使用jQuery首先要导入jQuery文件导入的方式分两种本地导入和网络导入（其实就上用网上的jQuery库）
本地导入
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
注意：
导入文件的这对<script>标签里不能再写jquery代码，不然会出错。
网络导入
如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
Google 的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
Microsoft 的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
使用谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
jQuery 语法
基础语法
$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
jQuery 选择器
jQuery ID选择器
- $("#name") 选取 ID名字为 name的元素。
jQuery CLASS选择器
- **$(".name") **选取 class名字为 name的元素。
jQuery 元素选择器
-
$("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" 结尾的元素。
-
**$("div#intro .head") ** id="intro" 的 <div> 元素中的所有 class="head" 的元素
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$(selector).css("属性":"值");
$("p").css("background-color","red");
jQuery查询其他节点
祖先
-
**parent() ** 返回被选元素的直接父元素。
-
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
返回所有 元素的所有祖先：
$(document).ready(function(){
$("span").parents();
});
您也可以使用可选参数来过滤对祖先元素的搜索。
例子返回所有 元素的所有祖先，并且它是 元素：
$(document).ready(function(){
$("span").parents("ul");
});
- parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
返回介于 与 children() 返回被选元素的所有直接子元素。 find() 返回被选元素的后代元素，一路向下直到最后一个后代。 find("selector") 返回属于被选元素后代的所有selector 元素 find("*") 返回被选元素的所有后代 siblings() 返回被选元素的所有同胞元素。 next() 返回被选元素的下一个同胞元素。 nextAll() 返回被选元素的所有跟随的同胞元素。 nextUntil("selector") 返回介于两个给定参数之间的所有跟随的同胞元素 prev() 返回的是前面的同胞元素 prevAll() 返回被选元素的前面的同胞元素。 prevUntil("selector") 返回介于两个给定参数之间的所有跟随的同胞元素（向前） first() 返回被选元素的首个元素。 last() 方法返回被选元素的最后一个元素。 eq() 方法返回被选元素中带有指定索引号的元素。 filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。 返回带有类名 "intro" 的所有 <p> 元素： not() 方法返回不匹配标准的所有元素。 not() 方法与 filter() 相反。 jQuery 事件处理方法是 jQuery 中的核心函数。 jQuery 代码放到 **单独文件中的函数 ** 和导入jQuery库文件一样。 jQuery 事件 jQuery 拥有可操作 HTML 元素和属性的强大方法。 jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。 DOM = Document Object Model（文档对象模型） text()、html() 以及 val() text() 设置或返回所选元素的文本内容 html() 设置或返回所选元素的内容（包括 HTML 标记） val() 设置或返回表单字段的值 attr() 例子：如何获得链接中 href 属性的值： text() 设置或返回所选元素的文本内容 html() 设置或返回所选元素的内容（包括 HTML 标记） val() 设置或返回表单字段的值 text()、html() 以及 val() 的回调函数 上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。 例子演示带有回调函数的 text() 和 html()： jQuery attr() 方法也用于设置/改变属性值 $(selector).attr( 属性：属性值) attr() 方法也允许您同时设置多个属性 jQuery 方法 attr()，也提供回调函数。 添加新内容的四个 jQuery 方法 append() 在被选元素的结尾插入内容 prepend() 在被选元素的开头插入内容 after() 在被选元素之后插入内容 before() 在被选元素之前插入内容 注意：通过 append() 和 prepend() 方法添加若干新元素 remove() 删除被选元素（及其子元素） empty() 从被选元素中删除子元素 返回 CSS 属性 设置多个 CSS 属性 css({"propertyname":"value","propertyname":"value",...}) width() 设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 设置或返回元素的高度（不包括内边距、边框或外边距）。 innerWidth() 返回元素的宽度（包括内边距）。 innerHeight() 返回元素的高度（包括内边距）。 **outerWidth() ** 返回元素的宽度（包括内边距和边框）。 outerHeight() 返回元素的高度（包括内边距和边框）。 隐藏、显示、切换，滑动，淡入淡出，以及动画 hide() 隐藏HTML 元素 show() 显示 HTML 元素 toggle() 切换 hide() 和 show() 方法 显示被隐藏的元素，并隐藏已显示的元素： $(selector).toggle(speed,callback) fadeIn() 用于淡入已隐藏的元素。 语法： $(selector).fadeIn(speed,callback) fadeOut() 方法用于淡出可见元素。 语法： $(selector).fadeOut(speed,callback) fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 语法： $(selector).fadeToggle(speed,callback) fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。 语法： $(selector).fadeTo(speed,opacity,callback) slideDown() 方法用于向下滑动元素。 语法： $(selector).slideDown(speed,callback) 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是滑动完成后所执行的函数名称。 slideUp() 方法用于向上滑动元素。 语法： $(selector).slideUp(speed,callback) 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是滑动完成后所执行的函数名称。 slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。 如果元素向下滑动，则 slideToggle() 可向上滑动它们。 如果元素向上滑动，则 slideToggle() 可向下滑动它们。 语法： $(selector).slideToggle(speed,callback) 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是滑动完成后所执行的函数名称。 animate() 方法用于创建自定义动画。 语法： $(selector).animate({params},speed,callback) 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 animate() - 操作多个属性 animate() - 使用相对值 animate() - 使用预定义的值 animate() - 使用队列功能 默认地，jQuery 提供针对动画的队列功能。 这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。$(document).ready(function(){
$("span").parentsUntil("div");
});
后代
兄弟
过滤（缩写搜索元素的范围）
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1$(document).ready(function(){
$("p").filter(".intro");
});
返回不带有类名 "intro" 的所有 <p> 元素：$(document).ready(function(){
$("p").not(".intro");
});
jQuery 事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。jQuery 事件函数
$("button").click(function() {..some code... } )
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
Event 函数
绑定函数至
$(document).ready(function)
将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)
触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)
触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)
触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件
jQuery HTML
获得内容和属性
获得内容
获取属性
$("button").click(function(){
alert($("#w3s").attr("href"));
});
设置内容和属性
设置内容
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。$("#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()
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
attr() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
添加元素
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); // 追加新元素
}
删除元素/内容
获取并设置 CSS 类
语法： css("propertyname")$("p").css("background-color");
jQuery 效果
隐藏和显示
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。淡入淡出
滑动
动画
请注意，生成动画的过程中可同时使用多个属性：