Basic Link
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Document</title>
</head>- jquery를 실행하기 위해 기본적으로 받아야하는 링크
How to Start
<head>
<script>
$(document).ready(function(){});
//$(function(){}); //같은 코드
</script>
</head>- jquery를 <head> 단에서 실행하기 위해 작성하는 코드, 자바 스크립트의 window.onload와 같은 기능
- <body> 단에서 클래스 혹은 id 등 필요한 요소가 jquery보다 아래에 위치하면 이 코드가 불필요
//css함수:style변경
//attr(속성): 해당요소의 속성값 반환
//attr(속성,값): 속성값을 해당값으로 변경
//$(selector): $안에 접근을 위한 요소값을 selector라고 한다- jquery 기본적 함수 작성 방법
- selector의 작성 방법은 JavaScript와 동일
<script>
$("div.c img").attr("src","../flower_ani/7.jpg").css({
"border-radius":"100%",
"height":"300px",
"width":"300px"
});
</script>- 클래스가 c인 <div> 태그 하위의 <img> 태그를 선택
- 해당 태그의 속성 중 src 변경
- 해당 태그의 style 중 위의 것들 변경
eq( )
<body>
<script>
<div class="a">
<div>Happy</div>
<div>Friday</div>
</div>
</script>
</body>- 위의 코드 중 <div class=”a”> 태그 아래 아무런 선택자도 없는 동일한 <div> 태그가 2개 존재
<body>
<script>
$("div.a div").eq("0").css("color","blue");
</script>
</body>- eq(0) 혹은 eq(”0”)은 $(selector)에 해당하는 동일한 선택자 중 0번째 선택자를 의미
- 따라서 위의 2개의 자식 <div> 형제 중 Happy의 글자 색이 blue로 변경
초보개발자