[jQuery]選取器--屬性篩選_Attribute Filters

[jQuery]屬性篩選_Attribute Filters

語法:用中括號[]來代表屬性的篩選

  • [attribute = value]
  • class是test的td
    • $('td[class="test"]')
  • 超鏈結,網址是y開頭的
    • $('a[href^="y"]')
  • 什麼字串結尾的
    • $(a[href$='.com')])
  • 含有某字串的
    • $('a[href*="y"]')
等於某值=
開頭^=
結尾$=
包含某字串*=

 

範例:

<HTML>
	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					var std=$("td[class='test']");
					alert(std.html());
					std.removeClass();
					std.addClass('myEq');
				});
				$('#btn2').click(function(){
					$('a[href^="t"]').addClass('myEven');
				});
				$('#btn3').click(function(){
					$('a[href$=".com"]').addClass('myEven');
				});
				$('#btn4').click(function(){
					$('a[href*=".com"]').addClass('myEven');
				});
			})
		</Script>
		<style type="text/css">
			.myOdd
			{
				background-Color:pink;
			}
			.myEven
			{
				background-Color:Yellow;
			}
			.myEq
			{
				background-Color:green;
			}
		</style>
	</HEAD>
	<BODY>
		<input type="Button" id="btn1" name="btn1" value="找td的Class=test的"><br />
		<input type="Button" id="btn2" name="btn2" value="找t開頭的連結"><br />
		<input type="Button" id="btn3" name="btn3" value="找.com結尾的連結"><br />
		<input type="Button" id="btn4" name="btn4" value="有.com的連結"><br />
		<hr />
		<table border="1">
			<tr>
				<td>1,1</td>
				<td>2,1</td>
				<td>3,1</td>
				<td>4,1</td>
				<td>5,1</td>
			</tr>
			<tr>
				<td>1,2</td>
				<td class="test">2,2</td>
				<td>3,2</td>
				<td>4,2</td>
				<td>5,2</td>
			</tr>
			<tr>
				<td>1,3</td>
				<td>2,3</td>
				<td>3,3</td>
				<td>4,3</td>
				<td>5,3</td>
			</tr>
			<tr>
				<td>1,4</td>
				<td>2,4</td>
				<td>3,4</td>
				<td>4,4</td>
				<td>5,4</td>
			</tr>
		</table>
		<a href="tw.yahoo.com" target="_blank">tw.yahoo.com</a><br />
		<a href="panasonic.com.tw" target="_blank">panasonic.com.tw</a><br />
		<a href="www.google.com" target="_blank">www.google.com</a><br />
	</BODY>
</HTML>

 


以下是簽名:


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