728x90
반응형
1) JQuery
1-1) 기본 개념
1) JQuery
1-1) 기본 개념
01.기본개념.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>J-Query 기본 개념</title>
<script src="./jq_folder/jquery-3.7.1.min.js"></script>
<!--
JQuery
1. 어떤 브라우저를 사용하더라도 호환 가능
2. CSS에서 객체들을 선택하는 선택자 규칙을 사용 가능
3. 위의 기능들을 아주 작은 크기의 파일 하나로
스크립트 라이브러리 제공
-->
</head>
<body>
<img id="img1" src="../HTML/1.image/file/jqueryLogo.png" />
<script>
// jQuery 함수를 이용해 DOM 객체를 감싸 jQuery로써 DOM을 사용하겠다는 의미이다!
// jQuery(img1).attr("src", "../HTML/1.image/file/htmlLogo.png");
// jQuery 함수 => $표현
// $(img1).attr("src", "../HTML/1.image/file/htmlLogo.png");
// $() --> 안에 문자열을 넣으면 css에서 제공하는 selector 규칙 적용
$("#img1").attr("src", "../HTML/1.image/file/cssLogo.png");
</script>
</body>
</html>
※ "body 태그 내의 script 태그 미적용" 시 화면
※ "body 태그 내의 script 태그 적용" 시 화면
'JQuery' 카테고리의 다른 글
| JQuery(5) - 복습2(배열, 문서 객체 조작) (0) | 2024.07.16 |
|---|---|
| JQuery(4) - 복습(선택자, 이벤트), 추가 정리사항 (0) | 2024.07.15 |
| JQuery(3) - 이벤트, 애니메이션 효과, 예제(버튼 선택에 따른 링크 이동, 텍스트 타이핑 커서 구현) (0) | 2024.06.17 |
| JQuery(2) - 선택자, 배열 및 함수, 문서 객체 (0) | 2024.06.14 |
