jQuery层级元素选择器

最新推荐文章于 2021-07-04 20:30:18 发布

weixin_33736649

最新推荐文章于 2021-07-04 20:30:18 发布

阅读量111

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/volts0302/p/5230503.html

版权

jQuery层级元素选择器

第一个：　

　　１：空格表示所有　　

　　２：＞　第一层　

　　３：＋／～　同级

　　　　＋：之后的第一个元素

　　　　～：之后所有同级

代码示例：

<!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=utf-8" />  
 <script type="text/javascript" src="jquery-1.7.min.js"></script>  
 <script type="text/javascript">  
 $(document).ready(function(){    
     $("form input").css("color", "red");  //给form元素的后代input元素设置字体颜色  
     $("div>div").css("background", "#FCF");  //给maindiv下的子元素div1和div2设置背景颜色  
     $("div~input").css("border", "2px solid blue");  //给div元素后面的所有input元素设置边框  
     $("div+input").css("border", "2px solid red");  //给紧跟在div元素后的input元素设置边框  
  });
 </script>  
 <title>层级选择器</title>  
 </head>  
 <body>  
    <form id="form1">  
        <label>form元素的后代input元素为:input1, input2, input3</label>  
        <input type="text" id="input1" value="文本框1" />  
        <div id="maindiv">  
           <div id="div1">maindiv的子元素:id为div1</div>  
           <div id="div2">maindiv的子元素:id为div2</div>  
        </div>   
        <input type="text" id="input2" value="文本框2" />  
        <input type="text" id="input3" value="文本框3" /><br />  
        <label>maindiv的所有子元素为:div1, div2</label>  
    </form>  
 </body>  
 </html>