筛选方法
FiltrationMethod(过滤方法)
eq()
获取给定索引的元素
功能跟 :eq()
一样
first()
获取第一个元素
功能跟 :first
一样
last()
获取最后一个元素
功能跟 :last
一样
filter(exp)
留下匹配的元素
is(exp)
判断是否匹配给定的选择器,只要有一个匹配就返回,true
has(exp)
返回包含有匹配选择器的元素的元素
功能跟 :has 一样
not(exp)
删除匹配选择器的元素
功能跟 :not 一样
<script type="text/javascript">
//eq()选择索引值为等于 3 的 div 元素
$(document).ready(function () {
$("#btn1").click(function () {
$("div").eq(3).css("background", "#ffa");
});
//first()选择第一个 div 元素
$("#btn2").click(function () {
$("div").first().css("background", "#ffa");
});
//last()选择最后一个 div 元素
$("#btn3").click(function () {
$("div").last().css("background", "#ffa");
});
//filter()在div中选择索引为偶数的
$("#btn4").click(function () {
$("div").filter(":even").css("background", "#ffa");
});
//is()判断#one是否为:empty或:parent
$("#btn5").click(function () {
alert($("#one").is(":parent"));
});
//has()选择div中包含.mini的
$("#btn6").click(function () {
$("div").has(".mini").css("background", "#ffa");
});
//not()选择div中class不为one的
$("#btn7").click(function () {
$("div").not(".one").css("background", "#ffa");
});
});
</script>
查找方法
children(exp) 返回匹配给定选择器的子元素
功能跟 parent>child 一样
find(exp)
返回匹配给定选择器的后代元素
功能跟 ancestor descendant 一样
next()
返回当前元素的下一个兄弟元素
功能跟 prev + next 功能一样
nextAll()
返回当前元素后面所有的兄弟元素
功能跟 prev ~ siblings 功能一样
nextUntil()
返回当前元素到指定匹配的元素为止的后面元素
parent()
返回父元素
prev(exp)
返回当前元素的上一个兄弟元素
prevAll()
返回当前元素前面所有的兄弟元素
prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
siblings(exp)
返回所有兄弟元素
<script type="text/javascript">
$(document).ready(function () {
function anmateIt() {
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
//find()在body中选择所有class为mini的div后代元素
$("#btn1").click(function () {
$("body").find(".mini").css("background", "#ffa");
});
//next()#one的下一个div
$("#btn2").click(function () {
$("#one").next("div").css("background", "#ffa");
});
//nextAll()#one后面所有的span元素
$("#btn3").click(function () {
$("#one").nextAll("span").css("background", "#ffa");
});
//nextUntil()#one和span之间的元素
$("#btn4").click(function () {
$("#one").nextUntil("span").css("background", "#ffa");
});
//parent().mini的父元素
$("#btn5").click(function () {
$(".mini").parent().css("background", "#ffa");
});
//prev()#two的上一个div
$("#btn6").click(function () {
$("#two").prev("div").css("background-color", "#ffa");
});
//prevAll()span前面所有的div
$("#btn7").click(function () {
$("span").prevAll("div").css("background", "#ffa");
});
//prevUntil()span向前直到#one的元素
$("#btn8").click(function () {
$("span").prevUntil("#one").css("background", "#ffa");
});
//siblings()#two的所有兄弟元素
$("#btn9").click(function () {
$("#two").siblings().css("background", "#ffa");
});
});
</script>
串联方法
add(expr|ele|html|obj[,con]) :把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
<script type="text/javascript">
//add()选择所有的 span 元素和id为two的元素
$("#btn1").click(function () {
let all = $("span").add("#two");
all.css("background", "#ffa");
});
});
</script>