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