a标签伪类顺序以及jQuery选择器

Posted 2020-07-11

Q：a标签伪类的顺序？

A：顺序应该是：

1. :link
2. :visited
3. :hover
4. :avtice

原因：link和visited是a标签的常态属性，hover和active是a标签的即时状态。

Q:jQuery选择器？如何准确快速的选择出想要的元素？

A: 在用jQuery的时候，一个很重要的用法，就是要快速选择出自己想要的元素。把常用的选择记录下来：

• 基本选择器

1. 1. ID选择器

      $("#id").css("width","120px");

   2. Class选择器

      $(".class").css("width","120px");

   3. Element选择器

      $("p").css("width","120px");

   4. *选择器

      //遍历form下的所有元素，将宽度设置为120px
      $("form *").css("width","120px");

   5. 并列选择器

      $("p,div").css("width","120px");

• 层次选择器

1. 1. 直系子元素  parent > child

      //选取div下的第一代span元素，并将字体颜色设置为红色
      $("div > span").css("color","#FF0000");
      
      //只有第一个span会变色
      <div>
          <span>123</span>
          <p>
              <span>456</span>
          </p>
      </div>

   2. 下一个兄弟元素 prev + next

      //选class为item的下一个兄弟元素
      $(".item + div").css("color","#FF0000");
      //等价代码
      $(".item").next(‘div‘).css(‘color‘,‘#FF0000‘);
      
      //下面代码只有123和789会变色
      
      <p class="item"></p>
      <div>123</div>
      <div>456</div>
      <span class="item")</span>
      <div>789</div>

   3. 兄弟元素  prev ~ siblings

      //选取class为inside之后的所有div兄弟元素
      $(".inside ~ div").css(‘color‘,‘#ff0000‘);
      //等价代码
      $(".inside").nextAll(‘div‘).css("color","#ff0000");
      
      //下面的代码，G2和G4会变色
      <div class="inside">G1</div>
      <div>G2</div>
      <span>G3</span>
      <div>G4</span>

• 过滤选择器
  • 基本过滤选择器
    1. :first 和 :last

       // 取第一个元素或最后一个元素
       $("span : first").css("color","#ff0000");
       $("span : last").css("color","#ff0000");
       
       //G1和G3会变色
       <span>G1</span>
       <span>G2</span>
       <span>G3</span>

    2. :not

       //取非元素
       $("div:not(.wrap)").css("color","#ff0000");
       
       //G1会变色
       <div>G1</div>
       <div class="wrap">G2</div>
       
       //G1和G2都会变色
       <div>G1
           <div class="wrap">G2</div>
       </div>

    3. :even 和 :odd

       //偶数行
       $("li:even").css("color","#ff0000");
       //奇数行
       $("li:odd").css("color","#00ff00");
       
       //A、C列颜色为#ff0000  B、D列颜色为#00ff00
       <ul>
           <li>A</li>
           <li>B</li>
           <li>C</li>
           <li>D</li>
       </ul>

    4. :eq(x)

       //第三行
       $("li:eq(2)").css("color","#00ff00");
       
       //第三行颜色改变
       <ul>
           <li>A</li>
           <li>B</li>
           <li>C</li>
           <li>D</li>
       </ul> 

    5. :gt(x) 和 :lt(x)

       //取大于x索引或小于x索引的元素
       $(‘ul li:gt(2)‘).css(‘color‘, ‘#FF0000‘);
       $(‘ul li:lt(2)‘).css(‘color‘, ‘#0000FF‘);
       
       L3 L4会是红色，L1 L2会是蓝色
       <ul>
           <li>L1</li>
           <li>L2</li>
           <li>L3</li>
           <li>L4</li>
           <li>L5</li>
       </ul>

    6. :header

       //取h1~h6标签
        $(‘:header‘).css(‘background‘, ‘#EFEFEF‘);

  • 内容过滤器
    1. :contains(text)

       //取包含text文本的元素
       //dd元素种包含"jQuery"文本的会变色
        $(‘dd:contains("jQuery")‘).css(‘color‘, ‘#FF0000‘);
       
       //第一个dd会变色
       <dl>
           <dt>技术</dt>
           <dd>jQuery, .NET, CLR</dd>
           <dt>SEO</dt>
           <dd>关键字排名</dd>
           <dt>其他</dt>
           <dd></dd>
       </dl>

    2. :empty

       //取不包含子元素或文本为空的元素
       $("dd:empty").html("none");
       
       //第三个dd会显示“none”
       <dl>
           <dt>技术</dt>
           <dd>jQuery, .NET, CLR</dd>
           <dt>SEO</dt>
           <dd>关键字排名</dd>
           <dt>其他</dt>
           <dd></dd>
       </dl>

    3. :has(selector)

       //取选择器匹配的元素
        // 为包含span元素的div添加边框
        $(‘div:has(span)‘).css(‘border‘, ‘1px solid #000‘);
       
       //即使span不是div的直系子元素，也会生效
       <div>
           <h2>
               A
               <span>B</span>
           </h2>
       </div>

    4. :parent

       //取包含子元素或文本的元素
       $(‘ol li:parent‘).css(‘border‘, ‘1px solid #000‘);
       
       //下面的代码，A和D所在的li会有边框
       <ol>
           <li></li>
           <li>A</li>
           <li></li>
           <li>D</li>
       </ol>

  • 可见性过滤选择器
  • 属性过滤选择器
  • 表单对象属性过滤选择器
• 表单选择器