jQuery의 기본

jQuery의 객체 탐색

• jQuery는 css 선택자를 통해서 객체를 탐색한다.

$(‘선택자’) 함수

• wrapper라고도 표현한다.
• jQuery의 기초가 되는 문법이다.
• css 선택자를 전달하면 해당 객체를 탐색하여 jQuery 객체를 리턴한다.

    //span 태그의 css 중 color 속성을 red로 변경
    $('span').css('color', 'red');

jQuery 객체

• jQuery 함수를 이용해서 선택한 엘리먼트들에 대해서 프로퍼티를 가지고 있는 객체
• 참고 : https://api.jquery.com

//암시적 반복 : 암시적 반복은 값을 설정할 때만 동작한다.
$('#test').css('color');        //해당 속성에 대한 정보를 가져온다.
$('#test').css('color', 'red'); //해당 속성에 대한 설정을 한다.

//체이닝(chainig) : 선택된 엘리먼트에 대해서 연속적으로 작업을 처리할 수 있는 방법
$('#test').css('color', 'red').css('text-decoration', 'underline');

//객체명.map()
//jQuery 객체의 엘리먼트를 하나씩 순회하면서 첫번째 인자로 전달된 함수가 호출되는데,
//첫번째 인자로 엘리먼트의 인덱스, 두번째 인자로 엘리먼트 객체(DOM)가 자동으로 전달된다.
var li = $('li');
li.map(function(index, elem){
    console.log(index, elem);
    $(elem).css('color', 'red');
});