JavaScript | jQuery 셀렉터와 동작

셀렉터 (어떤 것을 가져와)

기본 흐름

- $(선택자).동작함수() 

- 어떤 것(요소)를 가져와서 무엇을 하는 것입니다.

$('ex').hide();

$() 함수

- 선택된 HTML요소를 제이쿼리에서 이용할 수 있는 형태로 생성

- $() 함수를 통해 생성된 요소는 제이쿼리 객체 

- 다시 말해 괄호 안에 셀렉터에 해당하는 요소를 가져와서 jQuery오브젝트를 만듭니다.

$(function() { }) 

- $(function() { }) : 페이지읽가 완료되고 나서 작성된 코드를 실행합니다. 원형은 아래코드입니다.

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

셀렉터

id 셀렉터 — $('#id')

• id는 문서 안에 하나만 있어야 합니다. 그래서 많은 수를 바꾸려 한다면 모두 하나하나 바꿔야 한다는 단점이 있습니다.

class 셀렉터 — $('.클래스')

유형 셀렉터 —

자손 선택자 — $('a > b')

후손 선택자 — $('a b')

속성 선택자 — input[type="text"]

변수에 저장

var example = $('example');
example.css('background', 'pink');

find

요소의 자손이 내포하는 모든 요소 중에서 셀렉터에 맞는 요소를 찾아옴

var student = $('#student');
var age = student.find('.age');

필터

결과를 다시 걸러낼 수 있습니다.

: hidden 

$('p:hidden') // 숨겨진 요소를 찾습니다.

: contains

특정 텍스트가 들어있는 요소를 선택합니다.

$(event.target)

이벤트 타겟

 

동작 (무엇을 하다)  

스타일변경

- css, show / hide, width / height

jQueryObject.css('속성이름', '값')

애니메이션 

- fadeIn, fadeOut, slideDown, slideUp, animate

내용, 속성 변경 

- text, html, empty, attr, val

addClass — 선택된 요소에 하나 혹은 여러 개의 클래스를 추가

$("h1").addClass("blue");

removeClass — 선택된 요소에 하나 혹은 여러 개의 클래스를 제거

작동하기, 지우기, 만들기 

요소의 내부에 추가 — 

• .append()  리스트 등의 요소의 마지막에 새로운 요소나 콘텐츠 추가 
• .prepend()  리스트 등의 요소의 처음에 새로운 요소나 콘텐츠 추가 
• .appendTo()  append와 같지만 소스와 타겟의 위치가 반대입니다.
• .prependTo()  prepend와 같지만 소스와 타겟의 위치가 반대입니다.   

요소의 외부에 추가 — 

• .before()  기존 요소의 바로 앞에 새로운 요소나 콘텐츠 추가
• .after()  기존 요소의 바로 뒤에 새로운 요소나 콘텐츠 추가
• .insertBefore()  before와 같지만 소스와 타겟의 위치가 반대입니다.
• .insertAfter()  after와 같지만 소스와 타겟의 위치가 반대입니다.

기존 요소를 포함하는 요소의 추가 — 

• .wrap()  선택한 요소를 포함하는 새로운 요소를 추가
• .wrapAll()  선택한 모든 요소를 포함하는 새로운 요소를 추가
• .wrapInner()  선택한 요소에 포함하는 새로운 요소를 추가

요소복사

• .clone()  선택한 요소를 복제합니다. 인자값을 true로 넘기면 이벤트핸들러나 요소와 관련된 데이터, 자식요소까지 넘깁니다.

요소대체

• .replaceAll()  선택한 요소를 지정된 요소로 대체
• .replaceWith()  선택한 요소를 지정된 요소로 대체. 소스와 타겟의 위치가 반대입니다.

요소삭제

• .remove() 

• .detach() 

• .empty() 

• .unwrap() 

요소탐색

• .parent()  요소의 부모 요소를 탐색 

이벤트 

• 브라우저 이벤트
• 문서 로딩
• 이벤트 핸들러
• 이벤트 오브젝트

stopPropagation() : 이벤트 전파를 중지. 상위 엘리먼트에게 전달되지 않게 막아줍니다.

preventDefault() : 기본 이벤트를 제거

• 폼 이벤트
• 키보드 이벤트
• 마우스 이벤트

on 메서드

1. 모든 이벤트를 처리

$('li').on('click', function(e) { }

2. 두 개의 선택적인 매개변수를 제공

.on(events[, selector][, data], function(e))

.bind () : 요소이벤트에 핸들러를 등록

$(document).ready(function() {
    function alertMe() {
        alert("Hello");
    }
    $('.mylink').bind(Click, alertMe); // 클릭 시 alertMe 
});

각각 처리

- each

찾기

closest(selector) : 선택된 요소의 최초의 부모 요소를 얻습니다. 

직렬화

.serialize() : Form태그내의 모든 항목들을 자동으로 읽어와서 queryString형식으로 변환 결과를 리턴합니다. 

관련포스트

• JavaScript | 자바 스크립트 개요 (Outline)
• JavaScript | 자바스크립트 객체
• JavaScript | 자바스크립트 그래픽
• JavaScript | 자바스크립트 개발도구