zoukankan      html  css  js  c++  java
  • jQuery基本选择器 安静点

    选择器是什么? 
        * 有特定语法规则(css选择器)的字符串
        * 用来查找某个/些DOM元素: $(selector)
     
    基本选择器
    1. 是什么?
      - 有特定格式的字符串
    2. 作用
      - 用来查找特定页面元素
    3. 基本选择器
          * #id
          * tagName/*
          * .class
          * selector1,selector2,selector3: 并集
          * selector1selector2selector3: 交集
     
    示例:
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8"> 
    </head>
    
    <body>
    <div id="div1" class="box">div1(class="box")</div>
    <div id="div2" class="box">div2(class="box")</div>
    <div id="div3">div3</div>
    <span class="box">span(class="box")</span>
    
    <br>
    <ul>
      <li>AAAAA</li>
      <li title="hello">BBBBB(title="hello")</li>
      <li class="box">CCCCC(class="box")</li>
      <li title="hello">DDDDDD(title="hello")</li>
    </ul>
    
    <!--
    1. 是什么?
      - 有特定格式的字符串
    2. 作用
      - 用来查找特定页面元素
    3. 基本选择器
      - #id : id选择器
      - element : 元素选择器
      - .class : 属性选择器
      - * : 任意标签
      - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
      - selector1selector2selectorN : 取多个选择器的交集(相交选择器)
    -->
    <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    <script type="text/javascript"> 
      //1. 选择id为div1的元素
        $('#div1').css('background', 'red')
    
      //2. 选择所有的div元素
        $('div').css('background', 'red')
    
      //3. 选择所有class属性为box的元素
       $('.box').css('background', 'red')
    
      //4. 选择所有的div和span元素  这是并集选择器
        $('div,span').css('background', 'red')
    
      //5. 选择所有class属性为box的div元素 相交选择器,注意不能用空格
       $('div.box').css('background', 'red')
      //所有元素背景色设置为红色,包括了<body>标签
      $('*').css('background', 'red')
    
    </script>
    </body>
    
    </html>

      

  • 相关阅读:
    没有找到MSVCR100.dll解决方法
    Python用subprocess的Popen来调用系统命令
    我是怎样成长为系统架构师的
    【java读书笔记】——Collection集合之六大接口(Collection、Set、List、Map、Iterator和Comparable)
    SQLite的SQL语法
    MVC中使用AuthorizeAttribute做身份验证操作
    windows知识点
    java实现第五届蓝桥杯斐波那契
    java实现第五届蓝桥杯绳圈
    java实现第五届蓝桥杯绳圈
  • 原文地址:https://www.cnblogs.com/anjingdian/p/15552223.html
Copyright © 2011-2022 走看看