[포스코x코딩온] 풀스택 부트캠프 3주차 정리 -1 (JQuery)

JQuery란?

 

자바스크립트 라이브러리로 더 적고 간편하게 적을 수 있는 3자 패키지.

 

---

 

작동방식

$('.className') .method();

 

$('.className') 이 부분은 variableName = document.querySelectorAll('.className') 과 같다고 보면 되겠다. 다만 여기서 해당 부분은 일회용 변수로 여러 번 사용하려면 따로 변수를 할당해줘야한다. ex) let variableName = $('.className')

 

그래서 console.log( $('.className') )를 하면 clacssName이라는 이름의 class를 가지고 있는 하나의 객체(배열)가 나온다.

만약 하나만 반환하고 싶다면 $('.className')[0] 처럼 배열 인덱스를 넣으면 해당 조건을 만족하는 첫번째 tag가 반환된다.

 

 $('.className') .method(); <= method() 부분은 $('.className')에서 도출된 모든 key값 혹은 배열에 method의 for문 (iteration)을 돌린다고 생각하면 되겠다.

 

-그냥 element를 적고 앞에 $를 붙여도 method를 실행할 수 있다. 

-예시-

let date = document.getElementById('date');
$(date).val('제빵왕 김탁구');

*개인적인 이해방식으로 실제 작동방식과 괴리가 있을 수 있음.

 

- 예시

$('img') .css('display', 'none');
// $('img).attr('style', 'display:none');
// $('img).attr('src', '파일경로'); <= attr은 속성 자체를 바꾸는 method.

// line 1은  $('img')에서 가져온 배열, 혹은 객체값을 iteration을 돌려서 style.display = 'none' 값을 모두 넣어준 것이다.

 

 

$('input') .val(); VS $('input') .val('some value');

 

첫번째는 input 태그의 value 값을 반환하는 것이다. 다만 $('input')으로 만약 하나 이상의 태그가 선택되더라도 첫번째 인덱스 값만 반환하는 것 같다.

두번째는 $('input')으로 반환된 모든 배열의 value 값을 'some value'로 바꾸는 것이다. 그리고 바뀐 $('input') 객체를 반환한다.

 

---

요소 추가

 

Jquery는 요소를 추가할 때 한 줄로 모든 것을 실행할 수 있다.

 $(standard).after(`<p>${$("#content").val()}</p>`);
 
// standard라는 변수의 다음 칸에 형제를 추가하는데 형제의 HTML을 그대로 할당할 수 있다.
// javascript로 하면
// 1.요소 추가, 2. 변수에 요소 할당, 3.요소 안에 HTML 작성, 4. 부모 or 형제요소 변수 생성
// append 까지 해야하는 과정을 한줄에 실행할 수 있다.

 

---

 $("p").on.('click', function(event) {})

JS의 addEventListener와 동일한 기능이다. 모든 "p"태그에 대해 click이라는 event를 부여한다. event.target도 가능하지만 해당 스코프 (함수 안의 중괄호 {}) 안에서 this를 써도 가능하다.

*on은 생략 가능

let dates = $("p");
let standard;

dates.click(function (event) {
$("#date").val($(this).text()); // id = date인 tag의 value속성에 event.target의 text를 넣는다.
$("#date").val($(event.target).text());

standard = this; // 이렇게 하면 함수 외부에서도 this(event.target) 사용 가능
});
        // this: event.target
        //  거기에다가 달러표시 붙여주면 jQuery method 사용 가능