jQuery 強大的選取器（三）

js忍之道 js原創

zivhsiao 2012-04-11 08:54:58 ‧ 5316 瀏覽

分享至

jQuery 的selector的補充
jQuery 基本的selector熟練之後，可以做非常多的HTML elements的操控
以下列出在（一）沒有提到，比較進階的用法

子系物件的選取

:nth-child(index) 子系物件第幾個
Index從1開始
:first-child 第一個子系條件的物件
:last-child 最後一個子系條件的物件
:only-child 只有一個子系條件的物件

範例：

<HTML>
	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$('ul li:nth-child(2)').addClass('st1');
					$('ul li:not(:nth-child(2))').addClass('st2');
				});
				$('#btn2').click(function(){
					$('ul li:first-child').addClass('st1');
				});
				$('#btn3').click(function(){
					$('ul li:last-child').addClass('st2');
				});
				$('#btn4').click(function(){
					$('ul li:only-child').addClass('st3');
				});
			})
		</Script>
		<style type="text/css">
			.st1
			{
				background-Color:pink;
			}
			.st2
			{
				background-Color:Yellow;
			}
			.st3
			{
				background-Color:green;
			}
		</style>
	</HEAD>
	<BODY>
		<input type="Button" id="btn1" name="btn1" value="nth-child"><br />
		<input type="Button" id="btn2" name="btn2" value="first-child"><br />
		<input type="Button" id="btn3" name="btn3" value="last-child"><br />
		<input type="Button" id="btn4" name="btn4" value="only-child"><br />
		<hr />
		<ul>
			<li>Yahoo</li>
			<li>Google</li>
			<li>YouTube</li>
		</ul>
		<ul>
			<li>Link1</li>
			<li>Link2</li>
			<li>Link3</li>
		</ul>
		<ul>
			<li>Link1</li>
		</ul>
	</BODY>
</HTML>

表單的選取
:input 泛指所有Form裡面的物件，包括input, textarea, select, button
:text 指input形式是text的物件
:password 指input形式是password
:radio 指input形式是radio
:checkbox 指input形式是checkbox
其他功能image, reset, button, file, hidden類似

範例：

<HTML>
	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$(':input').addClass('st1');
				});
				$('#btn2').click(function(){
					$(':text').addClass('st1');
				});
				$('#btn3').click(function(){
					$(':password').addClass('st1');
				});
				$('#btn5').click(function(){
					$(':checkbox').addClass('st1');
				});
				$('#btn6').click(function(){
					$(':radio').addClass('st1');
				});
				$('#btn7').click(function(){
					$(':image').hide();
				});
			})
		</Script>
		<style type="text/css">
			.st1
			{
				background-Color:pink;
			}
			.st2
			{
				background-Color:Yellow;
			}
			.st3
			{
				background-Color:green;
			}
		</style>
	</HEAD>
	<BODY>
		<FORM action="" method=POST id=form1 name=form1>

			<input type="Button" id="btn1" name="btn1" value="input"><br />
			<input type="Button" id="btn2" name="btn2" value="text"><br />
			<input type="Button" id="btn3" name="btn3" value="Password"><br />
			<input type="Button" id="btn4" name="btn4" value="textarea"><br />
			<input type="Button" id="btn5" name="btn5" value="checkbox"><br />
			<input type="Button" id="btn6" name="btn6" value="radio"><br />
			<input type="Button" id="btn7" name="btn7" value="image"><br />
			<hr />
			text:<input type="text" id="txt1" name="txt1" /><br />
			password:<INPUT type="password" id=password1 name=password1><br />
			checkbox:<INPUT type="checkbox" id=checkbox1 name=checkbox1><br />
			radio:<INPUT type="radio" id=radio1 name=radio1><br />
			<input type="image" id="btnimg" src="topcat.jpg" />
			
		</FORM>
	</BODY>
</HTML>

3. Enabled, disabled, checked, selected
取得enabled/disabled的input
　$(‘input:enabled’)
　$(‘input:disabled’)
鎖定enabled的input改為disabled
　$(‘input:enabled’).attr({disabled:”disabled”});
有checked的checkbox變成disabled
　$(‘input:checked’).attr({disabled:”disabled”});

範例：
[code]

<HTML>
	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$('input:enabled').addClass('d1');
					$('input:disabled').addClass('d2');
				});
				$('#btn2').click(function(){
					$('input:enabled').attr({disabled:"disabled"});
				});
				$('#btn3').click(function(){
					$('input:checked').attr({disabled:"disabled"});
				});
			})
		</Script>
		<Style type="text/css">
			.d1
			{
				background-color:red;
				color:green;
			}
			.d2
			{
				background-color:orange;
				color:blue;
			}
			.d3
			{
				background-color:yellow;
				color:blue;
			}
			.d4
			{
				background-color:green;
				color:red;
			}
		</Style>
	</HEAD>
	<BODY>
		<input type="button" id="btn1" name="btn1" value="依照Enabled/disabled改變顏色"><br>
		<input type="button" id="btn2" name="btn2" value="改變Enabled/Disabled狀態"><br>
		<hr />
		<input type="text" id="txt1" value="" />
		<input type="text" id="txt2" value="" disabled />
		<hr />
		<INPUT type="button" value="鎖住已經勾選的" id=btn3 name=btn3>
		<INPUT type="checkbox" id=checkbox1 name=checkbox1>
		<INPUT type="checkbox" id=checkbox2 name=checkbox2>
		<INPUT type="checkbox" id=checkbox3 name=checkbox3>
		
	</BODY>
</HTML>

[/code]