jQuery
모든 브라우저에서 동작하는 자바스크립트를 간편하게 사용할 수 있도록 단순화시킨 오픈소스 기반 라이브러리
ex. 이미지 크기 줄이기
▼javascript▼
<script>
let imgs = document.getElementsByTagName('img')
for(let i = 0; i < imgs.length; i++){
imgs[i].style.width = '50px'
}
</script>▼jQuery▼
<script>
$('img').width('50px')
</script>jQuery 문법 사용을 위한 2가지 방법
1. jQuery파일을 다운받아 로드
jQuery홈페이지(https://jquery.com/)에서 다운로드 후
vscode에 파일 추가
script 태그 안에서 가져와주기
<script src="js/jquery-3.6.0.min.js"></script>2. CDN(Content Delivery Network)을 이용하여 로드
분산되어있는 jQuery서버 중 가장 가까운 곳에 접속하는 방법
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>가장 최신 버전 사용
<script src="//code.jquery.com/jquery-latest.min.js"></script>요소에 접근하기
$("요소명/선택자")ex. 요소에 접근해서 태그 사이의 값 바꾸기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li id="li1">a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
// jquery로 id선택자 지정 후 안의 텍스트 가져오기
// text() == innerText : 같은 역할을 함. 태그 사이의 텍스트요소에 접근
console.log($("#li1").text()) // 제대로 가져오는지 알아보기 위해 콘솔에 출력
$("ul>li:nth-child(1)").text("선택") // 바꾸고싶은 값을 괄호안에 넣어주면 바뀜. 빈칸일때는 그냥 값을 가져옴.
// html() == innerHTML : 태그사이의 텍스트+태그 요소에 접근
$("li").html("<i>바꾸기</i>")
</script>
</body>
</html>스타일 바꾸기
jQuery에서 스타일 바꾸기
요소선택자를 이용하여 원하는 HTML요소를 선택하고 동작 메소드를 정의하여 선택된 요소에 원하는 동작을 설정할 수 있다.
$("요소명").css("스타일 속성", "값")ex. h1태그의 스타일 바꾸기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>jquery 스타일 바꾸기</h1>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
$("h1").css("color", "tomato")
$("h1").css("font-family", "궁서")
// 메서드 체인 : 같은 선택자에 메서드를 여러번 적용할 수 있다.
$("h1").css("color", "tomato").css("font-familty", "궁서")
$("h1").css({
color: 'pink',
fontFamily: '궁서'
})
</script>
</body>
</html>jQuery의 선언 위치
jquery가 head 태그에 작성되어있으면 아직 태그를 만나지 못한 상태이기때문에 스타일을 변경할 수 없음.
body태그 아랫쪽이나 head태그에서 $(document).ready(function(){})사용.
ex. head태그에 jQuery 작성하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "tomato").css("font-family", "궁서")
})
</script>
</head>
<body>
<h1>jquery 스타일 바꾸기</h1>
</body>
</html>현재 html문서가 모두 해석이 되어서 준비가 되었을 때 실행
선택자(다중선택자, 형제선택자)
선택자를 사용하여 코드 길이를 줄일 수 있다.
ex. 다중선택자와 형제선택자를 사용해서 값을 바꿔보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li id="a">a</li>
<li id="b">b</li>
<li id="c">c</li>
<li id="d">d</li>
<li id="e">e</li>
</ul>
<script src="./js/jquery-3.6.0.min.js"></script>
<Script>
// 하나씩 요소들 가져와서 바꿔주기
$("#a").css("color", "tomato")
$("#c").css("color", "tomato")
$("#e").css("color", "tomato")
// 선택자 사용
$("#a, #c, #e").css("text-decoration", "underline")
$("#c").prevAll().text("바꾸기이이이이이잉")
$("#c").nextAll().text("으에에ㅔ에에에엥")
</Script>
</body>
</html>요소들을 하나씩 가져와서 바꿔준 것을 다중선택자를 이용해서 코드를 한 줄로 줄일 수 있다.
.prevAll() : 기준 태그의 앞쪽 태그들을 가져옴
.nextAll() : 기준 태그의 뒷쪽 태그들을 가져옴
asdf