0_jQeury_(개요,기본선택자1)

01.jQuery개요

- head 태그 내부에 script 태그를 이용한 연결

<script type = "text/javascript" src="파일경로"></script>

1. jQuery 라이브러리 다운로드를 통한 연결

- 장점 : 오프라인 사용가능

- 단점 : html 문서마다 상대경로로 jQuery 라이브러리 등록시 경로가 계속 바뀌는 문제 발생

2. CDN(Content Delivery Network)을 이용한 연결

- 장점 : 경로 변경 불필요

- 단점 : 온라인 환경에서만 가능

 

# library :  프로그램 개발 시 필요한 외부 기능을 다운로드 받아 추가하는 것

# API : 프로그래밍 언어 자체에서 제공하는 기능

# Framework : 프로그램 개발 시 사용되는 틀

@@jQuery란?

기존 복잡했던 클라이언트 측 HTML 스크립팅을 간소화 하기 위해 고안된 javascript 라이브러리 

적은양의 코드로 빠르고 풍부한 기능을 제공함

@@jQuery 시작하기

@ jQuery 기본형태

$('선택자').메소드명('속성', '속성값');

-> jQuery 선택자는 CSS선택자와 매우 유사

"*" : 전체 선택자

@@ jQuery의 ready() 메소드(함수)

- javascript의 window.onload와 같은 의미

- 여러가지 작성방법이 있음

- window.onload 차이점도 있음

- javascript의 onload 사용방법

window.onload = function(){ 소스코드 }

- jQuery에서 onload와 같은 ready()를 나타내는 방법

1) jQuery(document).ready(function() {});

2) $(document).ready(function() {});

3) $(function() {});

- window.onload와의 차이점

window.onload는 한 문서에 여러번 작성하여도 가장 마지막에 작성된 window.onload만 인식이됨

하지만 jQuery의 ready()함수는 여러번 작성해도 모두 인식이됨

02. jQuery기본선택자1

jQuery의 기본적인 선택자는 CSS와 동일함

$("태그").css("속성", "속성값");

@여러 선택자를 동시에 사용하고 싶은 경우 콤마(,)로 선택자를 구분하여 작성

$("태그, 태그").메소드("속성", "속성값");

@클래스 선택자

$(".클래스명").메소드("속성", "속성값");

@여러 클래스 선택자

$(".클래스명.클래스명").메소드("속성", "속성값");

@아이디 선택자

$("#id명").메소드("속성", "속성값");

@자식 선택자와 후손 선택자

자식 선택자 : '부모 > 자식'

후손 선택자 : '부모 자식'

@속성 선택자

요소[속성명 = 속성값]

: 해당 속성명과 속성값이 같은 객체

요소[속성명 ~= 속성값]

: 속성값이 특정 단어를 포함한 객체 선택(완전히 일치)

요소[속성명 ^= 속성값]

: 속성값이 특정 단어로 시작하는 객체 선택

요소[속성명 $= 속성값]

: 속성값이 특정 단어로 끝나는 객체 선택

요소[속성명 *= 속성값]

: 속성값이 특정 단어를 포함하고 있는 객체 선택(일부)

# val() : value 관련된 기능 수행 메소드

# attr() : 속성과 관련된 기능 수행 메소드

# -> prop() : attr()의 최신 버전