Frontend Dev📚/🔖React_JS
[WEB]jQuery(라이브러리)설치&기본 함수
__이니__
2023. 9. 12. 17:54
jQuery(라이브러리)설치
jQuery 를 사용하면 $ 은 쿼리 셀렉터를 의미
addEventListener = on
함수명을 짧게 사용 가능하다
jQuery CDN
jQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in each major branch. See all versions of jQuery Core. jQuery 3.x jQuery 2.x jQuery 1.x jQuery Migrate jQuery UI Showing the latest stable release for the current and legac
releases.jquery.com
<!-- jQuery -->
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>자바스크립트 라이브러리는 성능이나 속도면에서 <body>태그 끝나기 전에 넣는게 좋다
기본 함수
innerHTML
document.querySelector('.jq').innerHTML ='안녕!';$(".jq").html("안녕!jq");style.color
document.querySelector(".color-jq").style.color = "red"; $(".color-jq").css("color", "red");style.fontSize
document.querySelector(".size-jq").style.fontSize = "20px";$(".size-jq").css("font-size", "20px");
style.padding
document.querySelector(".size-jq").style.padding = "10px";$(".padding-jq").css("padding", "10px");같은 클래스 안에있는 요소의 값을 똑같게 변경하고 싶을 경우,
<p class="class-jq">같은 class1 변경!</p>
<p class="class-jq">같은 class2 변경!</p>
<p class="class-jq">같은 class3 변경!</p>querySelectorAll을 사용하는 경우, 요소를 하나하나 바꿔 주어야한다
document.querySelectorAll(".class-jq")[0].innerHTML = "class 변경 됨!";
document.querySelectorAll(".class-jq")[1].innerHTML = "class 변경 됨!";
document.querySelectorAll(".class-jq")[2].innerHTML = "class 변경 됨!";jQuery를 사용하면, 한줄만으로 변경이 가능하다
$('.class-jq').html('class 변경 됨!');ClassList.add()
document.getElementsByClassName("list-group")[0].classList.add("show");$(".list-group").addClass("show");ClassList.toggle()
document.getElementsByClassName("list-group")[0].classList.toggle("show");$(".list-group").toggleClass("show");ClassList.remove()
document.getElementsByClassName("list-group")[0].classList.remove("show");$(".list-group").removeClass("show");addEventListener()
document.querySelector('#test-btn').addEventListener();$("#test-btn").on("click", function () { //javascript });