网站制作学习网JS脚本→正文:jquery对象筛选
字体:

jquery对象筛选

JS脚本 2010/8/26 18:49:20  点击:不统计


jquery第九课jquery对象的筛选,通过索引,条件等相关内容对jquery获取的对象数组进行筛选,选择出自己想要的对象。
参考共用代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>jquery对象筛选</TITLE>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<SCRIPT language="javascript">
$(function(){
<!--jquery文档处理代码区-->
});
</SCRIPT>
<BODY>
<div id="1">jquery筛选1</div><div id="2" class="foraspcn">jquery筛选2</div><div id="3">jquery筛选3</div><div id="4"><li>jquery筛选4</li></div>
<div><li>jquery筛选5</li></div>
</BODY>
</HTML>
1.jquery对象筛选-过滤
(1).eq(index);选出索引为index的对象内容.
举例:$("div").eq(1); 选出索引为1的p对象结果为:<div id="2">jquery筛选2</div>索引从0开始
(2).first();获取对象的第一个对对象内容。
举例:$("div").first(); 返回:<div id="1">jquery筛选1</div>
(3).last();获取对象的最后一个对象内容。
例:$("div").last(); 结果:<div id="4"><li>jquery筛选4</li></div>
(4).filter(expr);筛选条件expr;通过设置筛选条件来获取需要的jquery对象
$("div").filter(".foraspcn,#1");获取class为foraspcn和id为1的对象,结果:<div id="1">jquery筛选1</div><div id="2" class="foraspcn">jquery筛选2</div>
(5).filter(fn); 筛选条件为function()函数,通过function返回来选择。
$("div").filter(function(){return $("li",this).size==0;}); 这个获取的是<div id="1">jquery筛选1</div><div id="2" class="foraspcn">jquery筛选2</div><div id="3">jquery筛选3</div>,解释一下,首先通过p选择了所有的p,然后通过.filter的function 选择出在p中没有有li的p;
(6).is(expr);返回值:Booleanis(expr) 判断对象是否属于exper元素
$("#1").parent().is("body");将返回true,因为id=1的p的父元素是body
(7).map(callback); 将一组元素转换成其他数组(不论是否是元素数组)
$("div").map(function(){return $(this).text()}).get().join("-");结果jquery筛选1-jquery筛选2-jquery筛选3--因为4里面的jquery是li内容,text选择为空。
(8).has("expr"); 返回包含下一级expr元素的对象。
$("div").has("li");返回 <div id="4"><li>jquery筛选4</li></div>
(9).not(expr); 去除符合expr的对象,
$("div").not($("#1"));则返回 <div id="2" class="foraspcn">jquery筛选2</div><div id="3">jquery筛选3</div><div id="4"><li>jquery筛选4</li></div>
(10)slice(start, [end]); 选择一个匹配的子集,索引从start到end(可选,如果不填写则是最大长度,不包括end)。
$("div").slice(1,2); 结果返回<div id="2" class="foraspcn">jquery筛选2</div>
2.jquery对象筛选-查找
(1).children([expr]); 查找exper条件下的所有子元素,如果没有exper则标识全部子元素。不包括后代元素
$("body").children();则返回全部的p $("body").children("#2");则返回 <div id="2" class="foraspcn">jquery筛选2</div>
(2).closest(expr, [context]);closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。expr可以是数组,也可以是字符串 content可选,可以是Dom对象或者jquery元素。 这个不是很理解。
(3).find(expr); 查询匹配expr的后代元素。同$(element expr);
$("div").find("li");返回<li>jquery筛选5</li>
(4).next([expr]); 通过匹配expr获取相邻的同级后面的元素,expr可选,如果没有则匹配相邻的同级后面的元素
$("div").next("div"); 则返回 <div id="2" class="foraspcn">jquery筛选2</div><div id="3">jquery筛选3</div><div id="4"><li>jquery筛选4</li></div>
$("#4").next();则返回<div><li>jquery筛选5</li></div>
(5).nextAll([expr]);通过匹配expr获取查找当前元素之后所有的同辈元素,expr可选,如果没有则匹配相邻的同级元素,不包括子元素。
$("p:first").nextAll().addclass("newclass"); 将第一个div后的所有的平级元素添加class为newclass,其中平级的子元素不变。
(6).nextUntil([expr]);通过匹配expr查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止,xpr可选,如果没有则匹配相邻的同级元素
(7) offsetParent(); 返回第一个匹配元素用于定位的父节点。返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效
(8).parent([expr]);取得一个包含着所有匹配元素的唯一父元素的元素集合
明天继续,太多了,今天就学习到这里

·上一篇:jquery属性操作2 >>    ·下一篇:jQuery操作Frame(iframe)网页框架 >>
推荐文章
最新文章