JQuery基础之选择器

JQuery选择器从大的角度分为jQuery 基础选择器、jQuery过滤性选择器、jQuery表单选择器。细分的具体看细节

1.jQuery 基础选择器

　　1.1、id选择器

　　格式：$("#my_id")

　　备注：#my_id表示根据id选择器获取页面中指定的标签元素，且返回唯一一个元素。

　　实例：　

<!DOCTYPE html>
<html>
    <head>
        <title>#id选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">div的内容</div>
        <div id="default"></div>
        <script type="text/javascript">
            $("#default").html($("#divtest").html());
        </script>
    </body>
</html>
View Code

　　在浏览器中显示：

div的内容
div的内容
 　　1.2、元素（element）选择器
　　格式：$("element")
　　备注：其中element就是元素的名称，通过元素名找到元素就可以对它进行操作了
　　实例：
<!DOCTYPE html>
<html>
    <head>
        <title>element选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    </head>
    
    <body>
        <button id="btntest">点我</button>
        <script type="text/javascript">
            $("button").attr("disabled","true");
        </script>
    </body>
</html>
View Code

　　在浏览器中显示：

　　

　　1.3、类（class）选择器

　　格式：$(".class")

　　备注：其中.class参数表示元素的CSS类别(类选择器)名称。

　　实例：

<!DOCTYPE html>
<html>
    <head>
        <title>.class选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div class="red">立正，向我这边看齐</div>
        <div class="green">我先歇歇脚</div>
        
        <script type="text/javascript">
            var $redHTML = $(".red").html();
            $(".green").html($redHTML);
        </script>
    </body>
</html>
View Code

　　在浏览器中显示：

　　1.4、* 选择器(取走全部元素)

　　格式：$("*")

　　备注：一个非常“牛”的选择器，“*”号选择器，它的功能是获取页面中的全部元素，“全部”啊!包括<head>、<body>、<script>这些元素，但是一般与其他元素组合使用，来获取其他元素的所有子元素，比如组合格式$("div *")获取当前div下所有子元素，包括孙子辈元素

　　实例：

<!DOCTYPE html>
<html>
    <head>
        <title>*选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    </head>
    
    <body>
        <form action="#">
        <input id="Button1" type="button" value="button" />
        <input id="Text1" type="text" />
        <input id="Radio1" type="radio" />
        <input id="Checkbox1" type="checkbox" />
        </form>
        
        <script type="text/javascript">
            $("form *").attr("disabled", "true");
        </script>
    </body>
</html>
View Code

　　在浏览器中显示：

　　

　　1.5、sele1,sele2,sele多（N）选择器

　　格式：$("sele1,sele2,sele3...selen")

　　备注：其中参数sele1、sele2到seleN为有效选择器，每个选择器之间用“，”号隔开，它们可以是之前提及的各种类型选择器，如$(“#id”)、$(“.class”)、$(“selector”)选择器等。

　　实例：　

<!DOCTYPE html>
<html>
    <head>
        <title>sele1,sele2,seleN选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="red">选我吧！我是red</div>
        <div class="green">选我吧！我是green</div>
        <div class="blue">选我吧！我是blue</div>
        
        <script type="text/javascript">
            $(".red,.green").html("hi,我们的样子很美哦!");
        </script>
    </body>
</html>
View Code

　　在浏览器中显示

　　1.6、ance desc选择器

　　格式：$("ance desc")

　　备注：其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。比如家族姓氏“div”，家族几代人里，都有名字里带“span”的，就可以用这个ance desc选择器把这几个人给定位出来。

　　实例：

<!DOCTYPE html>
<html>
    <head>
        <title>ance desc选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div>码农家族
            <p>
               <label></label>
            </p>
            <label></label>
        </div>
        
        <script type="text/javascript">
            $("div label").css("background-color","blue");
        </script>
    </body>
</html>
View Code

　　在浏览器中显示：

　　1.7、parent > child选择器

　　格式：$("parent > child")

　　备注：与上面介绍的ance desc选择器相比，parent > child选择器的范围要小些，它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈。

　　实例：

 

<!DOCTYPE html>
<html>
    <head>
        <title>parent > child选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div>
            码农家族
            <p>
                <label></label>
            </p>
            <label></label>
            <label></label>
        </div>
        <label></label>
        
        <script type="text/javascript">
            $("div > label").css("border", "solid 5px red");
        </script>
    </body>
</html>
View Code

 

　　在浏览器中显示：

　　1.8、prev + next选择器

　　格式：$("prev + next")

　　备注：通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素；其中参数prev为任何有效的选择器，参数“next”为另外一个有效选择器，它们之间的“+”表示一种上下的层次关系，也就是说，“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。

　　实例：

<!DOCTYPE html>
<html>
    <head>
        <title>prev + next选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div>
            码农家族
            <label></label>
            <p></p>
            <label></label>
            <label></label>
        </div>
        <label></label>
        
        <script type="text/javascript">
            $("p + label").css("background-color","red");
        </script>
    </body>
</html>
View Code

　　在浏览器中显示：

　　1.9、prev ~ siblings选择器

　　格式：$("prev ~ next")

　　备注：与上一节中介绍的prev + next层次选择器相同，prev ~ siblings选择器也是查找prev 元素之后的相邻元素，但前者只获取第一个相邻的元素，而后者则获取prev 元素后面全部相邻的元素；其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素；

　　实例：

<!DOCTYPE html>
<html>
    <head>
        <title>prev ~ siblings选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div>
            码农家族
            <label></label>
            <p></p>
            <label></label>
            <label></label>
        </div>
        <label></label>
        
        <script type="text/javascript">
            $("p ~ label").css("border", "solid 1px red");
            $("p ~ label").html("我们都是p先生的粉丝");
        </script>
    </body>
</html>
View Code

　　在浏览器中显示：

　　

2、jQuery过滤性选择器

待更新

 

posted @ 2016-01-07 10:14  余弦  阅读(308)  评论(0)  编辑  收藏  举报