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

Q：a标签伪类的顺序？

A：顺序应该是：

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

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

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

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

  • 基本选择器
    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. 直系子元素  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>
    • 可见性过滤选择器
      1. :hidden 
        //取不可见的元素
$("div:hidden").show(500);

//先弹出“hello”对话框，然后hid-1会显示，hid-2仍然不可见

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
        div
        {
            margin: 10px;
            width: 200px;
            height: 40px;
            border: 1px solid #FF0000;
            display:block;
        }
        .hid-1
        {
            display: none;
        }
        .hid-2
        {
            visibility: hidden;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('div:hidden').show(500);
            alert($('input:hidden').val());
        });
    </script>
</head>
<body>
    <div class="hid-1">display: none</div>
    <div class="hid-2">visibility: hidden</div>
    <input type="hidden" value="hello"/>
</body>
</html>

        Demo 

      2. :visible 
        //取可见的元素
$("div:visibility").css("background","red");

//最后一个div会有背景色

<script type="text/javascript">
    $(document).ready(function() {
        $('div:visible').css('background', '#EEADBB');
    });
</script>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
<div>
    jQuery选择器大全
</div>
    • 属性过滤选择器
      1. [attribute] 
        //取拥有attribute属性的元素
$('a[title]').css('text-decoration', 'none'); 
//最后一个a标签仍然有下划线
    <ul>
        <li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li>
        <li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li>
        <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
        <li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li>
        <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
        <li><a href="#" class="item">其他</a></li>
    </ul>
      2. [attribute = value]和[attribute != value] 
        //取attribute属性值等于value或不等于value的元素
$("a[class=item]").css("color","#FF99CC");
$("a[class1=item]").css("color","#FF6600");

//class=item的颜色为#FF99CC  class!=item的颜色为#FF6600
    <ul>
        <li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li>
        <li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li>
        <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
        <li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li>
        <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
        <li><a href="#" class="item">其他</a></li>
    </ul>
      3. [attribute ^= value]和[attribute $= attribute]和[attribute *= value] 
        //attribute属性值以value开始，以value结束，或包含value值
$("a[title^=jQuery]").css("font-size","12px");
$("a[title$=jQuery]").css("font-size","24px");
$("a[title*=jQuery]").css("font-size","36px");
      4. [select1][select2] 
        //复合型过滤器，同时符合多个条件
 $('a[title^=jQuery][class=item]').hide();
    • 子元素过滤选择器
      1. :first-child 和 :last-child 
        // !!!注意
// div:first返回的是整个DOM文档中的第一个div元素，div:first-child返回的是所有div元素下的第一个元素合并后的集合
$("div:first-child").length
$("div:last-child").length

//len1 和 len2显示都是3
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var len1 = $('div:first-child').length;
        var len2 = $('div:last-child').length;
     });
    </script>
</head>
<body>
<div>
    <div>
        <div></div>
    </div>
</div>
</body>
</html>
      2. :only-child 
        //当某个元素有且仅有一个子元素时，only-child才会生效
$("div:only-child").css('border","1px solid #fff");
      3. :nth-child 
        //第几个孩子，从1开始计数
//:nth-child有三种用法：
//1) :nth-child(x)，获取第x个子元素 
//2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素 
//3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。（当x=0,y>=0时，等同于:hth-child(x)；当x=2,y=0时，等同于nth-child(even)；当x=2,y=1时，等同于:nth-child(odd)）

$("tr:nth-child(even)").css("background","red");
$("tr:nth-child(odd)").css("background","yellow");
$("tr:nth-child(3n)").css("background","blue");
    • 表单对象属性过滤选择器
      1. :enabled 和 :disabled 
        //:enabled 和 :disabled的匹配范围包括input,select,textarea
$(":enabled").css("border","1px solid #FF0000");
$(":disabled").css("border","1px solid #00FF00");
      2. :checked 
        //  仅在IE下有效 选中的单选框或复选框
$(":checked").css("background","#ff0000");
      3. :selected 
        //取下拉列表被选中的元素
$(":select").val();
  • 表单选择器
    1. :input
    2. :text
    3. :radio
    4. :checkbox
    5. :submit
    6. :reset
    7. :button
    8. :file
    9. :hidden

posted on 2016-05-23 23:56  Lizziezhao  阅读(1620)  评论(1)    收藏  举报

导航