[코딩애플 JS 기초] JQuery
JQuery란?
너무 긴 자바스크립트의 코드를 줄이기 위해 또는 자바스크립트 사용이 어려운 사람들이 편하게 쓸 수 있도록 가져다쓸 수 있는 도구 코드의 모음이라고 할 수 있다.
다들 무겁다고는 하지만 많은 지식을 요구하지 않기 때문에 사용하기 좋다.
라이브러리를 사용하는 이유?
- 모든 기능을 직접 코딩할 수 없다
- 시간 절약
출처: https://writingstudio.tistory.com/17
제이쿼리 사용법
Jquery cdn 접속
minified를 클릭하고 나오는 코드를 복사해서 html 파일 내에 넣는다.
붙여넣기 한 코드 아래부터 js를 사용하면 제이쿼리 문법을 적용할 수 있다.
<script>
//html 내용 변경
document.querySelector(".hello").innerHTML = "바보";
//제이쿼리 버전
$(".hello").html("바보");
//$ = document.querySelectorAll
//"innerHTML = '바꿀 내용'"" == "html('바꿀 내용');"
//제이쿼리 $쓸 경우 querySelectorAll같이 몇번쨰 따로 표시안하고 전체 선택함
//css 변경
document.querySelector(".hello").style.fontSize = "20px";
//제이쿼리 버전
$(".hello").css("fontSize", "100px");
//제이쿼리 버전 class탈부착하기
$(".hello").addClass('show');//class명에 붙이기
$(".hello").removeClass('show');//class명에서 show 빼기
$(".hello").toggleClass('show');//class명에 show 추가 또는 제거
//addEventListener 적용하기, 애니메이션도 부여 가능
//document.querySelector('#test-btn').addEventListener('click', function(){});
$("#test-btn").on("click", function () {
$(".hello").slideUp();
});
//addEventListener가 on("",function(){})과 같음
</script>
Author And Source
이 문제에 관하여([코딩애플 JS 기초] JQuery), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jessiii/코딩애플-JS-기초-JQuery저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)