Jquery选择器易混淆处(1) 

<!DOCTYPE html>  
<html>  
<head>  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>zran's test </title>  
    <style type="text/css">  
        html{height:100%}  
        body{height:100%;margin:0px;padding:0px}  
        #container{height:100%}  
    </style>  
</head>  
<body>
    <div id="container" class="a b">
        <span class="c">test</span>
    </div>
</body> 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    alert($("div .c").html());        //test
    alert($("div span").html());      //test
    alert($("div .a").html());        //undefined
    alert($("div.a").html());         //<span class="c">test</span>
    
    alert($(".a.b").html());          //<span class="c">test</span>
    alert($(".a b").html());          //undefined
    alert($(".a .b").html());         //undefined
    
    alert($(".a.c").html());          //undefined
    alert($(".a .c").html());         //test
</script>
</html>

小结：之前对jquery的选择器均不甚熟悉，今天多次试验之后，困惑的地方有一些解答。

　　引号中“空格”隔开表示选择前一元素内部元素，没有空格隔开表示所有内容用于选择同一（类）元素。

　　例如：$(".a.b")为选择class="a b"的元素，

　　　　　$(".a .b")为选择class="a"元素内class="b"的元素。

posted @ 2018-03-08 16:37  天生神经  阅读(174)  评论(0)  编辑  收藏  举报