jquery实战之jquery选择器

这些虽然文档上已经写的很详细了，但自己感觉还是写一遍会更有印象

jquery选择器可以分为四大类，分别为：1.基本选择器 2.层次选择器 3.过滤选择器 4.表单选择器，不过过滤选择器还可以细分为6小类：(1).简单过滤选择器 (2).内容过滤选择器(3).可见性过滤选择器 (4).属性过滤选择器 (5).子元素过滤选择器 (6).表单对象属性过滤选择器

1.基本选择器：

选择器　　　　　　　　　　　　　　　　　　功能

#id　　　　　　　　　　　　　　　　根据给定的id匹配一个元素

element　　　　　　　　　　　　　根据给定的元素名匹配所有的元素

.class　　　　　　　　　　　　　　　根据给定的类匹配元素

*　　　　　　　　　　　　　　　　匹配所有的元素

selector1,selector2..　　　　　　将每一个选择器匹配到的元素合并后一起返回

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>BasicSelector.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src = "js/jquery-1.4.2.js"></script>
    <style type="text/css">
        body{font-size:12px;text-align:center}
        .clsFrame{width:300px;height:100px;border:solid 1px #ccc;}
        .clsFrame div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc; margin:8px}
        .clsOne{background-color:#eee}
    </style>
    <script type="text/javascript">
        //ID匹配元素，显示为沈亮1
        $(function(){
            $("#divOne").css("display","block");
        })
        //元素名匹配元素,即div下的span，显示为沈亮3
        $(function(){
            $("div span").css("display","block");
        })
        //类匹配元素,即.clsFrame类下的.clsOne类，显示为沈亮2
        $(function(){
            $(".clsFrame .clsOne").css("display","block");
        })
        //匹配所有元素，全部显示
        $(function(){
            $("*").css("display","block");
        })
        //合并匹配元素，这里是使用，隔开，显示两个元素下内容为沈亮1，沈亮3
        $(function(){
            $("#divOne,span").css("display","block");
        })
    
    </script>
  </head>
  
  <body>
    <div class = "clsFrame">
        <div id = "divOne">沈亮1</div>
        <div class = "clsOne">沈亮2</div>
        <span>沈亮3</span>
    </div>
  </body>
</html>

显示的效果：

最近考试没时间整理，尽快完成