<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM查询</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
/**
过滤
eq(index|-index)
first()
last()
hasClass(class)
filter(expr|obj|ele|fn)
is(expr|obj|ele|fn)1.6*
has(expr|ele)
not(expr|ele|fn)
slice(start,[end])
查找
children([expr])
closest(expr,[con]|obj|ele)1.6*
find(expr|obj|ele)
next([expr])
nextall([expr])
nextUntil([exp|ele][,fil])1.6*
parent([expr])
parents([expr])
parentsUntil([exp|ele][,fil])1.6*
prev([expr])
prevall([expr])
prevUntil([exp|ele][,fil])1.6*
siblings([expr])
串联
add(expr|ele|html|obj[,con])
*/
//(1)eq() 选择索引值为等于 3 的 div 元素
$("#btn1").click(function () {
let eq = $("div").eq(3);
eq.css("background-color","deepskyblue");
})
//(2)first() 选择第一个 div 元素
$("#btn2").click(function () {
let eq = $("div").first();
eq.css("background-color","deepskyblue");
})
//(3)last() 选择最后一个 div 元素
$("#btn3").click(function () {
let eq = $("div").last();
eq.css("background-color","deepskyblue");
})
//(4)filter() 在div中选择索引为偶数的
$("#btn4").click(function () {
$("div").filter(function (index) {
if (index%2==0)
return true;
return false;
}).css("background-color","deepskyblue");
})
//(5)is() 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
// 判断#one是否为:empty(空元素)或:parent(有子元素或者文本元素)
$("#btn5").click(function () {
alert($(".one").is(":parent"));
})
//(6)has() 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
// 选择div中包含.mini的
$("#btn6").click(function () {
$("div").has(".mini").css("background-color","deepskyblue");
})
//(7)not()从匹配元素的集合中删除与指定表达式匹配的元素
// 选择div中class不为one的
$("#btn7").click(function () {
$("div").not(".one").css("background-color","deepskyblue");
})
//(8)children() 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。,children()只考虑子元素而不考虑所有后代元素。
// 在body中选择所有class为one的div子元素
$("#btn8").click(function () {
$("body").children(".one").css("background-color","deepskyblue");
})
//(9)find() 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
// 在body中选择所有class为mini的div后代元素
$("#btn9").click(function () {
$("body").find("div .mini").css("background-color","deepskyblue");
})
//(10)next()取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
// #one的下一个div
$("#btn10").click(function () {
$("#one").next("div").css("background-color","deepskyblue");
})
//(11)nextAll()查找当前元素之后所有的同辈元素。可以用表达式过滤
// #one后面所有的span元素
$("#btn11").click(function () {
$("#one").nextAll("span").css("background-color","deepskyblue");
})
//(12)nextUntil() 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
// #one和span之间的元素
$("#btn12").click(function () {
$("#one").nextUntil("span").css("background-color","deepskyblue");
})
//(13)parent()取得一个包含着所有匹配元素的唯一父元素的元素集合。你可以使用可选的表达式来筛选。
// .mini的直接父元素
$("#btn13").click(function () {
$(".mini").parent().css("background-color","deepskyblue");
})
//(14)prev()取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
// 可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。
// #two的上一个div
$("#btn14").click(function () {
$("#two").prev("div").css("background-color","deepskyblue");
})
//(15)prevAll() 查找当前元素之前所有的同辈元素,可以用表达式过滤。
// span前面所有的div
$("#btn15").click(function () {
$("span").prevAll("div").css("background-color","deepskyblue");
})
//(16)prevUntil() 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
// span向前直到#one的元素
$("#btn16").click(function () {
$("span").prevUntil("#one").css("background-color","deepskyblue");
})
//(17)siblings() 取得一个(包含匹配的元素集合中)每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
// #two的所有兄弟元素
$("#btn17").click(function () {
$("#two").siblings().css("background-color","deepskyblue");
})
//(18)add()把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
// 选择所有的 span 元素和id为two的元素
$("#btn18").click(function () {
$("span").add("#two").css("background-color","deepskyblue");
})
});
</script>
</head>
<body>
<input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
<input type="button" value="first()选择第一个 div 元素" id="btn2" />
<input type="button" value="last()选择最后一个 div 元素" id="btn3" />
<input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
<input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
<input type="button" value="has()选择div中包含.mini的" id="btn6" />
<input type="button" value="not()选择div中class不为one的" id="btn7" />
<input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
<input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
<input type="button" value="next()#one的下一个div" id="btn10" />
<input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
<input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
<input type="button" value="parent().mini的父元素" id="btn13" />
<input type="button" value="prev()#two的上一个div" id="btn14" />
<input type="button" value="prevAll()span前面所有的div" id="btn15" />
<input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
<input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
<input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
<h3>基本选择器.</h3>
<br /><br />
文本框<input type="text" name="account" disabled="disabled" />
<br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other"><b>class为mini,title为other</b></div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<span id="span1">^^span元素 111^^</span>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span2">^^span元素 222^^</span>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
