카테고리 없음

231201_jquery 기본, 기본 선택자, 탐색 선택자, 객체조작

Seungyeon.Jung 2023. 12. 1. 16:32

제이쿼리는 자바스크립트를 이용해서 만든 라이브러리

자바스크립스로 코딩해도 되지만 조금 더 편리하게 효율적으로 개발하기 위해 패키지화 해서 라이브러리로 만든 것

 

제이쿼리 라이브러리 연동 방식에는 두가지가 있다.

1. 다운로드 방식: 네트워크와 상관없이 개발할 수 있으나, 컴퓨터에 라이브러리 파일을 내려받아야 함.

2. 네트워크 전송 방식: 간단히 연동할 수 있으며, 최신 버전으로 사용할 수 있음.

 

네트워크 전송 방식을 추천하지만, LTS라고 해서 지나치게 최신 버전은 호환성이 맞지 않는다던가 하는 문제가 발생할 수 있음. 그래서 아주 최신버전보다는 안정화가 된 조금 아래 하위버전을 주로 씀. 

 

https://cdnjs.com/libraries/jquery/1.12.4

 

jquery - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

JavaScript library for DOM operations - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make

cdnjs.com

 

컨트롤+S로 js 폴더에 저장

 

아래는 다운로드 방식으로 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일에...

지금까지 배웠던 제이쿼리 등을 이용해서 쇼핑몰 홈페이지 구현을 어떻게 했는지를 기준으로 평가 할 예정.

저작자표시 (새창열림)