서울에서 먹은 순대국중에 국물의 시원함이 손에 꼽는 순대국집을 찾았다! 순대국위에 다진고추를 팍팍!!!

한식 #한강서초순대국 .얼갈이순대국🍲{score:🌝🌝🌝🌝🌝}

Review

---

객체안에 프로퍼티로 정의된 함수인 메소드,
html 문서의 객체에 접근해서 수정/삭제하는 동적 작업을 할수 있게 하는 DOM의 개념에 대해 배웠다.

• js에서 body태그 속의 객체를 선택하는법
• 요소에 텍스트나 다른 요소를 추가하는 법
• 요소에 클래스를 더하거나 빼는 법
• 요소의 속성값을 직접 변경하는법
• 이벤트 발생시 특정 함수를 실행하는 법)
  등을 할 수 있게 되었다.

Preview

---

지난시간 배운 JS를 아주 간편하게 사용할 수 있는 자바스크립트 라이브러리 jQuery를 배운다..!매우 짧은 문법으로 DOM조작을 할 수 있다.

1. jQuery 메소드

jQuery 홈페이지
위의 홈페이지에서 jquery파일을 다운받아서 할 수도, cdn을 문서에 추가해서 할 수도있다... cdn추가하는거 잊지말기.....ㅎ

jquery의 기초 문법
$( '선택자' ).동작함수();
선택하고 싶은 요소를 선택자로 선택하고 원하는 함수를 입력!

지난시간 배운 기본 문법과 jquery를 비교하면서 살펴보자.

① 값 가져오기 & 설정하기

값 가져오기 : $('선택자').val();
값 설정하기 : $('선택자').val('설정하기');

//<input id="id" />의 value 가져오기
document.getElementById('input').value; //js
$('#id').val(); //jquery

//input의 value 설정하기
document.getElementById('input').value='설정하기';//js
$('#id').val('설정하기'); //jquery

jquery의 간편한점은 선택자로 선택한 요소가 여러개더라도 모든 요소에 설정한 값을 넣어준다는 점이다. for문을 사용하지 않아도!

$('input').val('넣었다'); //모든 input태그의 값이 aaa가 된다

② style 변경하기

$('선택자').css('속성', '속성값');

div태그의 배경색을 yellow로 변경하기

 $('div').css('backgroundColor','yellow');//jquery
//js
let box=document.querySelector('div');
box.style= 'background-color: yellow';//css style을 바꿔주는 것이니까 css문법 사용

💡querySelector는 언제 쓰는지 헷갈렸는데,
jquery를 사용하지 않는다 생각했을때 id를 지정해주지 않고 요소를 선택할 때 사용하면 유용하다. 위에서 div태그가 하나이고 id를 지정해주고싶지 않다면 querySelector로 선택해 줄 수 있다.

③ 속성 변경하기

$('선택자').attr('속성','속성값');

②번의 예시를 attr메소드를 사용하고 싶다면 속성에 style을 지정해주면 된다.

$('div').attr('style','background-color : yellow; width:200px');

style속성이 아닌 다른값도 변경 가능하다

$('input').attr('placeholder','속성변경');
//js
let aa = document.querySelector('input');
aa.setAttribute('placeholder','js속성변경')
//단, 여기서는 제일 첫 input태그만 변경됨. querySelectorAll로 하면 for문으로 해야함

④ text,html 변경하기

$('선택자').text('글자'); 파싱안됨
$('선택자').html('글자');:파싱됨

요소의 속성이나 값을 변경하는것이 아니라 요소 속의 글자나 구문을 변경하고 싶을 때 사용한다.

$('div').text('jq텍스트변경');
$('div').html(`<div style='width:100px'>새박스</div>`)

//js문법으로는
let box = document.querySelector('div');
box.innerText='js텍스트변경';
box.innerHTML = `<div style='width:100px'>새박스</div>`;

💡파싱(parsing): HTML, CSS, Javascript 등의 문서를 읽고 이를 조작할 수 있는 자료구조로 변환하는 과정

⑤ 요소 추가

('선택자').append(요소); 선택한 요소의 마지막 자식으로 추가
('선택자').prepend(요소); 선택한 요소의 첫번째 자식으로 추가
('선택자').before(요소); 선택한 요소의 이전 형제요소로 추가
('선택자').after(요소); 선택한 요소의 다음 형제요소로 추가

js에서 자식요소를 추가하려면
① document.createElement()로 요소를 만들고
② innerText나 innerHTML로 요소 속에 넣고싶은 것을 넣고
③ 부모요소를 선택해서 .appendChild()로 자식요소를 넣어줘야 한다.

jQuery를 활용하면 위 메소드가 모두 파싱이 되기 때문에 한줄이면 끝나버린다...!

$('ul').append('<li>ul의자식</li>')

//js로 만들려면
let jsUl = document.createElement('li');
jsUl.innerText='js자식만들기'
document.querySelector('ul').appendChild(jsUl)

jquery는 선택한 요소가 여러개라면 자동으로 모든 요소에 적용한다는 점을 주의하자!! 아래와 같이 쓴다면 모든 <li>태그에 형제가 생긴다.

$('li').after('<li>after형제만들기</li>')

흠...바닐라 js에서 append와 appendChild의 차이...?

⑥ 요소 삭제

$('선택자').remove(); : 선택한 요소를 DOM트리에서 삭제
$('선택자').empty(); : 선택한 요소의 자식요소를 삭제(자신은 남아있음)

$('.redBox').remove() //jq
document.querySelector('div').remove() //js

$('.redBox').empty() //jq
document.querySelector('div').removeChild(document.getElementById('newBox')) //js
//div태그의 id가 newBox인 자식요소를 지정해줘야함

⑦ 요소 탐색

$('선택자').parent() : 바로위의 부모요소 하나만 선택
$('선택자').parents() : 모든 조상요소 선택
$('선택자').next() : 바로 다음 형제요소 선택
$('선택자').nextAll() : 다음 형제요소 모두 선택
$('선택자').prev() : 바로 이전 형제요소 선택
$('선택자').prevAll() : 이전 형제요소 모두 선택
$('선택자').chilren() : 자식요소 모두 선택

여러개를 반환하는 parents(), .nextAll(), prevAll(), children()은 ()안에 또다른 선택자를 넣어 선택한 요소 중 조건을 만족하는 요소를 다시 선택할 수 있다.

+선택한 다음 다른 메소드를 이어서 사용가능하다

$('.container').children('.redBox') 
// container 클래스의 자식요소중 redBox클래스를 가진 자식 선택
$('.container').children('.redBox').remove()
//container 클래스의 자식요소중 redBox클래스를 가진 자식 제거

⑧ 클래스 조작하기

jQuery에서 배포하는 ui를 쉽게 구성할 수 있게 도와주는 라이브러리이다. jQuery-ui에서 다운받을 수도 있고 아래 cdn을 추가하면 사용이 가능하다!

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>

$('선택자').addClass('클래스이름') : 선택한 요소에 클래스 추가
$('선택자').removeClass('클래스이름') :선택한 요소에 클래스 삭제
$('선택자').hasClass('클래스이름')
: 선택한 요소가 클래스를 가지고 있는지 boolean값으로 반환
$('선택자').toggleClass('클래스이름')
: 선택한 요소에 클래스가 존재하면 추가, 없으면 삭제
$('선택자').switchClass('class1','class2', 시간)
: 선택한 요소의 class1을 class2로 바꿈
시간은 바꿀 때 걸리는 시간

빨->주->노->초->파->보 동작 만들기(다음에 추가..)

2. 이벤트 리스너

① 로딩 이벤트

$(window).ready()
$()
페이지의 모든 문서가 완료된 후 실행된다.

$(window).ready(function () {
	$(".container").append(`<h1>안녕</h1>`)
})

$(function () {
  	$(".container").append(`<h1>완료</h1>`)
})

② 마우스 이벤트

.click() :클릭할때 실행
.mouseover() : 마우스가 올라가는 순간 실행
.hover() : 마우스가 올라가있는 동안 실행
.scroll() : 스크롤이 움직일 때 실행

.on()은 jQuery에서 이벤트 처리를 위해 사용되는 메서드다.
$('선택자').on(이벤트, 핸들러); 문법이며
click()과 .on('click')은 같은 동작을 한다.

③ 키보드 이벤트

$('선택자').keydown() 키보드가 눌렸을 때 실행
$('선택자').keyup() 키보드가 떼졌을 때 실행

	$("input").keydown(function (e) {
      console.log(e) // 이벤트 객체
      console.log(e.currentTarget); // 이벤트가 발생한 요소
      console.log(this); // e.currentTarget과 같음
    })