JQUERY 기본문법과 선택자

in Programming on JavaScript

기본 문법

준비 상태

  • javascript의 window.onload를 기억하는가? 페이지가 다 로드 된 후에 js가 실행되게 해주었다. 안그러면 오류가 나니까. ( 객체가 생성되기전 JS가 실행되면 객체를 찾을 수 없어서 오류) jquery에서는 다음과 같은 문법을 사용한다.

    1번

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

    2번

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

    3번

    $(function(){});

Chaining

$(selector).css().css().css

  • 함수가 실행 된 후 객체를 리턴해서 이렇게 chaining으로 효과를 줄 수 있다.

오버 로딩 된 CSS

  • 네가지
    1. css(속성 이름) : 속성 값을 반환해준다.
    2. css(속성 이름, 값) : 속성 값을 바꾼다.

1208jq2

  • .css(function(){})

선택자

  • css에서 선택자를 배웠으면 한큐에 쉽게 이해할 수 있다.
  • 이 포스트에서는 총 7가지 기본 선택자인 전체 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자,자손 선택자와 후손 선택자, 속성 선택자, 필터 선택자를 보도록 한다.
  • $(this). 는 js에서 this와 같은 역할을 한다.!

전체 선택자

  • *로 표시한다.

  • 모든 문서에 있는 객체를 선택하는 선택자이다. html, head, script , body 를 다 아울러 말한다.

    $(function(){
    $('*').css('color','red')
});

태그 선택자

  • 태그를 아래와 같이 객체화 시켜서 여러가지 속성이나 함수를 줄 수 있다.

    $(function(){
    $('h1').css('color','red')
});

  • 여러개의 태그를 선택할 때에는 다음과 같이 한다.

    $(function(){
    $('h1,p').css('color','red')
});

아이디 선택자

  • #으로 표시한다.

    $(function(){
    $('#target').css('color','red')
});

클래스 선택자

  • .으로 표시한다.

    $(function(){
    $('.wrapper').css('color','red')
});

자손 선택자와 후손 선택자

  • 아래와 같은 구조를 띤 문서가 있다고 한다. 한단계 아래 트리에 있는 요소들이 자손이 되고, 자기 보다 아래있는 요소들은 싹 다 후손이 된다.

1208jq3

  • body 다음의 div태그를 기준으로 본다면, 이 div의 자식은 파란색 네모 안에 있는 요소들이고 div의 자손은 빨간색 네모 안에 있는 요소들이다.

    1208jq4

자손 선택자

  • > 로 표현한다.

  • 몇몇 속성은 inherit이 되어서 후손 선택자를 사용한 것같이 보일 수도 있다. color는 그 중 하나다. 그래서 후손까지 다 변한다. 그러나 보통 자손까지만 영향이 미친다.

    $(function(){    
    $('div > ul').css('color','red')
});

후손 선택자

  • 띄어쓰기로 표현한다. div 아래 모든 li가 다 선택된다.빨간색 영역이 모두 body의 자식인 div의 후손이다.

    $(function(){    
    $('div li').css('color','red')
});

속성 선택자

  • 입력 양식과 관련된 태그를 선택할 때 많이 사용됨t

    <body>
    <input type= "text"/>
    <input type= "radio"/>
    <input type= "checkbox"/>
</body>

    위 코드에서 특별히 raido 타입의 인풋을 선택하고 싶을 때,

    $(function(){
    $("input[type='text']").val();
})

    이렇게 []안에 넣어서 찾아준다.

    [a (가) b]

    (가)
=(a가 b일 때) , |=(a에 b포함 시) , ~= (a가 b단어로 시작시), ^=(a가 b로 시작시) , $=(a가 b로 끝날 시) , *=(a가 b포함시) 등이랑 같이 쓸 수 있다.

필터 선택자

  • : 기호를 포함하는 선택자를 필터 선택자라고 한다.

속성에 따라

  • 위 속성 선택자를 간편하게 표현할 수도 있다.

    input:button

  • 그리고 요소의 설정값에 따라 설정할 수 도있다.

    input:checked
input:focus

위치에 따라

  • 위치 필터를 사용해 홀수열에는 회색, 짝수열에는 연한회색, 첫열에는 진한회색을 주었다.
$(function(){
    $('tr:odd').css('background','#aaa');
    $('tr:even').css('background','#eee');
    $('tr:first').css('background','#000').css('color','white');
    //쌍으로 써줘야한다.
    $('tr').mouseover(function(){
        $(this).css('font-weight',"bold");
    })
    $('tr').mouseout(function(){
        $(this).css('font-weight',"normal");
    })
})

1209jq1

  • 이렇게 세개세트로 반복하게 할 수도 있다.
$(function(){
	$('tr:eq(0)').css({'background':'black','color':'white'})
	$('td:nth-child(3n+1)').css('background','#565656')
	$('td:nth-child(3n+2)').css('background','#a9a9a9')
	$('td:nth-child(3n+3)').css('background','#f9f9f9')
})
  • contains , eq, gt, has, lt, not 등이 있다. 지금 정리하기 보다는 필요할 때 쓰면서 추가하는게 좋을 것 같다.

© 2018. All rights reserved.

Powered by Hydejack v8.5.2