블록체인 기술사업 교육 30일차

jQuery

- 오픈소스 기반의 JavaScript의 라이브러리 중 하나로 짧고 단순한 코드로 웹 페이지에 다양한 효과나 연출(HTML의 DOM 조작, 이벤트 핸들링, 애니메이션, Ajax)을 적용할 수 있음

- Element(HTML 태그) 선택이 편리하고 효율적으로 제어할 수 있음

- $() = 제이쿼리 객체를 의미 (=jQuery())

- $(HTML태그) 형식으로 지정한 HTML 태그 전체를 지정 

- HTML 파일에서 <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>로 기본 세팅 (jQuery가 여러 페이지에서 쓰일 수 있으니 하나의 파일에 입력해 놓은 뒤 <%- include() %>를 통해 import 하는 것이 효율적)

- $(document).ready(function(){}) = $(function(){}) = DOM이 생성되면(위 -> 아래 순으로 모든 코드를 읽은 후 실행) 지정한 함수 실행 

기본 문법

- html(HTML 코드) = 지정한 HTML 태그 내부에 지정한 HTML 코드 모두에 반영되도록 설정 (=innerHTML)

- text() = 지정한 HTML 태그에 텍스트 데이터 반환 (=textContent)

 

- attr(속성) = 지정한 HTML 태그의 지정한 속성값을 읽어옴 (getter)

- attr(속성, 데이터) = 지정한 HTML 태그의 지정한 속성에 지정한 데이터로 설정 (setter)

- val() = 지정한 input, form 태그의 value 값 반환

 

- find() = 지정한 HTML 태그의 자손 요소 중에서 지정한 선택자에 해당하는 모든 요소 선택 (find()한 후에는 end()로 마무리해줘야 함)

- hide() = 지정한 HTML 태그를 숨김 (css("display", "none")과 동일)

- keyup() = input 태그와 함께 쓰이며 키보드의 키가 눌러졌다 뗄 때 이벤트를 발생시킴 

 

- css("CSS 속성명", "속성") = 지정한 HTML 태그에 지정한 CSS 속성 설정 (속성이 하나일 경우)

- css({"CSS 속성명1":"속성1", "CSS 속성명2":"속성2", ...}) = 지정한 HTML 태그에 지정한 CSS 속성 설정 (속성이 여러 개일 경우)

 

- $(this) = 콜백 함수 내부에서 $(태그) 객체를 불러올 때 사용

※ JavaScript 콜백 함수에서 this를 활용할 때는 화살표 함수가 아닌 선언식을 사용할 것!

 

- toggleClass() = 지정한 HTML 태그가 class의 값을 가지고 있으면 삭제 그렇지 않으면 추가

 

 $(() => { $("p").html("<b>1234</b>"); }); // p태그 전체에 <b>1234</b> 적용
 $("ul.first") // ul 태그 중에서 class가 first인 태그
        .find(".foo") // class가 foo인 태그
        .css("background-color", "red") // 배경색 빨강으로 설정
        .end();