[jQuery]選取器--有層概念的物件

[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>

範例說明:

這個範例

注意各個按鈕

  • 物件中的某一種物件(空白)
  • 物件中的所有物件(*)
  • 之後符合條件的第一個(+)
  • 之後符合的所有(~)

以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat