JQuery裡的子元素過濾選擇器,加空格與不加空格的區別
阿新 • • 發佈:2018-12-25
最近學習jquery,發現它的選擇器的寫法與css的基本語法很像,加不加空格差別很大。
$(“:first-child)——:first只是返回單個元素,而first-child選擇符將為每個父元素匹配第一個子元素。
例如子元素過濾選擇器
li:first-child(不加空格),這裡的父元素指的是li標籤的父元素;
li :first-child(加空格),這時候因為變成了ance desc層次選擇器(跟父子選擇器類似,只是比其作用域大),所以其父元素指的就是li標籤了,但因為li元素沒有子元素了,所以這樣的表達不對。換成ol則可以。
$(“li:first-child),獲取了兩個 ul父元素中的第一個li元素,並使用css()方法修改了它們在頁面中顯示的文字顏色。
<!DOCTYPE html>
<html>
<head>
<title>:first-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>
<h3>改變每個"蔬菜水果"中第一行的背景色</h3>
<ol>
<li>芹菜</li>
<li>茄子</li>
<li>蘿蔔</li>
<li>大白菜</li>
<li>西紅柿</li>
</ol>
<ol>
<li >橘子</li>
<li>香蕉</li>
<li>葡萄</li>
<li>蘋果</li>
<li>西瓜</li>
</ol>
<script type="text/javascript">
$("ol :first-child").css("background-color", "green");
//或用$("li:first-child").css("background-color", "green");
</script>
</body>
</html>
$(“ol :first-child”):中間有空格,ol是父元素,表示ol下的第一個子元素的集合;
$(“li:first-child”):沒有空格,表示li是子元素,父元素是li的父元素,選擇的是以li為第一個子元素的父元素(的第一個子元素)。有點拗口,總之不加空格,意思是li必須是所在父元素的第一個子元素。
例如:
<!DOCTYPE html>
<html>
<head>
<title>:first-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>
<h3>h3是該div中第一個元素</h3>
<h3>1234</h3>
</div>
<div>
<h2>h2是該div中第一個元素</h3>
<h3>1234</h3>
<h3>1234</h3>
</div>
<script type="text/javascript">
// $("ol :first-child").css("background-color", "green");
$("h3:first-child").css("background-color", "green");
</script>
</body>
</html>
如下:第二個div的h2就沒有變綠,因為他不是div的first-child
附上css的選擇器:
1.id選擇器( # myid)
2.類選擇器(.myclassname)
3.標籤選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li)
6.後代選擇器(li a)
7.萬用字元選擇器( * )
8.屬性選擇器(a[rel = "external"])
9.偽類選擇器(a: hover, li:nth-child)
優先順序為:
!important > id > class > tag
important 比 內聯優先順序高,但內聯比 id 要高