[jQuery]選取器--有層概念的物件
語法:
- 物件中的物件,用【空白】
- 物件後的第一個物件,用【+】
- 物件後的所有物件,用【~】
直接從範例中來看語法
- Div1中的p
- $('#div1 p')
- Div1後的第一個p
- $('#div1 + p')
- Div1後所有的p
- $('#div1 ~ p')
範例程式:
<HEAD>
<Script Type="text/javascript" src="jQuery.js"></Script>
<Script Type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
$('#div1 p').addClass('d1');
});
$('#btn2').click(function(){
$('#div1 *').removeClass();
$('#div1').addClass('d2');
});
$('#btn3').click(function(){
$('#div1 + p').addClass('d2');
});
$('#btn4').click(function(){
$('#div1 ~ p').addClass('d2');
});
})
</Script>
<Style type="text/css">
.d1
{
background-color:orange;
color:blue;
}
.d2
{
background-color:blue;
color:yellow;
}
</Style>
</HEAD>
<BODY>
<input type="Button" id="btn1" name="btn1" value="改變div1中的p">
<br />
<input type="Button" id="btn2" name="btn2" value="改變整個div1">
<br />
<input type="Button" id="btn3" name="btn3" value="改變div1後第1個p(div1 + p)">
<br />
<input type="Button" id="btn4" name="btn4" value="改變div1後所有p(div1 ~ p)">
<hr />
<div id="div1">
這是div1裡面的內容
<p>這是P裡面的內容</p>
</div>
<p>div1後第1個P</p>
<p>div1後第2個P</p>
<p>div1後第3個P</p>
</BODY>
</HTML>
範例說明:
這個範例
注意各個按鈕
- 物件中的某一種物件(空白)
- 物件中的所有物件(*)
- 之後符合條件的第一個(+)
- 之後符合的所有(~)
以下是簽名:
- 歡迎轉貼本站的文章,不過請在貼文主旨上加上【轉貼】,並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】,感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫,如果您需要C#的Code,也許您可以試著用線上的工具進行轉換,這裡提供幾個參考
Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |