jQuery

💙JQuery

Node(Element)를 간편하게 컨트롤하기 위한 라이브러리다.
코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다.

자바스크립트도 가능하지만 jQuery가 더 수월하다.

💙셀렉팅

jQuery 셀렉터는 CSS와 동일하다

예제

<h1>Where do you want to go?</h1>
<h2>Travle Destinations</h2>
<p>Plan your next adventure</p>
<ul id='destinations'>
    <li>Rome</li>
	<li>Paris</li>
	<li class='promo'>Rio</li>
</ul>


// id가 destinations 인 요소
$("#destinations"); 

// class가 promo 인 요소
$(".promo"); 

// id가 destinations 하위의 li 요소, 스페이스로 하위(부모와 자식) 요소 구분
$("#destinations li"); 

// ul 하위의 li 요소를 찾아본다.
// 자식 요소 존재하는거 있으면 모두 가져온다.
$("#destinations li");

// ul 바로 하위의 li 요소를 찾아온다.
// > 직속 자식 요소만 검색
$("#destinations > li");

// 다중 요소 셀렉팅
// , 여러 개의 요소를 동시에 검색
$(".promo, #france");

// : Filter 역활

// 첫 번째 요소
$("#destinations li:first");

// 마지막 요소
$("#destinations li:last");

// 홀수 번째
$("#destinations li:odd");

// 짝수 번째
$("#destinations li:even");

💙Dom Traversing

하위요소 탐색보다 월등히 빠르게 요소를 찾을 수 있다.

<h1>Where do you want to go?</h1>
<h2>Travle Destinations</h2>
<p>Plan your next adventure</p>
<ul id='destinations'>
    <li>Rome</li>
	<li>Paris</li>
	<li class='promo'>Rio</li>
</ul>

// destinations : selection
// find : traversal
$("#destinations").find("li");

// 첫 번째 요소 선택
$("li").first(); // rome

// 마지막 요소 선택
$("li").last();

// 다음 요소
$("li").first().next(); // Paris

// 이전 요소
$("li").first().next().prev(); // rome

// 하위에서 상위로 탐색
// 부모 요소 선택, 여러 번 연결하여 사용 가능(체이닝)
$("li").first().parent(); 

// 자식 요소 선택
$("#destinations").children("li");

💙DOM 다루기

// jQuery 사용하려면 필수
// $(document).ready(){}

$(document).ready(function() {
  
	var price = "$("<p>From $399.99</p>");
  
  	// before() : 선택한 요소의 이전 위치에 새 요소 추가
  	// .vacaton 요소의 이전에 price 요소 추가
  	$(".vacaton").before(price);
  
  	// after() : 선택한 요소의 다음 위치에 새 요소 추가
  	// .vacaton 요소의 이후에 price 요소를 추가
  	$(".vacaton").after(price);
  
  	// prepend() : 선택한 요소의 맨 앞 위치에 새 요소 추가
  	// .vacation 요소의 안쪽 가장 첫 부분에 요소를 추가
  	$(".vacaton").prepend(price);
  
  	// apend() : 선택한 요소의 마지막 위치에 새 요소 추가
  	// .vacaton 요소의 안쪽 가장 마지막 부분에 요소를 추가
  	$(".vacaton").apend(price);
  
  	// remove() : 선택한 요소 삭제
  	$(".button").remove();
  	
});

💙DOM 이벤트

버튼을 클릭하면 클릭한 버튼만 삭제하고 그 자리에 p 엘리먼트가 추가되며 금액을 보여주는 예제

$(document).ready(function() {
  
	$("button").on("click", function() {
      var price = "$("<p>From $399.99</p>");
      
      // 클릭하지 않은 버튼 영역에도 p 엘리먼트가 추가되는 문제가 남아 있다.
      $(".vacation").append(price);
      // 버튼이 div 아래로 이동한다면 p 엘리먼트는 div 안쪽으로 추가된다.
      $(this).after(price); 
      $(this).parent().parent().append(price);    
      $(this).parent(".vacation").append(price);
      
      // p 엘리먼트를 li 안에 추가
      $(this).closet(".vacation").append(price);
             
      $("button").remove(); // 모든 버튼이 삭제됨
      
      // 클릭한 버튼 요소만 가져와서 삭제
      $(this).remove();
    
    });
});

3개의 버튼이 있을 경우 클릭 이벤트 예제

// 기본 속성 이외에 다른 속성을 추가하고 싶을때 
// data-key="valeu" 형식으로 사용
<li class="vacation onsale" data-price="399.99">
  	<h3>Hawaiian Vacation</h3>
	<button>Get Price</button>
	<ul class="comments">
    	<li>Amazing deal!</li>
		<li>Want to go!</li>
	</ul>
</li>

$(document).ready(function() {
  
	$("button").on("click", function() {
      	var amount = $(this).closest('.vacation').data('price');
    	var price = "$("<p>From $" + amount + "</p>");
      	
       	$(this).closet(".vacation").append(price);
      	$(this).remove();
      
      // $(this).closet(".vacation")가 반복되고 있다
      // 변수에 할당해서 사용하기
      
      var vacation = $(this).closet(".vacation");
      
      	var amount = vacation.data('price');
    	var price = "$("<p>From $" + amount + "</p>");
      	
       	vacation.append(price);
      	$(this).remove();
      
    });
});
      

마우스 이벤트 예제

click(), dblclick(), mouseout(), mouseover() ... 등등

$(document).ready(function() {
  
  	// 클릭했을때
  	$('.confirmation').on('click', 'button', function(){
      	$(this).closest('.confirmation').find('.ticket').slideDown();
    });
  
  	// 마우스 올릴때
  	$('.confirmation').ons('mouseenter','h3', function(){
      	$(this).closest('.confirmation').find('.ticket').slideDown();
    });
});

키보드 이벤트 예제

keypress() : 키보드 누를때(문자 키 제외한 키 코드)
keydown() : 키보드 누를때(모튼 키 코드)
keyup() : 키보드에서 손을 떼었을 때

<div class="vacation" data-price="399.99">
  	<h3>Hawaiian Vacation</h3>
	<p>$399.99 per ticket<p>
    <p>
    	Tickets:
        // class 가 quantity 인 값이 변경된다면
        <input type='number' class='quantity' value='1'/>
    </p>
</div>
// 399.99 부분이 변경
<p>Total Price : $<span id='total'>399.99</span></p>
  

$(document).ready(function(){
  $('.vacation').on('keyup','.quantity', function(){
    	var price = +$(this).closet('.vacation').data('price');
    	var quantity = +$(this).val();
    	$('#total').text(price * quantity);
  });
});

💙input / textarea

val()

선택한 요소의 값을 가져오거나, 새로운 값을 적용한다.

<label for="email">이메일</label>
<hr/>
<input type="text" id="email" placeholder="Email을 입력하세요."/><br/>
<br/>
  
// Email input에 입력된 값을 가져옴
var email = $("#email").val();
// Email input에 값을 세팅한다.
// 입력 값 초기화에 유용
$("#email").val("Email 입니다.");

$("#email").val("Email 입니다.");는 <input type="text" id="email" placeholder="Email을 입력하세요."/>후에 작성해야 아래처럼 적용된다.

💙select

selct의 선택된 값을 가져오거나, 설정할 수 있고, 항목 변경 시 다양한 작업을 할 수 있다.

// select의 선택된 값을 가져온다.
var weeks= $("#weeks").val();

// select의 값을 강제로 선택한다.
$("#jobs").val("2")

// select의 선택 항목이 바뀌었을 때, 옵션의 text 값을 가져와 경고창으로 보여준다.
$("#jobs").on("change", function(){
  aler($("#jobs option:selected").text());
});

💙radio / checkbox

prop()

선택한 요소의 상태 속성 값을 가져온다.

// radio / checkbox 가 선택된 개수를 가져온다. 
// 선택했는지 안했는지 판단
console.log($("input[type=radio][name=age]:checked").length);
console.log($("input[type=checkbox][name=hobby]:checked").length);

// radio / checkbox를 강제로 선택하게 한다. 
// "모두선택"에서 사용한다.
// eq(1) 이라는건 두번째 요소를 고른것 (0부터 시작)
$("input[type=radio][name=age]").eq(1).prop("checked", true);
$("input[type=checkbox][name=hobby]").eq(1).prop("checked", true);

// 체크박스 선택했을 때 이벤트 발생
// 체크박스 클랙했을 때, 체크가 된 경우 모든 체크박스를 체크한다. 
// 반대의 경우 모든 체크박스의 체크를 해제한다.
$("input[type=checkbox][name=hobby]").on("click", function(){
  	var checked = $(this).prop("checked");
  	console.log(checked);
  	if(checked){
      $("input[type[checkbox][name=hobby]").prop("checked", false);
    }
  	else{
      $("input[type=checkbox][name=hobby]").prop("checked", false);
    }
});

💙submit

attr()

요소의 속성값을 가져오거나 새로운 값으로 지정 가능하다

<input type="button" id="done" value="완료" />

$("#done").on("click", function(){
  // Validation Check
  var form = $("#signUpForm");
  // attr 을 이용해서 속성을 정의한다.
  $(form).attr("action", "/doSignUp");
  
  // attr 은 객체 리터럴로 정의할 수 도 있다.
  $(form).attr({
    "method":"post"
    "enctype" : "multipart/formdata"
    });

  $(form).submit();
});  

// attr에 속성의 이름을 작성하면 값을 읽어 올 수 있다.
var action = $(form).attr("action");
console.log(action);

console 창에 뜬 값

💙Ajax

JavaScript와 XML을 이용한 비동기적 데이터 교환 기법이다.

동기적

요청을 보내고 응답이 올 때까지 기다린다.

비동기적

요청을 보내고 응답을 기다리는 동안 다른 작업을 할 수 있다.
즉, 새로고침을 하지 않고도 백그라운드에서 데이터를 받아오면서 웹페이지를 계속 사용할 수 있다.

💙json

데이터를 키와 값의 쌍으로 구성해 텍스트 형식으로 주고 받는 형식이다.

$.ajax({
  	type:"POST",
  	url:"semester_code.php"
  	data:{
  		semesterDivision : semesterDivision,
  		campus_id : campus_id,
  		semester

💙Ajax와 json의 관계

Ajax는 비동기적으로 서버와 데이터를 주고받기 위한 기술 또는 방식이다.
이 Ajax를 통해 서버에 데이터를 보낼 수도 있고, 서버에서 데이터를 받아올 수도 있다.
이때 주고받는 데이터 형식 중 하나가 JSON 이다.

🤍회고

셀렉터의 종류가 다양하고 이전에 배운 CSS와 헷갈리는 부분도 있지만, 굳이 외우려 하기보다는 예제나 프로젝트처럼 실제로 코딩을 반복하다 보면 자연스럽게 익숙해질 것 같다.