-
[JQuery] selectorVScode/JQuery 2022. 9. 9. 14:22
-모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리
-제작 이유: DOM과 관련된 처리를 쉽게 구현, 일관된 이벤트 연결을 쉽게 구현, 시각적 효과를 쉽게 구현, ajax 애플리케이션 쉽게 구현
-사용법: 직접 다운받아 사용(http://jquery.com)하거나 CDN 호스트 사용
-CDN(content delivery network ): 사용자에게 간편하게 콘텐츠를 제공하는 방식을 의미하며 구글, 마이크로소프트, jquery 측에서 사용자가 jquery를 사용하기 편하게 콘텐츠 제공
라이브러리 다운받아 포함하는 방법
1. 링크 연결
2. 직접 다운로드하여 저장하고 script 태그에 위치를 지정
<script src="script/jquery-3.6.0.js"></script>
jquery 홈페이지 접속→download 클릭→download the uncompressed, development jQuery 3.6.0 마우스 우클릭→다른 이름으로 링크 저장 클릭→webapp 파일에 폴더 생성하여 그 안에 파일 저장(script 폴더 생성했음) 
script 폴더 안에 jquery-3.6.0.js 파일 저장된 것을 확인
제이쿼리를 사용한 웹페이지 형식
-제이쿼리는 자바스크립트의 확장판이기 때문에 작성영역이 script 태그 내부로 똑같음
-이 영역에 자바스크립트와 제이쿼리를 섞어서 사용해도 무관함
-작성영역은 똑같지만 작성된 내용의 시작이 다소 차이가 좀 남
-쉽게 말해 이 명령들(이코드들)은 제이쿼리 명령임 이라는 영역 표시가 필요함
// $(document).ready(); // 명령 실행 대상은 document이고, // 그 대상객체의 멤버메서드 중 ready()라는 메서드를 사용함 // $(document).ready(function(){}); // document가 준비(ready)되면 function(){} 익명함수의 내용을 실행하라 // 정식의 제이쿼리 명령 형식 $(document).ready(function(){/* 명령1; 명령2;*/}); $(document).ready(function(){ // 명령1; // 명령2; }); // 모든 명령은 익명함수 안에 넣어서 작성하고, // $(document).ready(function(){});는 여러번 쓸 수 있음 // 위에 쓰인 제이쿼리 영역의 표식은 구문이 길어서 // 대개는 아래와 같이 간략하게 사용하는 것이 대부분. // 앞으로 위 구문은 아래와 같이 document와 ready를 생략한 후 // 간결하게 사용한다 // (document).ready를 생략 -> $(function(){}); $(function(){}); // 같은 표현 $(document).ready(function(){});<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery_Basic.html</title> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> $(function(){ $("#tit").css("color","red"); }); // 일반적인 명령형식 $(function(){ $("body").css("background-color","#00FFFF"); // 선택자로 대상 선택 $("body") -> 스타일 또는 구성요소 또는 함수 선택 // .css() -> 변경 내용 지정("background-color","#00FFFF") // $(선택자).구성요소 또는 메서드(변경내용); }); </script> </head> <body> <h1 id="tit">제목</h1> <h1>제이쿼리</h1> <h2>선택자</h2> <h3>직접 선택자</h3> <h1 class="tit2">제목</h1> </body> </html>
위 코드 script 안에 추가적으로 코드 넣기
1. 전체선택자
-.css 안에 스타일요소명과 적용할 값들을 따옴표 묶어서 위와 같이 넣으면 해당 선택자에서 지목한 태그에 적용
$(function(){ $("*").css("border","1px solid blue"); });
2. 태그 선택자
-.css가 끝난 곳에 .css를 이어서 사용하면 다른 스타일도 적용 가능
$(function(){ $("h3").css("background-color","#ff00ff").css("border", "2px dashed #ff0"); // <h3>직접 선택자</h3> });
3. 두 개 이상의 태그 선택
$(function(){ $("h1,h2").css("background-color","#DDDDDD").css("border", "2px dashed #00f"); // <h1 id="tit">제목</h1> // <h1>제이쿼리</h1> // <h2>선택자</h2> // <h1 class="tit2">제목</h1> });
4. 아이디 선택자
$(function(){ $("#tit").css("background-color","#ff0").css("border", "2px solid #f00").css("font-size","250"); // <h1 id="tit">제목</h1> });
5. 클래스 선택자
$(function(){ $(".tit2").css("background-color","#ff0").css("border", "2px dashed #f00").css("font-size","250"); // <h1 class="tit2">제목</h1> });
6. 종속선택자
$(function(){ $("h1.tit2").css("color","yellowgreen"); // $("h1 .tit2") 후손선택자: h1 태그의 후손 중 클래스 tit2인 것 // $("h1.tit2") 종속선택자: h1 태그들 중 클래스 tit2인 것 });
'VScode > JQuery' 카테고리의 다른 글
[JQuery] button, effect (0) 2022.09.09 [JQuery] event (0) 2022.09.09 [JQuery] DOM (0) 2022.09.09 [JQuery] 속성/필터선택자, 배열 (0) 2022.09.09 [JQuery] 인접관계선택자 (0) 2022.09.09