[제이쿼리] 선택자

1.1. 시작 $

//1. "document라는 선택자가 준비가 된다면(다 읽는다면) function이라는 함수를 실행(메소드)시킵니다.
$(document).ready(function(){});

//2.head 안에 있을 때는 적용이 되지 않는데 body 안에 있으면 적용이 된다.
// > 해결법 > 스크립트가 실행 되었을 때 html 끝날 때까지 다 읽고나서 실행 되도록 설정하려면
// 제이쿼리 시작을 명령해주어야 한다.
$('body').css('background','red');

//3.위의 1번과 2번을 합치면 정상 작동
$(document).ready(function(){
    $('body').css('background','grey');
});

 

 

1.2. 사용해보기

$(document).ready(function(){ 여기 });

를 시작으로 <여기> 부분에 수행할 기능을 입력하면 작동하는 방식이다.

 

$(document).ready(function(){

$('div').css('border','1px solid red')

});

//div에 선 넣기.
// css메소드로 명령하게 되면 html에 인라인 스타일로 css가 적용되게 된다.
$(document).ready(function(){
    $('div').css('border','1px solid red')
});

 

마찬가지로 <여기>에 어떤 것을 입력하는지에 따라 선택이 달라진다.

//클래스 a 선택하기
$('.a').ready(function(){});

//클래스 a, b 다중 선택하기
$('.a, .b').ready(function(){});

//id a 선택하기
$('div > #a').ready(function(){});

//홀수 짝수 선택하기(even, odd)
$('li:even').ready(function(){});

//더 많은 선택자 보는 곳 https://api.jquery.com/category/selectors/

 

 

1.3. 구조

$(selector).action();

$ 제이쿼리 시작

(selector) html 요소 선택

action() 수행할 작업, 메서드

 

선택자를 써서 부모, 형제 같은 주변 다른 요소를 선택할 수 있다.

//div의 부모를 선택
$(document).ready(function(){
    $('div').parent()
});

 

선택한 요소에 대해 스타일을 적용하고 싶다면

//선택한 div의 부모에 빨간 선을 추가하기
$(document).ready(function(){
    $('div').parent().css('border','1px solid red')
});

 

.parent() 에서 parent 대신 parents, children, next, find, prev, siblings, eq를 넣으면 된다.

parent 중에서 클래스가 'abcd'인 것을 선택하고 싶다면

//선택한 div의 부모 abcd에 빨간 선을 추가하기
$(document).ready(function(){
    $('div').parent('abcd').css('border','1px solid red')
});

 

.parent()와 같은 메서드를 여러개 추가해서 조건에 딱 맞는 요소만 잡을 수도 있다.