【jQuery/Selector

by

1. 설명

jQuery(“(attributeFilter1)(attributeFilter2)(attributeFilterN)”) : 입력한 속성과 일치하는 항목을 찾습니다.

두 번째 예

#1 버튼을 클릭하여 name=”first” 및 title 속성을 가진 요소를 찾고 배경색을 변경합니다. 버튼을 클릭할 때마다 스타일이 변경됩니다.




(1q74.tistory.com) javascript/jquery/selector/multiple-attribute

(HTML 소스 코드)
(//HTML 소스 코드)

3.코드

더보기

<!-- ---------------------------------------------------------
  --
  -- Author: 1q74.tistory.com
  --
  --------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>(1q74.tistory.com) javascript/jquery/selector/multiple-attribute</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>

	<div name="_1q74-example-root">
		<div name="_1q74-example-1">
			<table border="1">
				<tr name="first" title="First Row">
					<td>child#1-1</td>
					<td>child#1-2</td>
				</tr>

				<tr name="second" title="Second Row">
					<td>child#2-1</td>
					<td>child#2-2</td>
				</tr>
				<tr name="third" title="Third Row">
					<td>child#3-1</td>
					<td>child#3-2</td>
				</tr>
			</table>
		</div>

		<div name="_1q74-example-bottom">
			<br/>
			<button name="btn-find">#1. $("(name="_1q74-example-1") (name="first")(title)")</button>
		</div>
	</div>

	<hr/>
	<h5>(HTML Code)</h5>
	<div name="_1q74-source">
	</div>
	<h5>(//HTML Code)</h5>

<script>
var buttonContainer = $("(name="_1q74-example-bottom")");
var btnFind = buttonContainer.find("(name="btn-find")");
var elements = $("(name="_1q74-example-1") (name="first")(title)");

btnFind.click(function() {
	if(!elements.is("(style)")) {
		elements.css("background", "#691797");
	} else {
		elements.removeAttr("style");
	}
});

// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("(name="_1q74-source")");
var exampleHtml = $("(name="_1q74-example-root")").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");

textSource.html(specialCharLines.join("<br/>").replaceAll("\t", "&nbsp;&nbsp;"));
</script>
<style>
(name="_1q74-example-root") {
	min-height: 170px;
}

(name="_1q74-example-1") {
	min-height: 140px;
}

(name="_1q74-example-root") (type="image"){
	width: 100px;
}

(name="_1q74-example-1") td {
	min-width: 100px;
	min-height: 30px;
}

(name|="_1q74-example") button
,(name="_1q74-source") button {
	background: lightgray;
	border: 5px outset;
	min-height: 30px;
}

(name|="_1q74-example") button:active
,(name="_1q74-source") button:active {
	border: 2px inset;
	min-height: 30px;
}
</style>

</body>
</html>

4.파일

(Javascript)(jquery)(선택기)multiple-attribute.html
0.00MB


5. 참조

https://api.jquery.com/multiple-attribute-selector/