본문 바로가기
프로그래밍 공부/JS

[lesson] JS - 제이쿼리 (jQuery)

by Luna_lua 2023. 1. 10.
반응형

요소들을 선택하는 강력한 방법을 사용하고 선택된 요소들을 효율적으로 제어할 수 있는 자바스크립트 라이브러리 사용하기 전 jQuery를 선언하고 사용해야한다.

// 선언 방법
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>을 스크립트 넣는위치에 넣어준다.

 

<jQuery 기본 문법>

선택자 문법
아이디 선택자 $("#아이디명")
태그 선택자 $("태그명")
클래스 선택자 $(".클래스명")
속성 선택자 $("태그명[속성명=속성값]")

<값 가져오기>

$("선택자").val() : form 요소의 값을 받아오는데 쓰인다. (주로 input, textarea 등등) (쉽게 말해 태그의 value속성 값)

$("선택자").text() : 나머지 대부분의 값을 받아오는데 쓰인다. (쉽게 말해 태그 사이에 들어있는 값)

 

<컨텐츠 변경>

$("선택자").text("새로운 값");

 

<반복문>

each 사용 forEach 사용
$.each(iterator, function(index, item){

});		 iterator.forEach(function(element)){
element.프로퍼티
}
예시 예시
$.each(태그명, function(index, item){
    console.log(item);
});		 배열.forEach(function(element)){
element.프로퍼티
}		 
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 표준 실습</title>
<style>
@import
	url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

body {
	font-family: 'Nanum Pen Script', cursive;
	text-align: center;
}

table {
	margin: 0 auto;
	text-align: center;
	width: 30%;
	font-family:;
	border: 1px solid;
}

th, td {
	border: 1px solid;
}

thead {
	background: lime;
}

fieldset {
	margin: 0 auto;
	text-align: center;
	width: 30%;
}
</style>
</head>
<body>
<h1>요금표</h1>
	<table>
		<caption></caption>
		<thead>
			<tr>
				<th>구분</th>
				<th>요금</th>
			</tr>
		</thead>
		<tr>
			<td>아동</td>
			<td>무료</td>
		</tr>
		<tr>
			<td>청소년</td>
			<td>2000</td>
		</tr>
		<tr>
			<td>성인</td>
			<td>5000</td>
		</tr>
	</table>
	<fieldset>
		<legend>구분</legend>
		<input type="text" onkeypress="if(event.keyCode==13){btn();}">
		<button onclick="btn()">확인</button>
	</fieldset>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
	var elements = document.querySelector("input");
	var trElements = document.querySelectorAll("tr");
	var arText = ["아동","청소년","성인"];
	var arChangeText = ["★아동","★청소년","★성인"];
	
	function btn() {
		
		for(let i = 0 ; i<3; i++){
			trElements.item(parseInt(i+1)).style.background = "white";
			trElements.item(parseInt(i+1)).children.item(0).innerHTML= arText[parseInt(i)];
		}
		
		switch (elements.value) {
		case "아동":
			elements.value="";
			trItem1.style.background = "red";
			trItem1.children.item(0).innerHTML = arChangeText[0];
			break;
			
		case "청소년":
			trItem2.style.background = "red";
			trItem2.children.item(0).innerHTML =  arChangeText[1]
			break;
		
		case "성인":
			trItem3.style.background = "red";
			trItem3.children.item(0).innerHTML = arChangeText[2];
			break;
		
		default:
			alert("다시 시도해주세요");
			break;
		}
		
		elements.value="";
	}
	console.log(arText);
	console.log(elements);
	console.log(trElements.item(1));
</script>
</html> -->



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 표준 실습</title>
<link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet">
<style>
   table{
      margin:0 auto;
      text-align: center;
      width:30%;
      font-family:Gugi;
   }
   
   thead{
      background:#fff9c4;
   }
</style>
</head>
<body>
   <table border="1">
      <caption>요금표</caption>
      <thead>
         <tr>
            <th>구분</th>
            <th>요금</th>
         </tr>
      </thead>
      <tr>
         <td class="content">아동</td>
         <td>무료</td>
      </tr>
      <tr>
         <td class="content">청소년</td>
         <td>2000</td>
      </tr>
      <tr>
         <td class="content">성인</td>
         <td>5000</td>
      </tr>
   </table>
   <fieldset style="text-align:center; width:30%; margin:0 auto;">
      <legend>구분</legend>
      <input type="text" id="choice">
      <button onclick="confirm()">확인</button>
   </fieldset>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
   var tempText;
   var tempTd;

   function confirm(){
//      var elements = document.getElementsByClassName("content");
//		jQuery로 바꾸기
		var elements = $(".content");
      
      //var value = document.getElementById("choice").value;
      var value = $("#choice").val();
      var check = false;
      
      if(tempText != undefined){
         //tempTd.innerHTML = tempText;
         tempTd.text(tempText);
         //tempTr.style.background = "#fff";
         tempTr.css("background", "#fff");
      }
      
      // elements는 .content라는 클래스를 가지고 있는 태그들 모두 가져오기
      $.each(elements,function(index,item){
    	  if($(item).text() == value){
    		  tempText = $(item).text();
              tempTd = $(this);
              tempTr = $(item).parent();
              $(item).parent().css("background","#ef5350");
              $(this).text("★" + $(item).text());
              check = true;
    	  }
      })
      
      /* for(let i=0; i<elements.length; i++){
         if(elements[i].innerHTML == value){
            tempText = elements[i].innerHTML;
            tempTd = elements[i];
            tempTr = elements[i].parentElement;
            elements[i].parentElement.style.background = "#ef5350";
            elements[i].innerHTML = "★" + elements[i].innerHTML;
            check = true;
         }
      } */
      
      if(!check){
         alert("다시 시도해주세요.");
         history.go(0);
      }
      
   }
</script>
</html>

 

<jQuery의 단점>

jQuery에 대한 js파일(jQuery를 사용하기 위해 <script>로 선언한 js파일)을 갔다와야하기 때문에 jQuery를 사용하면, 순수 javaScript에 비해 속도가 느려진다.

 

<jQuery의 장점>

간결한 문법으로 인해 개발 속도 증가와 처리비용(인력비용)감소된다.

60%이상의 웹 사이트에서 사용하고 있어서 적정한 상황에 맞춰서 사용할 줄 알아야 한다.

까다로운 UI 작업일 경우, 상대적으로 무거운 jQuery보다 직접 DOM스크립트를 이용하기도 한다.

 

★Point! 기본적으로 DOM 접근을 최소화 하는것이 성능상 좋다.

반응형

'프로그래밍 공부 > JS' 카테고리의 다른 글

[lesson] JS - 데이터 타입과 변수  (0) 2023.01.10
[lesson] JS - 기본 입출력(document, prompt, comfirm, alert)  (0) 2023.01.10
[Lesson]JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${}  (0) 2022.05.11
[lesson] JS - 함수(function), 객체(Object) [일반 객체, core]  (0) 2021.09.02
[lesson] JS - 기본 개요  (0) 2021.09.01

관련글

티스토리툴바