jQuery prev ~ siblings选择器使用介绍

  1、prev ~ siblings:匹配 prev 元素之后的所有 siblings 元素

  2、

  (1)prev:任何有效选择器

  (2)siblings:一个选择器,并且它作为第一个选择器的同辈

  3、示例

  (1)源码

  siblings.html

  

复制代码 代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <title>prev ~ siblings选择器</title>

  <script type="text/javascript" src="jquery-2.0.3.js"></script>

  <style type="text/css">

  body{

  width:100%;

  height:100%;

  font-size:18px;

  color:#00FF00;

  }

  </style>

  <script type="text/javascript">

  $(function(){

  //匹配所有元素

  $("*").css("background-color","#FFE4E1");

  //prev ~ siblings选择器运用

  $("label ~ input").css("font-size","30px");

  //点击事件,prev ~ siblings选择器运用

  $("#pwd").click(function(){

  alert("我被选中!");

  });

  });

  </script>

  </head>

  <body>

  <form id="form_body">

  <label class="username">用户名:</label>

  <input type="text" id="username" name="username"/>

  <label class="password">密 码:</label>

  <input type="password" id="password" name="password"/>

  <input type="button" id="login" name="login" value="登录"/>

  <input type="reset" id="reset" name="reset" value="重置"/>

  <input type="checkbox" id="pwd" name="pwd"/>记住密码

  </form>

  </body>

  </html>

  (2)显示结果如下

jQuery prev ~ siblings选择器使用介绍