JQuery基础选择器

element（标签、元素）选择器：$("div")

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>element选择器</title>
 5         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
 6     </head>
 7     
 8     <body>
 9         <button id="btntest">点我</button>
10         <script type="text/javascript">
11             $("button").attr("disabled","true");
12         </script>
13     </body>
14 </html>

 


id选择器：$("#id")

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>#id选择器</title>
 5         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
 6     </head>
 7     
 8     <body>
 9         <div id="divtest">div的内容</div>
10         <div id="default"></div>
11         <script type="text/javascript">
12             $("#default").html($("#divtest").html());
13         </script>
14     </body>
15 </html>

 


类选择器：$(".class")

<!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>

 


*选择器：$("*")

<!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>

 


sele1、sele2、seleN选择器：$(".div,#span1,p")

<!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>

 


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>

 


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>

 


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>

 


prev~siblings：$("首标签~相邻标签")

<!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>

 

posted @ 2015-07-15 12:52  嘆世殘者——華帥  阅读(163)  评论(0)  编辑  收藏  举报