一、简介
- jQuery 是一套“写的更少，做得更多”JavaScript 脚本库，非框架
- 特点： 提供了强大的功能函数、解决浏览器兼容性问题、实现丰富的UI、纠正错误的脚本知识
- 基础：HTML、CSS、JavaScript
- jQuery 库包含特性：HTML 元素选取、HTML元素操作、CSS操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities
二、使用
jQuery 官网 提供介绍、下载、API等。
- 下载
官网下载jQuery，共有两个版本：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码） - 通过 CDN（内容分发网络） 引用
百度压缩版引用地址:
微软压缩版引用地址:
官网jquery压缩版引用地址:
蛮好用的一个CDN
三、jQuery 对象
获取页面上任意一个或一组对象。
3.1 Dom 对象
JavaScript 获取
图片.png
//根据id获取单个Dom对象
var div = document.getElementById("div_one");
//根据标签名称获得Dom对象集合
var div = document.getElementsByTagName("div");
3.2 jQuery 包装集
是对Dom对象的扩充，jQuery 将所有的对象，无论是一个或一组，都封装成一个jQuery 包装集。每一个包装集都是作为一个对象一起调用的，包装集也用于属性和方法。
var jQueryObject = $("#testDiv");
3.3 Dom 和jQuery 包装集的装换
- Dom 转jQuery 包装集
var div = document.getElementById("div_one");
var domToJQueryObject = $(div);
- jQuery 包装集转 Dom
//jQuery 包装集是一个集合，通过索引器访问其中的元素
var domObject = $("#testDiv")[0];
//包装集遍历,this是Dom元素
$("#testDiv").each(function (){
alert(this);
$(this).html("修改内容");
});
四、jQuery 选择器详解
- 基础选择器 Basics
| 名称 | 说明 | 举例 |
|---|---|---|
| #id | 根据元素Id选择 | $("divId") 选择ID为divId的元素 |
| element | 根据元素的名称选择, | $("a") 选择所有元素 |
| .class | 根据元素的css类选择 | $(".bgRed") 选择所用CSS类为bgRed的元素 |
| * | 选择所有元素 | $("*")选择页面所有元素 |
| selector1,selector2,selectorN | 可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. | $("#divId, a, .bgRed") |
2.层次选择器 Hierarchy
| 名称 | 说明 | 举例 |
|---|---|---|
| ancestor descendant | 使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input. | $(".bgRed div") 选择CSS类为bgRed的元素中的所有 元素. |
| parent > child | 选择parent的直接子节点child. child必须包含在parent中并且父类是parent元素. | $(".myList>li") 选择CSS类为myList元素中的直接子节点 |
| prev + next | prev和next是两个同级别的元素. 选中在prev元素后面的next元素. | $("#hibiscus+img")选在id为hibiscus元素后面的img对象. |
| prev ~ siblings | ** **选择prev后面的根据siblings过滤的元素注:siblings是过滤器 | $("#someDiv~[title]")选择id为someDiv的对象后面所有带有title属性的元素 |
3.基本过滤器 Basic Filters
| 名称 | 说明 | 举例 |
|---|---|---|
| :first | 匹配找到的第一个元素 | 查找表格的第一行:$("tr:first") |
| :last | 匹配找到的最后一个元素 | 查找表格的最后一行:$("tr:last") |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 查找所有未选中的 input 元素: $("input:not(:checked)") |
| :even | 匹配所有索引值为偶数的元素，从 0 开始计数 | 查找表格的1、3、5...行:$("tr:even") |
| :odd | 匹配所有索引值为奇数的元素，从 0 开始计数 | 查找表格的2、4、6行:$("tr:odd") |
| :eq(index) | 匹配一个给定索引值的元素注:index从 0 开始计数 | 查找第二行:$("tr:eq(1)") |
| :gt(index) | 匹配所有大于给定索引值的元素注:index从 0 开始计数 | 查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)") |
| :lt(index) | 选择结果集中索引小于 N 的 elements注:index从 0 开始计数 | 查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)") |
| :header | 选择所有h1,h2,h3一类的header标签. | 给页面内所有标题加上背景色: $(":header").css("background", "#EEE"); |
| :animated | 匹配所有正在执行动画效果的元素 | 只有对不在执行动画效果的元素执行一个动画特效:$("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=20" }, 1000);}); |
- 内容过滤器 Content Filters
| 名称 | 说明 | 举例 |
|---|---|---|
| :contains(text) | 匹配包含给定文本的元素 | 查找所有包含 "John" 的 div 元素:$("div:contains('John')") |
| :empty | 匹配所有不包含子元素或者文本的空元素 | 查找所有不包含子元素或者文本的空元素:$("td:empty") |
| :has(selector) | 匹配含有选择器所匹配的元素的元素 | 给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test"); |
| :parent | 匹配含有子元素或者文本的元素 | 查找所有含有子元素或者文本的 td 元素:$("td:parent") |
5.可见性过滤器 Visibility Filters
| 名称 | 说明 | 举例 |
|---|---|---|
| :hidden | 匹配所有的不可见元素 注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden. | 查找所有不可见的 tr 元素:$("tr:hidden") |
| :visible | 匹配所有的可见元素 | 查找所有可见的 tr 元素:$("tr:visible") |
6.属性过滤器 Attribute Filters
| 名称 | 说明 | 举例 |
|---|---|---|
| [attribute] | 匹配包含给定属性的元素 | 查找所有含有 id 属性的 div 元素:$("div[id]") |
| [attribute=value] | 匹配给定的属性是某个特定值的元素 | 查找所有 name 属性是 newsletter 的 input 元素:$("input[name='newsletter']").attr("checked", true); |
| [attribute!=value] | 匹配给定的属性是不包含某个特定值的元素 | 查找所有 name 属性不是 newsletter 的 input 元素:$("input[name!='newsletter']").attr("checked", true); |
| [attribute^=value] | 匹配给定的属性是以某些值开始的元素 | $("input[name^='news']") |
| [attribute$=value] | 匹配给定的属性是以某些值结尾的元素 | 查找所有 name 以 'letter' 结尾的 input 元素:$("input[name$='letter']") |
| [attribute=value]* | 匹配给定的属性是以包含某些值的元素 | 查找所有 name 包含 'man' 的 input 元素:$("input[name*='man']") |
| [attributeFilter1][attributeFilter2][attributeFilterN] | 复合属性选择器，需要同时满足多个条件时使用。 | 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的:$("input[id][name$='man']") |
- 子元素过滤器 Child Filters
| 名称 | 说明 | 举例 |
|---|---|---|
| :nth-child(index/even/odd/equation) | 匹配其父元素下的第N个子或奇偶元素':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用:nth-child(even):nth-child(odd):nth-child(3n):nth-child(2):nth-child(3n+1):nth-child(3n+2) | 在每个 ul 查找第 2 个li:$("ul li:nth-child(2)") |
| :first-child | 匹配第一个子元素':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 | 在每个 ul 中查找第一个 li:$("ul li:first-child") |
| :last-child | 匹配最后一个子元素':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 | 在每个 ul 中查找最后一个 li:$("ul li:last-child") |
| :only-child | 如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配。 | 在 ul 中查找是唯一子元素的 li:$("ul li:only-child") |
8.表单选择器 Forms
| 名称 | 说明 | 解释 |
|---|---|---|
| :input | 匹配所有 input, textarea, select 和 button 元素 | 查找所有的input元素:$(":input") |
| :text | 匹配所有的文本框 | 查找所有文本框:$(":text") |
| :password | 匹配所有密码框 | 查找所有密码框:$(":password") |
| :radio | 匹配所有单选按钮 | 查找所有单选按钮 |
| :checkbox | 匹配所有复选框 | 查找所有复选框:$(":checkbox") |
| :submit | 匹配所有提交按钮 | 查找所有提交按钮:$(":submit") |
| :image | 匹配所有图像域 | 匹配所有图像域:$(":image") |
| :reset | 匹配所有重置按钮 | 查找所有重置按钮:$(":reset") |
| :button | 匹配所有按钮 | 查找所有按钮:$(":button") |
| :file | 匹配所有文件域 | 查找所有文件域:$(":file") |
9.表单过滤器 Form Filters
| 名称 | 说明 | 解释 |
|---|---|---|
| :enabled | 匹配所有可用元素 | 查找所有可用的input元素:$("input:enabled") |
| :disabled | 匹配所有不可用元素 | 查找所有不可用的input元素:$("input:disabled") |
| :checked | 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) | 查找所有选中的复选框元素:$("input:checked") |
| :selected | 匹配所有选中的option元素 | 查找所有选中的选项元素:$("select option:selected") |
五、管理jQuery 包装集
（一）动态创建元素
使用innerHTML直接添加元素的操作在IE6上，如果网络慢或者页面内容太大会出现终止操作的错误。
- 使用HTML DOM 创建元素
使用document.createElement 创建Dom 元素，然后通过appendChild添加到指定对象上。
var select = document.createElement("select");
select.options[0] = new Option("加载项1", "value1");
select.options[1] = new Option("加载项2", "value2");
select.size = "2";
var object = testDiv.appendChild(select);
- 使用jQuery 函数创建元素
$("动态创建的div>")
//内部使用document.createElement 创建元素
$("").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);
//内部使用innerHTML 方法创建元素
$("动态创建的div>").appendTo(testDiv);
- 将元素添加到对象上
一定不可以在页面加载时就改变DOM 结构，必须在页面加载完成后添加或删除元素。
//传统方法
window.onload = function () {
testDiv.innerHTML = "动态创建的div>";
}
//jQuery 使用动态$(document).ready(function) 方法
$(document).ready(
function () {
testDiv.innerHTML = "动态创建的div>";
}
);
//jQuery 使用$(function) 方法
$(
function () {
testDiv.innerHTML += "动态创建的div>";
}
);
(二)jQuery 提供的管理包装集的函数
1.过滤 Filtering
| 名称 | 说明 | 举例 |
|---|---|---|
| eq( index ) | 获取第N个元素 | 获取匹配的第二个元素:$("p").eq(1) |
| filter( expr ) | 筛选出与指定表达式匹配的元素集合。 | 保留带有select类的元素:$("p").filter(".selected") |
| filter( fn ) | 筛选出与指定函数返回值匹配的元素集合。这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除，否则就会保留。 | 保留子元素中不含有ol的元素:$("div").filter(function(index) { return $("ol", this).size() == 0;}); |
| is( expr ) 注意: 这个函数返回的不是jQuery包装集而是Boolean值 | 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回'false'. 'filter' 内部实际也是在调用这个函数，所以，filter()函数原有的规则在这里也适用。 | 由于input元素的父元素是一个表单元素，所以返回true:$("input[type='checkbox']").parent().is("form") |
| map( callback ) | 将一组元素转换成其他数组（不论是否是元素数组）。你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立 | 把form中的每个input元素的值建立一个列表:$("p").append( $("input").map(function(){ return $(this).val();}).get().join(", ") ); |
| not( expr ) | 删除与指定表达式匹配的元素 | 从p元素中删除带有 select 的ID的元素:$("p").not( $("#selected")[0] ) |
| slice( start, end ) | 选取一个匹配的子集 | 选择第一个p元素:$("p").slice(0, 1); |
2.查找 Finding
| 名称 | 说明 | 举例 | |
|---|---|---|---|
| add( expr ) | 把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。 | 动态生成一个元素并添加至匹配的元素中:$("p").add("Again") | |
| children( [expr] ) | 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。 | 查找DIV中的每个子元素:$("div").children() | |
| closest( [expr] ) | 取得与表达式匹配的最新的父元素 | 为事件源最近的父类li对象更换样式:$(document).bind("click", function (e) { $(e.target).closest("li").toggleClass("hilight");}); | |
| contents( ) | 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容 | 查找所有文本节点并加粗:$("p").contents().not("[nodeType=1]").wrap(""); | |
| find( expr ) | 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。 | 从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同:$("p").find("span") | |
| next( [expr] ) | 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。 | 找到每个段落的后面紧邻的同辈元素:$("p").next() | |
| nextAll( [expr] ) | 查找当前元素之后所有的同辈元素。 | 可以用表达式过滤 | 给第一个div之后的所有元素加个类:$("div:first").nextAll().addClass("after"); |
| offsetParent( ) | 返回第一个有定位的父类(比如(relative或absolute)). | ||
| parent( [expr] ) | 取得一个包含着所有匹配元素的唯一父元素的元素集合。你可以使用可选的表达式来筛选。 | 查找每个段落的父元素:$("p").parent() | |
| parents( [expr] ) | 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。 | 找到每个span元素的所有祖先元素:$("span").parents() | |
| prev( [expr] ) | 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。 | 找到每个段落紧邻的前一个同辈元素:$("p").prev() | |
| prevAll( [expr] ) | 查找当前元素之前所有的同辈元素。可以用表达式过滤。 | 给最后一个之前的所有div加上一个类:$("div:last").prevAll().addClass("before"); | |
| siblings( [expr] ) | 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。 | 找到每个div的所有同辈元素:$("div").siblings() |
3.串联 Chaining
| 名称 | 说明 | 举例 |
|---|---|---|
| andSelf( ) | 加入先前所选的加入当前元素中。对于筛选或查找后的元素，要加入先前所选元素时将会很有用。 | 选取所有div以及内部的p，并加上border类:$("div").find("p").andSelf().addClass("border"); |
| end( ) | 回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。 | 选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素:$("p").find("span").end() |
六、使用jQuery 操作元素的属性和样式
通常将id、src等称为元素属性，浏览器将元素解析成DOM 对象时，元素属性存储为DOM 属性，但元素属性和DOM 属性属性是有区别的，如src会将相对路径转成绝对路径，属性class对应className等。
JavaScript 中可以直接修改获取属性。
$("img").each(function (index) {
this.alt = "Flower";
alert("index:" + index + ", id" + this.id + ", alt:" + this.alt);
});
JavaScript 中还提供getAttribute和setAttribute来操作元素属性。
在jQuery 中提供attr()包装集函数 该函数可以同时操作包装集中所有元素的属性。
| 名称 | 说明 | 举例 |
|---|---|---|
| attr( name ) | 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。 | 返回文档中第一个图像的src属性值:$("img").attr("src"); |
| attr( properties ) | 将一个“名/值”形式的对象设置为所有匹配元素的属性。这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ). | 为所有图像设置src和alt属性:$("img").attr({ src: "test.jpg", alt: "Test Image" }); |
| attr( key, value ) | 为所有匹配的元素设置一个属性值。 | 为所有图像设置src属性:$("img").attr("src","test.jpg"); |
| attr( key, fn ) | 为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。 | 把src属性的值设置为title属性的值:$("img").attr("title", function() { return this.src }); |
| removeAttr( name ) | 从每一个匹配的元素中删除一个属性 | 将文档中图像的src属性删除:$("img").removeAttr("src"); |
注：当获得的包装集中只有一个对象，使用attr(name)获得他的元素属性，attr(key, name)会设置所有包装集中的元素属性，attr(properties)可以一次修改多个元素属性，removeAttr( name )函数删除元素属性，但是对应的DOM属性不会被删除，只会被影响。
6.1 修改CSS
修改CSS 类.png
修改CSS 样式.png
6.2 获取常用属性
1.宽和高相关 Height and Width
| 名称 | 说明 | 举例 |
|---|---|---|
| height( ) | 取得第一个匹配元素当前计算的高度值（px）。 | 获取第一段的高:$("p").height(); |
| height( val ) | 为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位（如：em或%），使用px。 | 把所有段落的高设为 20:$("p").height(20); |
| width( ) | 取得第一个匹配元素当前计算的宽度值（px）。 | 获取第一段的宽:$("p").width(); |
| width( val ) | 为每个匹配的元素设置CSS宽度(width)属性的值。如果没有明确指定单位（如：em或%），使用px。 | 将所有段落的宽设为 20:$("p").width(20); |
| innerHeight( ) | 获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。 | 见最后示例 |
| innerWidth( ) | 获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。 | 见最后示例 |
| outerHeight( [margin] ) | 获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。 | 见最后示例 |
| outerWidth( [margin] ) | 获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。 | 见最后示例 |
图片.png
2.位置相关 Positioning
另外在一些设计套弹出对象的脚本中,常常需要动态获取弹出坐标并且设置元素的位置.
但是很多的计算位置的方法存在着浏览器兼容性问题, jQuery 中为我们提供了位置相关的各个 函数:
| 名称 | 说明 | 举例 |
|---|---|---|
| offset( ) | 获取匹配元素在当前窗口的相对偏移。返回的对象包含两个整形 属性:top 和 left。此方法 只对可见元素有效。 | 获取第二段的偏移: var p = $("p:last");var offset = p.offset();p.html( "left: " + offset.left + ", top: " + offset.top ); |
| position( ) | 获取匹配元素相对父元素的偏移。返回的对象包含两个整形 属性:top 和 left。为精确 计算结果,请在补白、边 框和填充属性上使用像素 单位。此方法只对可见元 素有效。 | 获取第一段的偏移: var p = $("p:first");var position = p.position();$("p:last").html( "left: " + position.left + ", top: " + position.top ); |
| scrollT op() | 获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。 | 获取第一段相对滚动条顶部的偏移: var p = $("p:first");$("p:last").text( "scrollTop:" + p.scrollTop()); |
| scrollTop(val ) | 传递参数值时,设置垂直,滚动条顶部偏移为该值。此方法对可见和隐藏元素均有效。 | 设定垂直滚动条值: $("div.demo").scrollTop(300); |
| scrollLeft( ) | 获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。 | 获取第一段相对滚动条左侧的偏移: var p = $("p:first");$("p:last").text( "scrollLeft:" + p.scrollLeft() ); |
| scrollLeft( val ) | 传递参数值时,设置水平滚动条左侧偏移为该值。此方法对可见和隐藏元素均有效。 | 设置相对滚动条左侧的偏移: $("div.demo").scrollLeft(300); |
七、事件与事件对象
参考：
jQuery API
jQuery 入门教程
jQuery 教程