jQuery|"~"同级选择器

实例

选取 <div> 元素同级的所有 <p> 元素:

$("div ~ p")

定义和用法

("element ~ siblings") 选择器选取指定元素 "element" 同级的所有元素。

比如:

$("div ~ p") - 选取 <div> 元素同级的所有 <p> 元素。

语法

("element ~ siblings")

参数
element 必需。任何有效的 jQuery 选择器。
siblings 必需。规定 element 参数的同级。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div ~ p").css("background-color","yellow");
});
</script>
</head>
<body>

<h2>$("div ~ p") 会选取什么?</h2>

<p>这是一个 p 元素 (不会被选取)。</p>
<div style="border:1px solid black;padding:10px;">这是一个 div 元素</div>
<p>这是一个 p 元素</p>
<p>这是另外一个 p 元素</p>

<div style="border:1px solid black;padding:10px;">
<p>这个 p 元素在 div 内(不会被选取).</p></div>
<h2>这是一个标题</h2>
<p>这是一个 p 元素</p>

</body>
</html>
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 670评论 0 3
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,200评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,379评论 0 2
  • 分享人:蔡永坚 1. 查看数据库操作记录 2. 弹窗问题 A页面通过AlertPage弹出高为200px的B页面,...
    胡諾阅读 723评论 0 1
  • 在山的这边海的那边有一群程序猿 他们老实又腼腆 他们聪明又有钱 一天到晚坐在那里认真的改bug 饿了就吃一口方便面...
    Amosvison阅读 366评论 1 2