웹프로그래머

요즘 스크립트 작업은 대부분 jQuery에 의존하고 있다.

작업을 하다 객체가 존재하는가 하지않는가가 필요해서 코딩을 약간 해봤는데 무조건 객체가 존재한다고 나와버린다.

보통 자바스크립트에서는

alert(getElementById("id값"));
이렇게 적으면 존재유무가 표시되는데....

alert($("#id값));
jQuery도 비슷하게 했는데 안된다.

그래서 검색을 하다보니 jQuery는 다른 방식으로 객체를 찾아내는걸 알게 되었다.

alert( $("#id값").length );
위와 같이 수행했을경우 id값이 존재하면 1 이상을, 존재하지 않으면 0을 리턴한다.

존재할때 계속 코드를 수행하게 만들기 위해서는

if ( $("#id값") > 0 ) {
     //수행할 코드
}

# 기본 셀렉터

* : 모든 엘리먼트와 일치

E : 태그명이 E인 모든 엘리먼트와 일치

E F : E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치

E>F : E의 바로 아래 자식이면서 태그명이 F인 모든 엘러먼트와 일치

E+F : E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치

E~F : E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치

E:has(F) : 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치

E.C : 클래스명 C를 가지는 모든 엘리먼트 E와 일치, E의 생각은 *.C와 동일함

E#I : 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함

E[A] : 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A=V] : 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A^=V] : 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A$=V] : 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A*=V] : 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

# 위치기반 셀렉터

:first : 페이지에서 처음으로 일치하는 엘리먼트. li a:first는 리스트 아이템의 첫번째 링크를 반환함

:last : 페이지에서 마지막으로 일치하는 엘리먼트. li a:last는 리스트 아이템의 마지막 링크를 반환함

:first-child : 첫번째 자식 엘리먼트. li:first-child는 각 리스트의 첫번째 아이템을 반환한다.

:last-child : 마지막 자식 엘리먼트. li:last-child는 각 리스트의 마지막 아이템을 반환한다.

:only-child : 형제가 없는 모든 엘리먼트 반환

:nth-child(n) : n번째 자식 엘리먼트. li:nth-child(2)는 각 리스트의 두번째 리스트 아이템을 반환함

:nth-child(event|odd) : 짝수 또는 홀수 자식 엘리먼트. li:nth-child(event)은 각 목록의 짝수 번째 자식 엘리먼트 반환

:nth-child(Xn + Y) : 전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인경우 생략가능하다. li:nth-child(3n)은 3의 배수번째 아이템을 반환, li:nth-child(5n+1) 은 5의 배수 +1번째 아이템을 반환

:event / :odd : 페이지 전체의 짝수/홀수 번째 엘리먼트. li:even은 모든 짝수번째 아이템을 반환한다.

:eq(n) : n번째로 일치하는 엘리먼트

:gt(n) : n번째 엘리먼트(포함안됨) 이후의 엘리먼트와 일치

:lt(n) : n번째 엘리먼트(포함안됨) 이전의 엘리먼트와 일치

# 필터 셀럭터

:animated : 현재 애니메이션이 적용되고 있는 엘리먼트를 선택

:button : 모든 버튼을 선택함(input[type=submit], input[type=reset], input[type=button], button)

:checkbox : 체크박스 엘리먼트만 선택(input[type=checkbox])

:checked : 선택된 체크박스나 라디오 버튼만을 선택

:contains(foo) : 텍스트 foo를 포함하고 있는 엘리먼트만 선택

:disabled : 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.

:enabled : 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.

:file : 모든 파일 엘리먼트를 선택함(input[type=file])

:header : 헤더 엘리먼트만 선택한다. 예를 들어 <h1>부터 <h6>엘리먼트만 선택한다.

:hidden : 감춰진 엘리먼트만 선택한다.

:image : 폼 이미지를 선택한다.(input[type=image])

:input : 폼 엘리먼트만 선택한다.(input, select, textarea, button)

:not(filter) : 필터의 값을 반대로 변경한다.

:parent : 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.

:password : 패스워드 엘리먼트만 선택한다. (input[type=password])

:radio : 라디오 버튼 엘리먼트만 선택한다.(input[type=radio])

:reset : 리셋 버튼을 선택(input[type=reset], button[type=reset])

:selected : 선택된 엘리먼트만 선택한다.

:submit : 전송 버튼을 선택한다.(button[type=submit], input[type=button])

:text : 텍스트 엘리먼트만 선택(input[type=text])

:visible : 보이는 (visible)엘리먼트만 선택한다.

http://neokido.tistory.com/entry/JQuery-기본-Selector

jQuery 셀렉터

: CSS의 셀렉터와 같은 방법으로 이용한다.

$("#myDiv").css("border","3px solid red");

jquery를 사용하는 방법.

이렇게 사용한다.

$는 jquery라는 것을 알리기위한 asp에서는 <% %>, php <?php ?> 정도인거 같다.

$대신 jQuery를 적어도 무방하다.

http://jquery.com