jQuery7(多條件選擇器,層次選擇器)
阿新 • • 發佈：2018-12-26
多條件選擇器
關鍵點:當使用$('') ,引號內的內容可以寫多個.
例項:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript" 層次選擇器
空格
語法:$('div p').div層中所有的p標籤
大於號>
語法:$('div>p') div層中直接的p元素,不含巢狀
加號+
語法:$('div+p') div層後面的第一個子元素,必須是p標籤,直接的p標籤.不往後順延
波浪線~
語法:$('div~p') div層後面的直接p標籤
例項:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//第一種,直接加空格. div層中所有的p標籤改變
//$('div p').css('backgroundColor', 'red');
//直接的子元素中,不包含巢狀什麼的
$('div>p').css('backgroundColor', 'red');
//層後面第一個子元素,必須是p標籤,必須是直接的p標籤
// $('div+p').css('backgroundColor', 'red');
//層後面所有的直接p標籤
// $('div~p').css('backgroundColor', 'red');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="顯示效果" id='btn' />
<p>
外面p第一個
</p>
<p>
外面第二個
</p>
<div style='width: 300px; height: 200px; background-color: Gray;'>
<p>
裡面第一個
</p>
<p>
裡面第二個
</p>
<strong>
<p>
strong中的p標籤</p>
</strong>
<p>
裡面第三個
</p>
<p>
裡面第四個
</p>
</div>
<strong>
<p>
後面第一個
</p>
</strong>
<p>
後面第一個
</p>
<p>
後面第二個
</p>
</body>
</html>