728x90
반응형
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 });
728x90
반응형
'PROGRAMING📚 > WEB📑' 카테고리의 다른 글
| [WEB] form(폼) 태그 사용하는 방법과 속성 (0) | 2023.09.14 |
|---|---|
| [WEB]jQuery 응용 -Animation 만들기 (0) | 2023.09.12 |
| [WEB]HTML태그, class 속성 - Space(공백)으로 여러클래스 만들기 (0) | 2023.09.12 |
| [WEB]JS, Funtion 만들기-동적 UI 만들기 (0) | 2023.09.11 |
| WEB-참고 자료 모음 (0) | 2023.09.11 |
댓글