zoukankan      html  css  js  c++  java
  • jQuery层级元素选择器

    第一个: 

      1:空格表示所有  

      2:> 第一层 

      3:+/~ 同级

        +:之后的第一个元素

        ~:之后所有同级

    d

    代码示例:

    <!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>
    

      

  • 相关阅读:
    MySQL主从复制
    Mysql解压版安装配置
    MySQL 多行数据合并 GROUP_CONCAT
    Java集合框架
    Redis 入门知识点
    事务
    Spring AOP 知识点入门
    Tomcat热部署和热加载
    Java的Socket通信简单实例
    nginx和tomcat配置负载均衡和session同步
  • 原文地址:https://www.cnblogs.com/volts0302/p/5230503.html
Copyright © 2011-2022 走看看