[SeSAC] 웹 풀스택 과정_JQuery

 

1. JQuery

JQuery는 라이브러리이며, HTML의 DOM 조작 등을 지원해 자바스크립트를 간편하게 사용하기 위한 목적으로 만들어졌습니다.

 

 

2. 사용 현황

요즘에는 주로 JQuery보다 리액트(라이브러리)나 Vue(프레임워크) 등등 을 사용한다고 합니다. 사용률은 낮아졌지만 어느 정도 점유율을 유지하고 있어 개발자를 확보하는데 용이하며 정적이고 가벼운 웹페이지를 신속하게 제작하는 용도로는 쓰기 좋다고 합니다.

 

 

3. 사용해 보기 위해 사전 작업

https://releases.jquery.com/ 에서 CDN 링크를 복사해 HTML 파일에 붙여 넣는다.

 

 

4. 기본 작성문법

$(선택자).동작함수();

 -  $(선택자).동작함수()
 -  $(): HTML 요소를 선택하는 함수
 -  동작함수: 선택된 요소에 대해 원하는 동작 수행

 

 

5. 동작함수

 - jQuery API Document : https://api.jquery.com/ 참고

 

5.1 val()

-input 태그에서 value값을 가져오는 코드를 자바스크립트, 제이쿼리로 작성

function getValue() {
  // js 작성
  // const inputVal = document.querySelector('input').value;
  // alert(inputVal);

  // jq 작성
  const value = $('input').val();
  alert(value);
}

-input 태그에서 value값을 설정하는 코드를 자바스크립트, 제이쿼리로 작성

function setValue() {
  // js 작성
  // document.querySelector('input').value = 'js로 작성';

  // jq 작성
  $('input').val('jq로 작성');
}

 

 

5.2 css()

-span 태그를 선택해서 css를 조회 / 변경하는 코드를 자바스크립트, 제이쿼리로 작성

function changeCssJS() {
  const span = document.querySelector('span');
  span.style = 'font-size: 20px; color: red';
}

function changeCssJquery() {
  // 한줄로 쓰기
  // $('span').css('font-size', '40px');
  // $('span').css('color', 'skyblue');

  // 위 두줄을 합쳐서 작성하기!
  $('span').css({
    fontSize: '40px',
    color: 'skyBlue',
  });
}

function getCssJquery() {
  // jq
  console.log($('span').css('color'));

  // js
  console.log(document.querySelector('span').style.color);
}

 

 

5.3 attr()

-태그에서 속성을 선택해서 속성의 값을 선택/변경

// attr()
function changeAttrJS() {
  // a 태그를 선택하고, href 속성 값을 naver 주소로 변경
  const myVal = document.querySelector('a').href;
  myVal.href = '<https://naver.com>';
}

function changeAttrJquery() {
  $('a').attr('href', '<https://daum.net>');
}

 

 

5.4 text()

요소를 선택하고, 요소의 텍스트 값을 선택 / 변경

// text()
function changeTextJS() {
  // p-text 클래스를 갖는 요소 선택, 요소의 텍스트를 임의의 값으로 변경
  const myVal = document.querySelector('.p-text');
  myVal.textContent = Math.floor(Math.random() * 10 + 1);
}
function changeTextJquery() {
  $('.p-text').text('바보');
}

 

 

5.5 html()

-html요소를 선택하고, HTML을 선택/변경

// html()
function changeHtmlJS() {
  // p-html 클래스를 갖는 요소 선택, <h3>javascript</h3>로 변경
  const myVal = document.querySelector('.p-html');
  myVal.innerHTML = '<h3>javascript</h3>';
}
function changeHtmlJquery() {
  $('.p-html').html('<h3>jquery</h3>');
}

 

 

5.6 append()

자식요소의 마지막에 요소를 추가

function appendJS() {
  // 1. colors 클래스 갖는 요소 선택하고
  // 2. li 태그 요소를 생성한 후
  // 3. li 태그의 텍스트로 '마지막 자식으로 추가된 js' 추가
  // 4. colors 클래스를 갖는 요소에 "맨 마지막 자식"으로 li 요소 추가
  // 힌트: <https://developer.mozilla.org/en-US/docs/Web/API/Element/append>
  const ul = document.querySelector('.colors');
  const lastLi = document.createElement('li');
  lastLi.textContent = '마지막 자식으로 추가된 js';
  ul.append(lastLi);
}

function appendJquery() {
  $('.colors').append('마지막 자식으로 추가된 jq');
}

 

 

5.7 prepend()

자식요소의 첫 번째에 요소를 추가

function prependJS() {
  // 1. color 클래스 갖는 요소 선택하고
  // 2. li 태그 요소를 생성한 후
  // 3. li 태그의 텍스트로 '첫 자식으로 추가된 js' 추가
  // 4. color 클래스를 갖는 요소에 "가장 첫 자식"으로 li 요소 추가
  // 힌트: <https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend>

  const ul = document.querySelector('.colors');
  const fstLi = document.createElement('li');
  fstLi.textContent = '첫 자식으로 추가된 js';
  ul.prepend(fstLi);
}

function prependJquery() {
  $('.colors').prepend('첫 자식으로 추가된 jq');
}

 

 

5.8 before()

선택된 요소의 형제 요소 바로 이전에 요소를 추가 (추가할 요소를 안 적고 () 하면 자기 자신 리턴함 > 추가의 기능이지 조회는 아님)

function beforeJS() {
  // 1. green 클래스를 갖는 요소 선택하고
  // 2. li 태그 요소를 생성한 후
  // 3. li 태그의 텍스트로 'green 클래스를 갖는 요소의 이전 형제 요소로 추가(js)' 추가
  // 4. green 클래스를 갖는 요소의 "바로 이전 형제 요소"로 li 요소 추가
  const green = document.querySelector('.green');
  const li = document.createElement('li');
  li.textContent = '이전 형제 요소로 추가(js)';
  green.before(li);
}

function beforeJquery() {
  $('.green').before('<li>이전 형제 요소로 추가(jq)</li>');
}

 

 

5.9 after()

선택된 요소의 형제 요소 바로 다음에 요소를 추가 (추가할 요소를 안적고 () 하면 자기자신 리턴함 > 추가의 기능이지 조회는 아님)

function afterJS() {
  // 1. green 클래스를 갖는 요소 선택하고
  // 2. li 태그 요소를 생성한 후
  // 3. li 태그의 텍스트로 'green 클래스를 갖는 요소의 다음 형제 요소로 추가(js)' 추가
  // 4. green 클래스를 갖는 요소의 "바로 다음 형제 요소"로 li 요소 추가
  const green = document.querySelector('.green');
  const li = document.createElement('li');
  li.textContent = '다음 형제 요소로 추가(js)';
  green.after(li);
}

 

 

5.10 remove()

요소를 선택 후 그 요소를 삭제

function removeJS() {
  // li2 아이디를 갖는 요소를 선택하여 그 요소를 삭제
  document.querySelector('#li2').remove();
}

 

 

5.11 empty()

해당 요소의 HTML을 비운다. (따라서 자식 태그들도 사라지게 된다.)

function emptyJS() {
  // 해당 요소의 HTML을 빈 문자열 '' 로 설정 (innerHTML)
  document.querySelector('.nums').innerHTML = '';
}

function emptyJquery() {
  // 선택된 요소의 내용물을 비운다. 자식도 사라지겠지
  $('ul.nums').empty();
}

 

 

5.12 parent()

부모 요소를 찾기 (자바스크립트, 제이쿼리)

function findParent() {
  // child2 클래스 갖는 요소의 부모 요소
  // js
  const js = document.querySelector('.child2').parentElement;
  console.log(js);

  // jq
  console.log($('.child2').parent());
}

 

 

5.13 parents()

선택된 요소의 부모 > 조상 > 그위 > .. 를 전부 배열형식으로 리턴

function findParents() {
  // 선택된 요소의 부모 > 조상 > 그위 > .. 를 전부 배열형식으로 리턴합니다.
  // JS는 없습니다.

  // jq
  console.log($('.child2').parents());
}

 

 

5.14 next()

해당 요소의 바로 다음 형제요소를 찾기

function findNext() {
  // child2 클래스 갖는 요소의 다음 형제 요소
  const js = document.querySelector('.child2').nextElementSibling;
  console.log(js);

  //jq
  console.log($('.child2').next());
}

 

 

5.15 prev()

해당 요소의 바로 이전 형제요소를 찾기

function findPrev() {
  // child2 클래스 갖는 요소의 이전 형제 요소

  // js
  const js = document.querySelector('.child2').previousElementSibling;
  console.log(js);

  // jq
  console.log($('.child2').prev());
}

 

 

5.16 children()

선택한 요소의 자식 요소들을 HTMLCollection 형태로 반환

function findChildren() {
  // parent 클래스 갖는 요소의 자식 요소들을 HTMLCollection 형태로 반환

  // js
  // const js = document.querySelector('.parent').childNodes; // 노드리스트 형태로 요소들이 저장됨
  const el = document.querySelector('.parent').children; // HTMLCollection 형태로 요소들 저장
  // const el = document.querySelector('.parent').childElementCount; // 자식수
  console.log(el);

  // jq
  console.log($('.parent').children());
}

 

5.17 addClass, removeClass , hasClass , toggleClass

클래스 조작 함수

function addClass() {
  // hi 아이디 갖는 요소 선택하여 "fs-50" 클래스 추가
  //   document.querySelector('#hi').classList.add('fs-50');
  $('#hi').addClass('fs-50');
}

function removeClass() {
  // hi 아이디 갖는 요소 선택하여 "fs-50" 클래스 삭제
  //   document.querySelector('#hi').classList.remove('fs-50');
  $('#hi').removeClass('fs-50');
}

function hasClass() {
  // hi 아이디 갖는 요소 선택하여 "fs-50" 클래스 포함 여부 확인
  //   document.querySelector('#hi').classList.contains('fs-50');
  console.log($('#hi').hasClass('fs-50'));
}

function toggleClass() {
  // hi 아이디 갖는 요소 선택하여 "bg-pink" 클래스 토글 (있으면 삭제, 없으면 추가)
  //   document.querySelector('#hi').classList.toggle('bg-pink');
  $('$hi').toggleClass('bg-pink');
}

 

 

5.18 trim()

문자열의 시작과 끝에서 공백을 제거

$.trim("    hello, how are you?    ");
// "hello, how are you?"

$.trim($('#content').val())

 

 

6. 이벤트

 

6.1 Mouse 이벤트

 - click

JavaScript 작성 예시. 반복문으로 복수의 요소에 이벤트 적용시킴

const nums = document.querySelectorAll('.num');
console.log('nums', nums);
for (let num of nums) {
  console.log('num', nums);
  num.addEventListener('click', function () {
    console.log(this);
    this.style.color = 'blue';
  });
}

JQuery 작성 예시. 반복문을 쓰지 않았지만 선택된 요소 모두 이벤트 적용

// click 이벤트가 매번 발생할때 마다 복수 요소의 css가 변경되어 버림
$('.num').on('click', function () {
  $('.num').css('color', 'blue');
});

// this 를 사용해서 click 이벤트가 발생할때 마다 해당요소만 css가 변경되도록 코드 작성
$('.num').on('click', function () {
  $(this).css('color', 'blue');
});

// this : 자바스크립트 객체
// $(this) : JQuery 객체

 

 

- mouseover

요소에 마우스를 올렸을 때 이벤트 발생

$('.numbers').on('mouseover', function () {
  $(this).css('background-color', 'skyblue');
  $(this).append('<div>111</div>');
});

 

 

 - hover

마우스 올리고 땠을때 이벤트 발생 (마우스오버+마우스아웃과 같음)

$('.div-hover').hover(
  function () {
    $(this).addClass('hover');
  },
  function () {
    $(this).removeClass('hover');
  }
);

 

 

 - scroll

윈도우 창을 스크롤할 때 이벤트 발생

// in js
window.addEventListener('scroll', function () {
  console.log('scrolling Js!!!');
});

// case jq
$(window).scroll(function () {
  console.log('scrolling!!!');
});

// case jq
$(window).on('scroll', function () {
  console.log('scrolling!!!');
});

 

 

6.2 Key 이벤트

 - keydown

$('.input-key').on('keydown', function (e) {
  // e: 이벤트 객체
  console.log(e);
  console.log(e.code); // 눌려진 키의 고유 코드
  console.log(e.key); // input에 입력된 값

  if (e.code === 'ArrowUp') {
    console.log('⬆');
  } else if (e.code === 'ArrowDown') {
    console.log('⬇');
  } else {
    console.log('others');
  }
});

 

 

6.3 Form 이벤트

 - submit 

$('#todo-form').on('submit', function (e) {
  e.preventDefault(); // 이벤트의 기본동작을 막는 메서드 (submit 이벤트의 기본동작은 새로고침)

  // name 속성값이 todo인 요소를 선택하고 해당 요소의 value를 todo 변수에 저장
  // todos 클래스를 갖는 요소를 선택
  // li 요소에 todo 변수의 값을 텍스트로 갖게 한 후 todos 클래스 요소에 추가
  // name 속성값이 todo인 요소의 value 초기화

  // 사용자 정의 속성 'name' 사용해서 선택
  const todo = $("[name = 'todo']").val();

  $('.todos').append(`<li>${todo}</li>`);

  $("[name = 'todo']").val('');
});