遍历-祖先：向上查找DOM树，以查找元素的祖先
parent():返回被选元素的直接父元素，只会向上一级对DOM进行遍历
parents():返回被选元素的所有祖先元素，会一路向上到元素的根节点
parentsUntil():返回介于两个给定元素的所有祖先
操作元素ul的直接父元素
$("ul").parent().css({"color":"red",'border':"2px solid red"})
操作元素ul的所有祖先元素
$("ul").parents().css({"color":"red",'border':"2px solid red"});
用可选参数进行过滤对祖先元素进行搜索
$("li").parents("ul").css({"color":"red",'border':"2px solid red"});
返回span和div之间的所有祖先
$("span").parentsUntil("div").css({"color":"red",'border':"2px solid red"});
遍历-后代：向下查找DOM树，以查找元素的后代
children():返回被选元素的所有直接子元素，之后向下一级遍历DOM树
find():向下查找所有的指定查找的后代元素，直至根节点
对直接子元素进行操作：
$("ul").children().css({"color":"red",'border':"2px solid red"});
使用过滤参数过滤对子元素的操作，操作类名为deng的所有li元素
$("ul").children("li.deng").css({"color":"red",'border':"2px solid red"});
操作div后代中所有的span元素
$("div").find("span").css({"color":"red",'border':"2px solid red"});
操作div所有的后代元素
$("div").find("*").css({"color":"red",'border':"2px solid red"});
遍历-同胞：具有相同的父元素，在DOM中水平遍历
1.siblings():返回被选元素的所有同胞元素，siblings意为兄弟姐妹的意思
操作li元素的所有同胞元素
$("li").siblings().css({"color":"red",'border':"2px solid red"});
也可以使用参数对特定元素进行设置操作，操作ol的同胞元素p
$("ol").siblings("p").css({"color":"red",'border':"2px solid red"});
2.next():返回被选元素的下一个同胞元素
$("ol").next().css({"color":"red",'border':"2px solid red"});
3.nextAll():返回被选元素的所有跟随同胞元素
$("ul").nextAll().css({"color":"red",'border':"2px solid red"});
4.nextUnitl():返回介于两个给定参数之间的所有跟随的同胞元素
操作元素ul和p之间的所有同胞元素
$("ul").nextUntil("p").css({"color":"red",'border':"2px solid red"});
5.prev(),prevAll(),prevUntil()进行前向同胞遍历，方法同next()，只是方向不同
遍历-过滤：
三个基本的过滤方法：first(),last(),eq(),基于其在一组元素中的位置来选择一个特定的元素
其它过滤方法：filter()和not()允许您选取匹配或不匹配某项指定标准的元素
1.first():返回被选元素的首个元素
操作div的第一个p元素
$("div p").first().css({"color":"red",'border':"2px solid red"});
2.last():返回被选元素的最后一个元素
操作div元素中的最后一个p元素
$("div p").last().css({"color":"red",'border':"2px solid red"});
3.eq():返回被选元素中带有指定索引号的元素，索引号从0开始
操作元素p的索引为1的元素
$("p").eq(1).css({"color":"red",'border':"2px solid red"});
4.filter():允许自定义一个标准，不匹配这个标准的元素将被从集合中删除，匹配的元素将会被返回。
class=t的p元素将被提取出来，即过滤出class=t的p，不满足的会被删除
$("p").filter(".t").css({"color":"red",'border':"2px solid red"});
5.not():同filter()相反，返回不匹配标准的所有元素
不是class=t的元素的p将会被提取出来
$("p").not(".t").css({"color":"red",'border':"2px solid red"});
jQuary AJAX 在不重载页面的情况下，AJAX通过后台加载数据，在网页上进行显示，实现页面的动态交互
没有jQuary AJAX还是比较难的
通过jQuary AJAX方法，可以通过HTTP GET或者HTTP POST方法从远端服务器上获取文本、HTML、XML、JSON数据，并且直接可以将这些外部数据加载入被选元素中
AJAX load()方法：简单而强大的内容加载方法，可以从远端服务器加载数据并将返回的数据放入指定的被选元素中
语法：$("id").load(URL,data,callback)
URL：要加载的URL地址
data:可选的，请求加载时发送的查询字符串的键/值数据集合
callback:load()方法执行加载完成后，需要执行的函数，可选的
例子：
加载服务器上的/static/file/test.txt文件，并通过点击鼠标在id=content的p元素中显示出来
<input type="button" value="点击" id="click_id">
<p id="content">content will be changed!</p>
$("#click_id").click(function () {
$("#content").load("/static/file/test.txt");
})
callback:加载方法完成后执行的回调函数，包含有三个参数：
responseTxt:调用成功时的结果内容
statusTxt:调用状态信息
xhr:XMLHttpRequset对象
例子：如果load方法加载成功，则会弹出提示框
$("#click_id").click(function () {
$("#content").load("/static/file/test.txt", function (responseTxt, statusTxt, xhr) {
if(statusTxt=="success"){
alert("This is successful!"+"
Error:"+xhr.error()+xhr.status+"
responseTxt"+responseTxt)
}else {
alert("Error:"+xhr.error()+xhr.status)
}
});
})
jQuary get()和post()方法：请求从服务器请求数据,请求响应的常用方法
get():从指定的资源获取数据，有可能是缓存数据
post():向指定的资源提交要处理的数据，也可以从资源获取数据，但不缓存数据，常用于连同请求一起发送数据
jQuary $.get()方法
$.get():通过HTTP GET方法请求从服务器请求数据,异步获取数据
语法：$.get(URL, callback)
URL:要请求的服务器的URL地址
callback:请求成功后要执行的函数名
例子：使用get方法从服务器/static/file/test.txt读取内容，并通过回调函数的data数据返回回来，显示链接状态
$("#click_id").click(function () {
$.get("/static/file/test.txt",function (data, status) {
alert("you'll get message:"+data+"
the status:"+status)
});
})
jQuary $.post()方法
$.post():通过HTTP POST方法请求从服务器请求数据，异步获取数据
语法：$.post(URL, data, callback)
URL:要请求的服务器的URL地址
data:连同请求要发送的数据
callback:请求成功后要执行的函数名
jQuary 选择器
选择器 实例 选取
* $("*") 选取所有元素
#id $("#lastname") 选取id=lastname的元素
.class $(".classA") 选取class=classA的元素
.class,.class... $(".classA,.classB") 选取class=classA或者class=classB的元素
element $("p") 选取所有的<p>元素
el1,el2,el3... $("div,h1,p") 选取所有的<div>,<h1>,<p>元素
:first $("p:first") 选取第一个<p>元素
:last $("p:last") 选取最后一个<p>元素
:even $("tr:even") 选取偶数行<tr>元素
:odd $("tr:odd") 选取奇数行<tr>元素
:first-child $("p:first-child") 选取属于其父元素的第一个子元素的所有 <p> 元素。选择属于其父元素的首个子元素的每个 <p> 元素
:first-of-type $("p:first-of-type") 选取属于其父元素的第一个<p>元素的所有<p>元素
:last-child $("p:last-child") 选取属于其父元素的最后一个子元素的每个<p>元素
:last-of-type $("p:last-of-type") 选取属于其父元素的最后一个子元素的所有<p>元素
:nth-child(n) $("p:nth-child(2)") 选取属于其父元素的第二个子元素的所有<p>元素，一个div是一个父节点,父节点是很多的
:nth-last-child(n) $("p:nth-last-child(n)") 选取属于其父元素的第一个子元素的所有<p>元素，从最后一个节点开始计数
:only-child $("p:only-child") 选取属于其父元素的唯一子元素的所有<p>元素，每一个块都有一个父类，找只有唯一子元素的父类
:only-of-type $("p:only-of-type") 选取属于其父元素的特定类型的唯一子元素的所有<p>元素
:parent>child $("div>p") div元素的直接子元素的所有p元素
:parent descendant $("div p") <div>元素后代的所有<p>元素
:element+next $("div+p") 每个<div>元素相邻的下一个p元素,中间不能有相邻
:element~siblings $("div~p") <div>元素同级别的（同胞）<p>元素
:eq(index) $("ul li:eq(2)") 列表中的第3个元素
:gt(no) $("ul li:gt(2)") 列举index大于3的元素
:lt(no) $("ul li:lt(2)") 列举index小于3的元素
:not(element) $("input:not(:empty)) 所有不为空的元素
:header $(":header") 所有的标题header
:animated $(":animated") 所有的动画元素
:focus $(":focus") 当前具有焦点的元素
:contains(text) $(":contains('hello')) 文本中具有hello字符的元素
:has(selector) $("p:has(span)") 包含有<span>在其内的<p>元素,最终要返回的是<p>元素，前提是它要包含有<span>标签
:empty $(":empty") 所有的空元素
:parent $(":parent") 所有是另一个元素的父元素的元素，即具有子元素的的元素
:hidden $("p:hidden") 所有隐藏的<p>元素
:visible $("table:visible") 所有可见的表格
:root $(":root") 文档的根元素
:lang(language) $(":lang(de)") 选取以de开头的language属性的元素