Front-End/4. jQuery
Ex01_jQuery.html
이뮨01
2023. 6. 21. 21:07
jQuery(제이쿼리)를 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="tit">jQuery 라이브러리 다루기!</h1>
<h1>jQuery 라이브러리 다루기!</h1>
<h1>jQuery 라이브러리 다루기!</h1>
<h1>jQuery 라이브러리 다루기!</h1>
<p>날씨가 구려서 코딩할 맛이 안나는 걸..?</p>
<button>클릭</button>
<!-- jQuery 파일 불러오기 -->
<script src="./js/jquery-3.7.0.js"></script>
<script>
// h1 요소 찾아오기!
// JS 버전
// - 요소객체로 찾아온다.
let h1Tag = document.getElementsByTagName("h1");
console.log(h1Tag[0].innerText);
// jQuery 버전 , 자바스크립트의 함수를 사용할 수 없다 ex) innerText
// $("선택자")
// - jQuery 객체(배열)로 가져온다.
// console.log(jQuery("h1"))
// $().text() : 요소의 내용을 변경할 때
// $().html() : 요소의 내용을 변경할 때 (태그 포함)
// console.log($("h1").text("집 가고싶다"))
// console.log($("p").html("<p>집 가고싶다고</p>"))
$("#tit").text("집 가고싶다고");
$("h1+p").html("안 할래");
// jQuery로 스타일 변경해보기!
// $("p").css("color", "blue")
// $("p").css("font-size", "20px")
// 적용할 함수들을 .로 이어서 붙인 후 실행하는 방식
// -> 메소드 체인
$("p").css("color", "blue")
.css("font-size", "20px")
.text("코딩 하지마!"); // 한 줄로 연결됐다.
// $("p").css({ // 객체로 여러개 한번에
// "color" : "blue",
// "font-size" : "20px"
// })
// jQuery로 이벤트 적용해보기
$("button").on("click", () => {
alert("클릭이벤트 실행")
});
</script>
</body>
</html>jQuery를 사용하기 전에 script 태그의 src 속성에 jQuery 폴더위치 or URL 주소를 기입해야 한다.
그 밑에 새로운 script 태그를 열어 그 안에서 jQuery를 사용해야 한다. jQuery와 자바스크립트는 함께 엮어서 사용할 수 없다. 예를들어 jQuery문법으로 가져온 요소에 자바스크립트의 innerText를 할 수 없다는 소리다.
자바스크립트에서 DOM문법으로 가져오던 요소들을 jQuery에서는 $("선택자")로 가져올 수 있다. innerText -> .text("텍스트") / innerHTML -> .html("요소")와 같은 기능이다.
스타일을 적용하는 건 코드를 보면 이해가 된다.
jQuery로 이벤트를 적용하는 방법은 선택자를 통해 요소를 가져오고, .on("이벤트", "함수")이다. 이벤트 리스너와 같은 기능이다.