🐧선택자(Selector)-1
📌태그 선택자 : 태그명으로 태그를 검색 - 검색된 태그로 jQuery 객체를 생성한 후 메소드 호출
→ 검색된 태그로 jQuery 객체를 생성한 후 메소드 호출
→ 다수의 태그가 검색된 경우 묵시적 반복에 의해 다수의 jQuery 객체가 생성되어 메소드 호출$("h2").css("background","yellow");
📌클래스 선택자 : 태그의 class 속성값으로 태그를 검색하여 제공
→ 태그 선택자와 구분하기 위해 . 으로 시작
$(".item").css("background","orange");
📌아이디 선택자 : 태그의 id 속성값으로 태그를 검색하여 제공
→ 태그 선택자와 구분하기 위해 # 으로 시작
$("#tag").css("color","green");
🌠하나의 jQuery 객체로 서로 다른 메소드를 순차적으로 호출 가능 - 메소드 체인(Method Chain)
$("p").css("background","pink").text("태그내용변경");
🌠jQuery 객체로 메소드를 호출할 때 매개변수의 전달값을 Object 객체로 전달 가능
→ Object 객체의 요소를 이용하여 메소드에 필요한 다수의 값들을 전달
//$("p").css("font-size","30px").CSS("color","red"); $("p").css({"font-size":"30px","color":"red"});
📃02_selector1.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> </head> <body> <h1>선택자(Selector)</h1> <hr> <h2 class="item">jQuery Selector-1</h2> <h2 id="tag">jQuery Selector-2</h2> <h2 class="item">jQuery Selector-3</h2> <p>jQuery Selector-4</p> <script type="text/javascript"> //태그 선택자 : 태그명으로 태그를 검색 - 검색된 태그로 jQuery 객체를 생성한 후 메소드 호출 //→ 검색된 태그로 jQuery 객체를 생성한 후 메소드 호출 //→ 다수의 태그가 검색된 경우 묵시적 반복에 의해 다수의 jQuery 객체가 생성되어 메소드 호출 $("h2").css("background","yellow"); // //클래스 선택자 : 태그의 class 속성값으로 태그를 검색하여 제공 //→ 태그 선택자와 구분하기 위해 . 으로 시작 $(".item").css("background","orange"); // //아이디 선택자 : 태그의 id 속성값으로 태그를 검색하여 제공 //→ 태그 선택자와 구분하기 위해 # 으로 시작 $("#tag").css("color","green"); // //하나의 jQuery 객체로 서로 다른 메소드를 순차적으로 호출 가능 - 메소드 체인(Method Chain) $("p").css("background","pink").text("태그내용변경"); // //jQuery 객체로 메소드를 호출할 때 매개변수의 전달값을 Object 객체로 전달 가능 //→ Object 객체의 요소를 이용하여 메소드에 필요한 다수의 값들을 전달 //$("p").css("font-size","30px").CSS("color","red"); $("p").css({"font-size":"30px","color":"red"}); </script> </body> </html>
🐧선택자(Selector)-2
📌자식 선택자 : 부모태그의 첫번째 깊이의 자식태그를 검색하여 제공
$("#subject > p").css({"font-size":"25px","font-weight":"bold"});↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑같은 결과값↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
🌠$("#subject").children([selector]) : 선택자로 검색된 부모태그에서 첫번째 깊이의 자식태그를 검색하여 jQuery 객체를 반환하는 메소드
→ children() 메소드의 매개변수에 선택자를 전달하지 않은 경우 모든 자식태그 검색하여 반환
$("#subject").children("p").css({"font-size":"25px","font-weight":"bold"});
📌후손 선택자 : 검색된 부모태그에서 모든 깊이의 후손태그를 검색하여 제공
$("#subject p").css("color","green");↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑같은 결과값↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
🌠$("#subject").find([selector]) : 선택자로 검색된 부모태그에서 모든 깊이의 후손태그를 검색하여 jQuery 객체를 반환하는 메소드
$("#subject").find("p").css("color","green");
📃03_selector2.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> </head> <body> <h1>선택자(Selector)</h1> <hr> <div id="subject"> <p>Java 과정</p> <div> <p>Java 기본문법</p> <p>Java OOP</p> <p>Java API</p> </div> <p>JSP 과정</p> <div> <p>스크립트 요소(Script Element)</p> <p>지시어(Directive)</p> <p>표준 액션 태그(Standard Action Tag)</p> </div> </div> <script type="text/javascript"> //자식 선택자 : 부모태그의 첫번째 깊이의 자식태그를 검색하여 제공 //$("#subject > p").css({"font-size":"25px","font-weight":"bold"}); // //↑랑 같은 결과 //$("#subject").children([selector]) : 선택자로 검색된 부모태그에서 첫번째 깊이의 자식태그를 검색하여 jQuery 객체를 반환하는 메소드 //→ children() 메소드의 매개변수에 선택자를 전달하지 않은 경우 모든 자식태그 검색하여 반환 $("#subject").children("p").css({"font-size":"25px","font-weight":"bold"}); // //후손 선택자 : 검색된 부모태그에서 모든 깊이의 후손태그를 검색하여 제공 //$("#subject p").css("color","green"); // //↑랑 같은 결과 //$("#subject").find([selector]) : 선택자로 검색된 부모태그에서 모든 깊이의 후손태그를 검색하여 jQuery 객체를 반환하는 메소드 $("#subject").find("p").css("color","green"); </script> </body> </html>
🐧선택자(Selector)-3
📌필터 선택자 : 선택자로 검색된 태그 중 클래스 선택자로 특정 태그를 검색하여 제공
$("h2.normal").css("background","green");
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑같은 결과값↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓🌠$(selector).filter(selector) : 선택자로 검색된 다수의 태그에서 특정 태그를 검색하여 jQuery 객체로 반환하는 메소드
→ filter() 메소드의 매개변수에는 모든 선택자를 전달하여 태그 검색 가능
//$("h2").filter(".normal").css("background","green"); $(".normal").filter("h2").css("background","green");
🌠$(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");
🌠:eq(Index) : 첨자(Index : 0부터 1씩 증가되는 정수값)위치의 태그를 제공하기 위한 가상선택자
//$("ul li:eq(2)").css("color","purple"); //$("ul li").filter(":eq(2)").css("color","purple");↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑같은 결과값↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
🌠$(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");
📃04_selector3.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> </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> <script type="text/javascript"> $("h2").css("background","yellow"); // //필터 선택자 : 선택자로 검색된 태그 중 클래스 선택자로 특정 태그를 검색하여 제공 //$("h2.normal").css("background","green"); // //↑랑 같은 결과 //$(selector).filter(selector) : 선택자로 검색된 다수의 태그에서 특정 태그를 검색하여 jQuery 객체로 반환하는 메소드 //→ filter() 메소드의 매개변수에는 모든 선택자를 전달하여 태그 검색 가능 //$("h2").filter(".normal").css("background","green"); $(".normal").filter("h2").css("background","green");//↑랑 같은 결과 //============================================================================== $("h3").filter(".normal").css("background","silver"); //$(selector).not(selector) : 선택자로 검색된 다수의 태그에서 특정 태그를 제외시키고 검색하여 jQuery 객체로 반환하는 메소드 $("h3").not(".normal").css("background","gold"); //============================================================================== $("ul li").css("color","orange"); //가상 선택자 : 상태에 의해 태그를 검색하여 제공 //:nth-child(X) : X번째 위치한 태그를 제공하기 위한 가상선택자 //$("ul li:nth-child(3)").css("color","red"); $("ul li").filter(":nth-child(3)").css("color","red");//↑랑 같은 결과 //============================================================================== //:eq(Index) : 첨자(Index : 0부터 1씩 증가되는 정수값)위치의 태그를 제공하기 위한 가상선택자 //$("ul li:eq(2)").css("color","purple"); //$("ul li").filter(":eq(2)").css("color","purple");//↑랑 같은 결과 // //$(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"); </script> </body> </html>
🐧선택자(Selector)-4
📌속성 선택자 : 태그의 속성 또는 속성값 비교하여 태그를 검색하여 제공
$("input[type]").css("border","2px solid green"); $("input[type='password']").css("color","red"); $("input[name='email']").css("color","blue");
📃05_selector4.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> </head> <body> <h1>선택자(Selector)</h1> <hr> <table> <tr> <td>아이디</td> <td><input type="text" name="id"></td> </tr> <tr> <td>비밀번호</td> <td><input type="password" name="passwd"></td> </tr> <tr> <td>이름</td> <td><input type="text" name="name"></td> </tr> <tr> <td>이메일</td> <td><input type="text" name="email"></td> </tr> </table> <script type="text/javascript"> //속성 선택자 : 태그의 속성 또는 속성값 비교하여 태그를 검색하여 제공 $("input[type]").css("border","2px solid green"); $("input[type='password']").css("color","red"); $("input[name='email']").css("color","blue"); </script> </body> </html>
