각종 선택자
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> //jQuery 이용하려면 필수!
</head>
<body>
<h1>선택자(Selector)</h1>
<hr>
<h2>jQuery 연습-1</h2>
<h2 class="normal">jQuery 연습-2</h2>
<h2 class="normal">jQuery 연습-3</h2>
<h2>jQuery 연습-4</h2>
<h2>jQuery 연습-5</h2>
<h3 class="normal">jQuery 연습-6</h3>
<h3>jQuery 연습-7</h3>
<hr>
<ul>
<li>선택자(Selector)-1</li>
<li>선택자(Selector)-2</li>
<li>선택자(Selector)-3</li>
<li>선택자(Selector)-4</li>
<li>선택자(Selector)-5</li>
</ul>필터 선택자 : 선택자로 검색된 다수의 태그 중 클래스 선택자로 특정 태그를 검색하여 제공
$(selector).filter(selector) : 선택자로 검색된 다수의 태그에서 특정 태그를 검색하여 jQuery 객체로 반환하는 메소드 > filter() 메소드의 매개변수에는 모든 선택자를 전달하여 태그 검색 가능//$("h2").filter(".normal").css("background","green"); $(".normal").filter("h2").css("background","green"); //결과 같음. .filter는 모든 선택자 검색가능 $("h3").filter(".normal").css("background","silver");$(selector).not(selector) : 선택자로 검색된 다수의 태그에서 특정 태그를 제외한 태그를 검색하여 jQuery 객체로 반환하는 메소드
$("h3").not(".normal").css("background","gold");가상 선택자 : 상태에 의해 태그를 검색하여 제공
:nth-child(X) : X번째에 위치한 태그를 제공하기 위한 가상선택자//$("ul li:nth-child(3)").css("color","red"); //$("ul li").filter(":nth-child(3)").css("color","red"); $("ul").find("li").filter(":nth-child(3)").css("color","red");:eq(Index) : 첨자(Index : 0부터 1씩 증가되는 정수값)위치의 태그를 제공하기 위한 가상선택자
$(selector).eq(Index) : 선택자로 검색된 태그 중 첨자위치의 태그를 검색하여 jQuery 객체로 반환하는 메소드$("ul li").eq(3).css("color","purple"); //$("ul li:nth-child(1)").css("color","green"); //$("ul li:eq(0)").css("color","green"); //$("ul li").eq(0).css("color","green");$(selector).first() : 선택자로 검색된 태그 중 첫번째 태그를 검색하여 jQuery 객체로 반환하는 메소드
$("ul li").first().css("color","green");//$("ul li:nth-child(5)").css("color","blue"); //$("ul li:eq(4)").css("color","blue"); //$("ul li").eq(4).css("color","blue"); //$("ul li:eq(-1)").css("color","blue");//첨자위치를 [-1]로 설정하면 마지막 위치의 태그를 검색하여 제공 //$("ul li").eq(-1).css("color","blue");$(selector).last() : 선택자로 검색된 태그 중 마지막 태그를 검색하여 jQuery 객체로 반환하는 메소드
$("ul li").last().css("color","blue");$(selector).next() : 선택자로 검색된 태그에서 다음 위치의 태그를 검색하여 jQuery 객체로 반환하는 메소드
$("ul li").eq(0).next().css("color","aqua");$(selector).prev() : 선택자로 검색된 태그에서 이전 위치의 태그를 검색하여 jQuery 객체로 반환하는 메소드
$("ul li").eq(-1).prev().css("color","lime");
