jQuery 方法

遍历-祖先:向上查找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!"+"\nError:"+xhr.error()+xhr.status+"\nresponseTxt"+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+"\nthe 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属性的元素

posted @ 2017-12-06 17:31  今夜无风  阅读(132)  评论(0编辑  收藏  举报