2020년 3월 10일 화요일 오전 11:43jQuery9분 읽기 (대략 1379 단어)

선택자 -jQuery

제이쿼리는 자바스크립트를 이용해 만든 라이브러리 언어입니다.
라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합을 가르킵니다.

제이쿼리는 모질라 사의 자바스크립트 개발자였던
존 레식(John Resig)이 창시 하였습니다.

직접 선택자와 인접 관계 선택자

기본형
$(“wrap”).css(“color”,”green”);

선택자()는 HTML 요쇼(“wrap”)를 선택해 오고
선택한 요소에 스타일(css) 또는 속성(Attribute)을 적용할 메서드를 작성합니다.

직접 선택자

  • $(“*”)
    전체 선택자
    모든 요소를 선택합니다. *는 root 즉 HTML 전체를 의미합니다.

  • $(“#.id”)
    아이디 선택자
    id 속성에 지정된 값을 가진 요소를 선택합니다.

  • $(“.class”)
    클래스 선택자
    class 속성에 지정된 값을 가진 요소를 선택합니다.

  • $(“element”)
    요소 선택자
    지정한 요소명과 일치하는 요소들만 선택합니다.

  • $(“선택1,선택2,선택3…선택n”)
    그룹 선택자
    ()안에 지정된 요소들을 한번에 선택합니다.

인접 관계 선택자

  • $(“요소 선택”).parent()
    부모 요소 선택자
    선택한 요소의 부모 요소를 선택합니다.

  • $(“요소 선택”).parents()
    상위 요소 선택자
    선택한 요소의 상위 요소를 모두 선택합니다.

  • $(“요소 선택 하위 요소”)
    하위 요소 선택자
    선택한 요소에 지정한 하위 요소를 선택합니다.

  • $(“요소 선택>자식 요소”)
    자식 요소 선택자
    선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택합니다.

  • $(“요소 선택”).children()
    자식 요소들 선택자
    선택한 요소의 모든 자식 요소를 선택합니다.

  • $(“요소 선택”).prev()
    이전 요소 선택자
    선택한 요소 바로 이전 요소를 선택합니다.

  • $(“요소 선택”).prevAll()
    이전 요소들 선택자
    선택한 요소 이전 요소를 모두 선택합니다.

  • $(“요소 선택”).prevUntil(“요소명”)
    이전 요소 지정 선택자
    선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택합니다.

  • $(“요소 선택”).next()
    선택한 요소의 다음 요소를 선택합니다.

  • $(“요소 선택”).nextAll()
    선택한 요소의 다음 요소 모두를 선택합니다.

  • $(“요소 선택”).siblings();
    선택한 요소의 모든 형제 요소를 선택합니다.
    본인(선택한 요소)는 선택되지 않습니다.

체이닝 기법 이란?

$(요소 선택).css(속성1, 값1).css(속성2, 값2).css(속성3, 값3);

제이쿼리에서는 한 객체에 다양한 메서드를 줄줄이 이어서 사용 할 수 있습니다.
이를 마치 체인이 엮인 모양과 같다 하여 체이닝 기법 이라고 합니다.
메서드 사용이 완료 되었으면 ;(세미콜론)을 작성해줍니다.

속성 탐색 선택자

속성 탐색 선택자는
선택해 온 요소를 기준으로 일치하는 속성의 포함 여부를 따져서
속성(값) 까지 일치할 시 가져오는 선택자 입니다.

사용 예시 설명
$(“li[title]”) li 요소 중 title속성이 포함된 요소만 선택합니다.
$(“li[title=’리스트’]”) li 요소 중 tilte 속성 값이 ‘리스트’인 요소만 선택
$(“a[href^=’http://‘]”) a 요소 중 href 속성 값이 ‘http://‘로 시작하는 요소만 선택
$(“a[href$=’.com’]”) a 요소 중 href 값이 ‘.com’으로 끝나는 요소만 선택
$(“a[href*=’easypub’]”) a 요소중 href 값이 ‘easyspub’를 포함하는 요소만 선택
$(“li:hidden”) li 요소 중 숨겨진 요소만 선택합니다.
$(“li:visible”) li 요소 중 보이는 요소만 선택합니다.
$(“:text”) type 속성값이 “text”인 요소만 선택합니다.
$(“:selected”) selected 속성이 적용된 요소만 선택합니다.
$(“:checked”) checked 속성이 적용된 요소만 선택합니다.

선택자와 함께 사용하면 편리한 메서드

is()

is() 메서드는 선택한 요소의 상태가 지정한 속성과 일치하면 true,
그렇지 않으면 false를 반환합니다.

$(요소 선택).is(“:[checked | selected | visible | hidden]”)

each(), $.each()

each(), $.each() 메서드는 선택한 여러 개의 요소들에 각각 순차적으로
하나씩 접근할 때 사용하는 메서드 입니다.

기본형

$(요소 선택).each(function(매개 변수1, 매개 변수2){…});
또는
$.each(요소 선택,function(매개 변수1, 매개 변수2){…});

1
2
3
4
5
6
7
8
9
$(function(){  
 $("#id li").each(function(i,k){  
 //id요소 하위li 태그 만큼 아래 실행문을 반복 실행합니다.  
 console.log("index:"+i);  
 //매개 변수 i에는 접근한<li>의 인덱스가 할당되어 있습니다.  
 console.log(k);  
 //매개 변수 k에는 접근한 <li> 태그가 할당됩니다.  
 });  
});

get()

제이쿼리로 선택한 요소에 get()메서드를 적용하면
자바스크립트에 DOM 선택자로 선택한 태그로 인식되어
자바스크립트 DOM 방식을 따릅니다.

$(“li”).get().style.color=”red”;

#

카테고리

×