Jquery选择器易混淆处(1)
- 作者: 智缺法师
- 来源: 51数据库
- 2021-08-29
<!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://www.51sjk.com/Upload/Articles/1/0/269/269546_20210708030355743.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"的元素。
推荐阅读
