본문 바로가기
Web/jQuery

[JQuery 기본 개념] JQuery문법-$/Selector/CSS Selector

by 나비와꽃기린 2016. 6. 23.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

1. jQuery 문법

1.1  기본 문법

-$(선택자).(‘color’, ‘red’);

-$() jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴

-이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다.

-$(document).ready()는 문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미이다.

 

 

2.1.1 jQuery $

-자바스크립트의 식별자로 사용할 수 있는 특수 기호는 $_이다.

-Jqeury의 코드를 보면 다음과 같은 부분이 있다.

-window.jQuery=window.$=jQery

è  jQuery 식별자를 $로 대체했을 뿐. 따라서 $식별자가 아니라 jQeury를 사용해도 된다.

è  하지만 일반적으로 $를 사용한다.

 

1.2  Selector

-jQuery 를 사용하여 뭔가를 하려면 대상이 필요하다. 그 대상을 찾는 기능을 Selector 라 한다.

-사용방법

l  $(selector) | jQuery(selector)

l  jQuery()보다 표현상 간단한 $()를 더 많이 사용.

l  selector: 태그 또는 id, class 명을 뜻함.

 

-Selector 종류

l  CSS Selector

l  Attribute Selector

l  Form Selectror

 

2.2.1 CSS셀렉터의 종류

-$(this): 자기 자신을 나타냄.

 

-$("*"): 모든 엘리먼트를 선택.

 $('*'): 모든 엘리먼트 선택

 $('p>*'): p 엘리먼트안의 모든 자식 엘리먼트를 선택

 

-$("#id"): $('#center_div'): id center_div 인 엘리먼트를 선택

 

-$(".class name"): $('.subject') : class subject 인 모든 엘리먼트를 선택

 

-$("element name"): $('div'): 문서안의 모든 div 엘리먼트를 선택

 $('font'): 문서안의 모든 font 엘리먼트를 선택