-
231201_jquery 기본, 기본 선택자, 탐색 선택자, 객체조작카테고리 없음 2023. 12. 1. 16:32
제이쿼리는 자바스크립트를 이용해서 만든 라이브러리
자바스크립스로 코딩해도 되지만 조금 더 편리하게 효율적으로 개발하기 위해 패키지화 해서 라이브러리로 만든 것
제이쿼리 라이브러리 연동 방식에는 두가지가 있다.
1. 다운로드 방식: 네트워크와 상관없이 개발할 수 있으나, 컴퓨터에 라이브러리 파일을 내려받아야 함.
2. 네트워크 전송 방식: 간단히 연동할 수 있으며, 최신 버전으로 사용할 수 있음.
네트워크 전송 방식을 추천하지만, LTS라고 해서 지나치게 최신 버전은 호환성이 맞지 않는다던가 하는 문제가 발생할 수 있음. 그래서 아주 최신버전보다는 안정화가 된 조금 아래 하위버전을 주로 씀.
https://cdnjs.com/libraries/jquery/1.12.4
아래는 다운로드 방식으로 Jquery를 연결한 것이다. 만약 네트워크 전송 방식으로 연동하고자 한다면 도메인 주소를 작성한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/jquery.js"></script> <!-- <script src="./js/jquery.min.js"></script> --> <script> $(function(){ $("#title").css("color","red"); $(".home").css("color","green"); $("#budy").css("color","gray"); $("h1.home").css("background-color","#0ff") .css("border","2px dashed #f00"); $("h2").next().css("color","blue"); //동생요소 선택자 next(), h2 의 동생요소인 p 글자색 변경 $("h2").parent().css("border","3px solid #F00")//부모요소 선택자 parent(), div id="inner_wrap" 선택해서 border감싸기 }); </script> </head> <body> <h1 id="title">제목</h1> <h1 class="home">집!!집!!집!!!</h1> <h1 id="budy">까치엉덩이동글동을엉덩이빙글뱅글</h1> <div id="inner_wrap"> <h1>제목</h1> <h2>내용</h2> <p>내용</p> <p>갤워치얼른주세요</p> </div> </body> </html>
선택자에는 기본(직접, 인접 관계) 선택자가 있다.
직접 선택자는 전체(*), 아이디(#), 요소명, 그룹(,), 클래스(.) 를 직접 선택하는 선택자로 대부분 CSS와 비슷하게 사용한다.
구분 종류 사용법 설명 직접 선택자 전체 선택자 $("*") 모든 요소를 선택함 아이디 선택자 $("#아이디명") id속성에 지정한 값을 가진 요소를 선택함 클래스 선택자 $(".클래스명") class속성에 지정한 값을 가진 요소를 선택함 요소 선택자 $("요소명") 지정한 요소명과 일치하는 요소만 선택함 그룹 선택자 $("선택1, 선택2, 선택n...") 선택1, 선택2, 선택n... 에 지정된 요소만 선택함 종속 선택자 $("p.txt_1") or
$("p#txt_!")<p> 요소 중 class값이 txt_!인 요소 or
<p>요소 중 ID값이 txt_!인 요소만 선택함인접관계 선택자는 직접 선택자로 요소를 선택하고 그 다음 선택한 요소와 가까이에 있는 요소를 선택할 때 사용한다.
구분 종류 사용법 설명 인접관계 선택자 부모 요소 선택자 $("요소 선택").parent() 선택한 요소의 부모 요소 선택 상위 요소 선택자 $("요소 선택").parents() 선택한 요소의 상위 요소를 모두 선택 가장 가까운 상위 요소 선택자 $("요소 선택").closest("div") 선택한 요소의 상위 요소 중 가장 가까운
div 선택하위 요소 선택자 $("요소 선택 하위 요소") 선택한 요소에 지정한 하위 요소 선택 자식 요소 선택자 $("요소 선택>자식 요소") 선택한 요소를 기준으로 자식관계에
지정한 요소를 선택자식 요소들 선택자 $("요소 선택").children() 선택한 요소의 모든 자식 요소 선택 이전 요소 선택자 $("요소 선택").prev() 선택한 요소의 이전 요소 선택 이전 요소들 선택자 $("요소 선택").prevAll 선택한 요소의 이전 요소 모두를 선택 지정 이전 요소들 선택자 $("요소 선택").prevUntil("요소명") 선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택 다음 요소 선택자 $("요소 선택").next()
$("요소 선택+다음 요소")선택한 요소의 다음 요소를 선택 다음 요소들 선택자 $("요소 선택").nextAll() 선택한 요소의 다음 요소 모두를 선택 지정 다음 요소들 선택자 $("요소 선택").nextUntil("") 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택 전체 형제 요소 선택자 $("box_1").siblings() class값이 box_1인 요소의형제 요소 전체를
선택탐색 선택자란. 기본 선택자로 선택한 요소 중 원하는 요소를 한번 더 탐색해서 더 정확하게 선택하는 것.
위치 탐색 선택자란, 기본 선택자로 선택한 요소는 배열에 담기는데 이 때 배열의 인덱스를 사용해 특정 요소를 좀 더 정확하게 선택하는 것이다.
제이쿼리 배열 관련 메서드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/jquery.js"></script> <script> $(function(){ var obj = [ {"area1":"서울"}, {"area2":"부산"}, {"area3":"전주"} ]; $(obj).each(function(i, o){ console.log(i + ":", o); }); console.log("==== The End 1 ===="); $.each($("#menu2 li"), function(i, o){ console.log(i + ":", o); }); console.log("==== The End 2 ===="); $.each($("#menu2 li"), function(i){ console.log(i + ":", $(this)); }); }); </script> </head> <body> <h1>탐색 선택자</h1> <ul id="menu1"> <li>내용1-1</li> <li>내용1-2</li> <li>내용1-3</li> </ul> <ul id="menu2"> <li>내용2-1</li> <li>내용2-2</li> <li>내용2-3</li> </ul> </body> </html>
속상 탐색 선택자란, 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 것.
속성과 값에 따른 탐색 선택자
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/jquery.js"></script> <script> $(function(){ $("#wrap a[target]").css({"color":"#F00"}) $("#wrap a[href^=https]").css({"color":"#0F0"}) $("#wrap a[href$=net]").css({"color":"#00f"}) $("#wrap a[href*=google]").css({"color":"#000"}) $("#member_f :text").css({"background-color":"#f00"}) $("#member_f :password").css({"background-color":"#00f"}) }) </script> </head> <body> <div id="wrap"> <p><a href="http://easyspub.co.kr" target="_blank">EasysPub</a></p> <p><a href="https://naver.com">Naver</a></p> <p><a href="http://daum.net">Google</a></p> <p><a href="http://google.co.kr">Daum</a></p> </div> <form action="#" method="get" id="member_f"> <p> <label for="user_id">아이디</label> <input type="text" name="user_id" id="user_id"> </p> <p> <label for="user_pw">비밀번호</label> <input type="password" name="user_pw" id="user_pw"> </p> </form> </body> </html>
속성 상태에 따른 탐색 선택자
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/jquery.js"></script> <script> $(function(){ $("#wrap p:hidden").css({"display":"block", "background":"#ff0"}); var z1 = $("#zone1 :selected").val(); console.log(z1); var z2 = $("#zone2 :checked").val(); console.log(z2); var z3 = $("#zone3 :checked").val(); console.log(z3); }); </script> </head> <body> <div id="wrap"> <p>내용1</p> <p style="display: none">내용2</p> <p>내용3</p> </div> <form accept="#"> <p id="zone1"> <select name="course" id="course"> <option value="opt1">옵션1</option> <option value="opt2" selected>옵션2</option> <option value="opt3">옵션3</option> </select> </p> <p id="zone2"> <input type="checkbox" name="hobby1" value="독서">독서 <input type="checkbox" name="hobby2" value="자전거">자전거 <input type="checkbox" name="hobby3" value="등산" checked>등산 </p> <p id="zone3"> <input type="radio" name="gender" value="male">남성 <input type="radio" name="gender" value="female" checked>여성 </p> </form> </body> </html>
그 외에 선택자-콘텐츠 탐색 선택자
find()/filter()탐색 선택자
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/jquery.js"></script> <script> $(function(){ $("#inner_1").find(".txt1").css({"background-color":"#FF0"}); $("#inner_1 p").filter(".txt2").css({"background-color":"#0FF"}) $("#inner_2 p").filter(function(idx, obj){ console.log(idx); return idx % 2 == 0; }) .css({"background-color":"#0f0"}) }) </script> </head> <body> <div id="outer_wrap"> <h1>콘텐츠 탐색 선택자</h1> <section id="inner_1"> <h2>find(), filter()</h2> <p class="txt1">내용1</p> <p class="txt2">내용2</p> </section> <section id="inner_2"> <h2>filter(function)</h2> <p>index 0</p> <p>index 1</p> <p>index 2</p> <p>index 3</p> </section> </div> </body> </html>
객체조작메서드는 속성조작 메서드, 수치조작 메서드, 객체편집 메서드로 나뉜다.
속성조작 메서드는 요소의 속성을 바꿀 때 사용하고, 수치조작 메서드는 요소의 너비나 높이같은 수치를 바꿀 때 쓰며, 두 메서드는 성격이 비슷하다. 객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할때 사용한다.
속성조작 메서드 Html 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/jquery.js"></script> <script> $(function(){ var result_1 = $("#sec_1").html(); console.log(result_1); $("#sec_1 p").html("<a href=\"#\">Text1</a>"); var result_2 = $("#sec_2").text(); console.log(result_2); $("#sec_2 h2").text("text()"); }); </script> </head> <body> <h1><strong>객체 조작 및 생성</strong></h1> <section id="sec_1"> <h2><em>html()</em></h2> <p>내용1</p> </section> <section id="sec_2"> <h2><em>텍스트()</em></h2> <p>내용2</p> </section> </body> </html>
id값이 sec_1인 요소의 하위 요소 (Htnl(), 내용1) 를 문자열로 가져와 result_1 에 저장.
var result_1 = $("#sec_1").html();console.log(result_1);id 값이 sec_1 인 요소의 하위요소 중 <p> 요소의 하위 요소를 새 요소로 바꿈. (위 코드 파일에는 p 에 내용1이 적혀있으나, 아래 제이쿼리 코드로 인해 Text1로 바뀜.)
$("#sec_1 p").html("<a href=\"#\">Text1</a>");id값이 sec_2인 요소의 하위 요소를 문자열로 가져와 result_2에 저장
var result_2 = $("#sec_2").text();console.log(result_2);id값이 sec_2인 요소의 하위요소 중 h2 요소의 하위 요소를 새 요소로 바꿈. ( 위 코드 파일에는 h2 에 텍스트()가 적혀있었으나, 제이쿼리 코드로 인해 text()로 바뀜.)
$("#sec_2 h2").text("text()");
평가는 23.12.04일에...
지금까지 배웠던 제이쿼리 등을 이용해서 쇼핑몰 홈페이지 구현을 어떻게 했는지를 기준으로 평가 할 예정.