felayman——jquery之使用过滤器(二)
浏览数：19 /
时间：2015年06月09日
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/**
* jquery过滤器之查找
* 1.add()
* 2.children()
* 3.closest()
* 4.contents()
* 5.find()
* 6.next()
* 7.nextAll()
* 8.nextUntil()
* 9.offsetParent()
* 10.parent()
* 11.parents()
* 12.parentsUntil()
* 13.prev()
* 14.prevAll()
* 15.prevUntil()
* 16.siblings()
*/
//add(expr,[context])把与表达式匹配的元素添加到jquery对象中
//children(expre) 取得一个包含指定表达式的元素的所有子元素集合
$(function(){
/* $("#button1").click(function(){
//所有ul的后代的字体都变为蓝色，装饰为下弧线,字体大小为23px
$("ul").children()
.css("color","blue")
.css("text-decoration","underline")
.css("fontSize","23px");
});
//content()获取所有子节点内容,包括注释,文本节点
$("#button2").click(function(){
//所有ul的后代的字体都变为蓝色，装饰为下弧线,字体大小为23px
$("ul").contents()
.css("fontSize","25px");
});
//find() 只能查找元素
$("#button3").click(function(){
alert($("ul").children().length);//弹出6,之包括元素节点
alert($("ul").find("li").length);//弹出6,也只能那个查找到元素节点
alert($("ol").find("a").length);//会弹出3
alert($("ul").contents().length);//弹出15,包括注释和文本节点
});
//parens(express)查找所有匹配的的祖先节点
$("#current").click(function(){
alert($(this).parents().length);//弹出4
alert($(this).parents().html());
});
//parent(expre)匹配指定表达式的元素的父元素的第一个元素的集合
$("#button4").click(function(){
//所有div的父元素都会变成如下样式
$("div").parent()
.css("width","100px")
.css("height","100px")
.css("border","2px solid red");
});
//parentUntil()查找指定parents()集合中的部分元素
$("#button5").click(function(){//有待加深理解
$("#current").parentsUntil("#haha")
.css("color","blue")
.css("fontSize","20px");
});
//上述代码并没有给出我想要的效果(哪里理解错了),于是按照官方文档给的案例
$("#button6").click(function(){
$(‘li.item-a‘).parentsUntil(‘.level-1‘)
.css(‘background-color‘, ‘red‘);
});
//看来的确是我的理解偏差,我一维Until是除了的意思,但是在这里是直到碰到
//offsetParent() 定位当前元素的第一个定位祖先元素
$("#span").offsetParent().css("background","yellow");//有待加深理解
//closest()从当前元素开始匹配,逐级向上查找,直到发现匹配的元素就停止
//id为span的元素开始向上查找元素直到第一个匹配到,设置
$("#span").closest("div").css("color","red");//有待加深理解
*/
//prev()用于筛选前一个同辈元素的表达式
//alert($("#li").prev().html());
//prevAll()
// alert($("#li").prevAll().length)
//next()返回后面那个紧邻的同辈元素
//alert($("#li").next().length);
//nextAll()
//alert($("#li").nextAll().length);
//nextUntil()
// alert($("#li").nextUntil("#lii").length);
//siblings()取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
//alert($("#li").siblings("#lii").html());
//add(expr)把与表达式匹配的元素添加到jQuery对象中
$("ul li").siblings("span").add("li").css("color","blue");
});
</script>
<title></title>
</head>
<body>
<div>
<p>
<div>hello1
<div>hello2
<span id="span">span2</span>
</div>
</div>
</p>
</div>
<ul class="level-1">
<li class="item-i">1</li>
<li class="item-ii">2
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">3</li>
</ul>
<div>祖先节点
<span id="haha">span节点</span>
<a href="">a节点</a>
<code>code节点</code>
<div>父节点
<div id="current">当前节点</div>
</div>
</div>
<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button>
<button id="button4">button4</button>
<button id="button5">button5</button>
<button id="button6">button6</button>
<ul>
<!--我是注释-->
<li id="li">1</li>
<li>2</li>
<li>3</li>
<li id="lii">4</li>
<li>5,haha</li>
<li >6</li>
</ul>
<ol>
<li ><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</body>
</html>郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
