jQuery 遍历
jQuery 遍历，根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
图示解析：
- <div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
- <ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
- 左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
- <span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
- 两个 <li> 元素是同胞（拥有相同的父元素）。
- 右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
- <b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
祖先---向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
- parent() 返回被选元素的直接父元素。
- parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
- parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
$
(
document
)
.
ready
(
function
(
)
{
$
(
"
span
"
)
.
parents
(
"
ul
"
)
;
}
)
;
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
$
(
document
)
.
ready
(
function
(
)
{
$
(
"
span
"
)
.
parentsUntil
(
"
div
"
)
;
}
)
;
后代---向下遍历 DOM 树
- children()
- find()
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
下面的例子返回每个 <div> 元素的所有直接子元素：
$
(
document
)
.
ready
(
function
(
)
{
$
(
"
div
"
)
.
children
(
)
;
}
)
;
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素：
实例
$
(
document
)
.
ready
(
function
(
)
{
$
(
"
div
"
)
.
find
(
"
span
"
)
;
}
)
;//find("*")取到所有值
同胞---在 DOM 树中水平遍历
许多有用的方法让我们在 DOM 树进行水平遍历：
- siblings() 返回被选元素的所有同胞元素。
- next() 返回被选元素的下一个同胞元素。
- nextAll() 返回被选元素的所有跟随的同胞元素。
- nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
- prev()
- prevAll()
- prevUntil()
过滤---缩小搜索元素的范围
三个最基本的过滤方法是：
- first() 返回被选元素的首个元素。
- last() 返回被选元素的最后一个元素。
- eq() 返回被选元素中带有指定索引号的元素。
- filter() 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
- not() 方法返回不匹配标准的所有元素。提示：not() 方法与 filter() 相反。
irst() 方法返回被选元素的首个元素。
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：
$
(
document
)
.
ready
(
function
(
)
{
$
(
"
div p
"
)
.
first
(
)
;
}
)
;
jQuery AJAX 方法
AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。
下面的表格列出了所有的 jQuery AJAX 方法：
| 方法 | 描述 |
|---|---|
| $.ajax() | 执行异步 AJAX 请求 |
| $.ajaxPrefilter() | 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 |
| $.ajaxSetup() | 为将来的 AJAX 请求设置默认值 |
| $.ajaxTransport() | 创建处理 Ajax 数据实际传送的对象 |
| $.get() | 使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
| $.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 |
| $.getScript() | 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript |
| $.param() | 创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串） |
| $.post() | 使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
| ajaxComplete() | 规定 AJAX 请求完成时运行的函数 |
| ajaxError() | 规定 AJAX 请求失败时运行的函数 |
| ajaxSend() | 规定 AJAX 请求发送之前运行的函数 |
| ajaxStart() | 规定第一个 AJAX 请求开始时运行的函数 |
| ajaxStop() | 规定所有的 AJAX 请求完成时运行的函数 |
| ajaxSuccess() | 规定 AJAX 请求成功完成时运行的函数 |
| load() | 从服务器加载数据，并把返回的数据放置到指定的元素中 |
| serialize() | 编码表单元素集为字符串以便提交 |
| serializeArray() | 编码表单元素集为 names 和 values 的数组 |
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(
URL,
callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
$
(
"
button
"
)
.
click
(
function
(
)
{
$.
get
(
"
demo_test.php
"
,
function
(
data
,
status
)
{
alert
(
"
数据:
"
+
data
+
"
\n
状态:
"
+
status
)
;
}
)
;
}
)
;
noConflict() 方法
noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。
当然，您仍然可以通过全名替代简写的方式来使用 jQuery：
$.
noConflict
(
)
;
jQuery
(
document
)
.
ready
(
function
(
)
{
jQuery
(
"
button
"
)
.
click
(
function
(
)
{
jQuery
(
"
p
"
)
.
text
(
"
jQuery 仍然在工作!
"
)
;
}
)
;
}
)
;
1.基本选择器
$("#id") //ID选择器 $("div") //元素选择器 $(".classname") //类选择器 $(".classname,.classname1,#id1") //组合选择器
2.层次选择器
$("#id>.classname ") //子元素选择器 $("#id .classname ") //后代元素选择器 $("#id + .classname ") //紧邻下一个元素选择器 $("#id ~ .classname ") //兄弟元素选择器
3.过滤选择器(重点)
$("li:first") //第一个li $("li:last") //最后一个li $("li:even") //挑选下标为偶数的li $("li:odd") //挑选下标为奇数的li $("li:eq(4)") //下标等于4的li $("li:gt(2)") //下标大于2的li $("li:lt(2)") //下标小于2的li $("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
3.2内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(selector)") //含有选择器所匹配的元素 $("td:parent") //含有子元素或者文本的元素
3.3可见性过滤选择器
$("li:hidden") //匹配所有不可见元素，或type为hidden的元素 $("li:visible") //匹配所有可见元素
3.4属性过滤选择器
$("div[id]") //所有含有 id 属性的 div 元素 $("div[id='123']") // id属性值为123的div 元素 $("div[id!='123']") // id属性值不等于123的div 元素 $("div[id^='qq']") // id属性值以qq开头的div 元素 $("div[id$='zz']") // id属性值以zz结尾的div 元素 $("div[id*='bb']") // id属性值包含bb的div 元素 $("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素
3.5状态过滤选择器
$("input:enabled") // 匹配可用的 input $("input:disabled") // 匹配不可用的 input $("input:checked") // 匹配选中的 input $("option:selected") // 匹配选中的 option
4.表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素 $(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同 $(":password") //所有密码框 $(":radio") //所有单选按钮 $(":checkbox") //所有复选框 $(":submit") //所有提交按钮 $(":reset") //所有重置按钮 $(":button") //所有button按钮 $(":file") //所有文件域