티스토리 뷰

🌈 JavaScript

Jquery 선택자

James Wetzel 2023. 10. 6. 16:40
728x90
반응형
<!DOCTYPE html>
<html>
<head>
	<title>jQuery Selector Example</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		$(document).ready(function(){
			// 요소 선택자(Element Selector)
			$("p").css("color", "red");

			// 클래스 선택자(Class Selector)
			$(".example").css("background-color", "yellow");

			// ID 선택자(ID Selector)
			$("#example").css("font-weight", "bold");

			// 속성 선택자(Attribute Selector)
			$("input[type='text']").val("Hello World!");

			// 자식 선택자(Child Selector)
			$("div > p").css("font-size", "20px");

			// 후속 형제 선택자(Next Adjacent Selector)
			$("h1 + p").css("text-decoration", "underline");

			// 형제 선택자(Sibling Selector)
			$("h1 ~ p").css("font-style", "italic");
		});
	</script>
</head>
<body>
	<div>
		<p>Paragraph 1</p>
		<p class="example">Paragraph 2</p>
		<p>Paragraph 3</p>
	</div>
	<h1 id="example">Heading 1</h1>
	<p>Paragraph 4</p>
	<input type="text" value="">
	<p>Paragraph 5</p>
</body>
</html>

 

 

jQuery Element Selectors(요소 선택자)
$("p") selects all <p> elements.
 
$("p.intro") selects all <p> elements with class="intro".
 
$("p#demo") selects all <p> elements with id="demo".

jQuery Atrribute Selectors(속성 선택자)
$("[href]") select all elements with an href attribute.
 
$("[href='#']") select all elements with an href value equal to "#".
 
$("[href!='#']") select all elements with an href attribute NOT equal to "#".
 
$("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".
 
jQuery Css Selectors(css 선택자)
$("p").css("background-color","yellow");


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selectors Sample 1</title>
    <script src="../Script/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("[name=cssAdd]").click(function () {
                $("p").css("background-color", "silver");
            });
            $("[name=cssDelete]").click(function () {
                $("p").css("background-color", "");
            });
        });
    </script>
</head>
<body>
    <p>Background Color를 jQury가 컨트롤 한다.</p>
    <button name="cssAdd">backgroud color 생성</button>
    <button name="cssDelete">backgroud color 제거</button>
</body>
</html>
 
 

Syntax Description
$(this) Current HTML element
$("p") All <p> elements
$("p.intro") All <p> elements with class="intro"
$("p#intro") All <p> elements with id="intro"
$("p#intro:first") The first <p> element with id="intro"
$(".intro") All elements with class="intro"
$("#intro") The first element with id="intro"
$("ul li:first") The first <li> element of each <ul>
$("[href$='.jpg']") All elements with an href attribute that ends with ".jpg"
$("div#intro .head") All elements with class="head" inside a <div> element with id="intro"

출처: https://jangjeonghun.tistory.com/477 [정훈이의 프로그래밍 이야기:티스토리]

728x90
반응형
저작자표시