jQuery的7个同级选择器

来源：互联网发布：淘宝国外怎么用编辑：程序博客网时间：2024/06/08 02:38

jQuery的同级选择器有七个，其中最常用的是next()和prev()，使用时要避免跟after()和before()混淆。前者是获取元素，后者是往指定位置插入值。

通过下面的demo可以清楚的了解这7个同级选择器：

<!doctype html><html><head><meta charset="utf-8"><title>jQuery遍历之同级遍历</title><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><style>* {    margin:0px;    padding:0px;}.bd * {    display:block;    border:1px solid gray;    color:gray;    margin:5px;    padding:5px;    text-align:center;}</style></head><body><div class="bd">    <p>p</p>    <h2>2</h2>    <h3>3</h3>    <h4>4</h4>    <h5>5</h5>    <h6>6</h6></div><script>$(document).ready(function() {    $("h4").siblings().css({        border: "3px solid red"    }); //同级元素全部修改    $("h4").next().css({        border: "3px solid red"    }); //下一个元素修改    $("h4").nextAll().css({        border: "3px solid red"    }); //下面所有的元素修改    $("h4").nextUntil("h6").css({        border: "3px solid red"    }); //下面元素的区间修改(从next向后找同级元素直到h6)    $("h4").prev("h6").css({        border: "3px solid red"    }); //上面元素的区间修改    $("h4").prevAll("h6").css({        border: "3px solid red"    }); //上面所有的元素修改    $("h4").prevUntil("h6").css({        border: "3px solid red"    }); //上面元素的区间修改（从prev向前找同级元素直到h6）});</script></body></html>

阅读全文

0 0