노드 다루기 | |
아이디 이름으로 노드 찾기 | $('#아이디') |
태그 이름으로 노드 찾기 | $('태그') |
클래스 이름으로 노드 찾기 | $('.클래스') |
속성으로 노드 찾기 | $('[속성이름=값]') |
찾은 갯수 구하기 | $대상.length |
n번째 노드 접근하기 | $대상.eq(index) |
자바스크립트 dom 객체 접근하기 | $대상.get(index), $대상[index] |
순차적으로 노드 접근하기 | $대상.each(function(index) { $(this)또는 $대상.eq(index); }) |
찾은 노드 중에서 특정 노드만 찾기 | $대상.filter('선택자') |
찾은 노드의 자손 노드 중 특정 노드만 찾기 | $대상.find('선택자') |
인덱스 값 구하기 | $대상.index(), $목록.index($대상), $목록.index(대상 dom객체) |
모든 자식 노드 찾기 | $대상.children() |
특정 자식 노드만 찾기 | $대상.children('선택자') |
첫 번째 자식 노드 찾기 | $대상.children().first(), $대상.children().eq(0), $대상.children(':first'), $대상.children(':eq(0)') |
마지막 번째 자식 노드 찾기 | $대상.children().last(), $대상.children(':last') $대상.children().eq($대상.children().length-1) $대상.children(':eq('+($대상.children().length-1)+')') $대상.children().eq(-1) $대상.children(':eq(-1)') |
n번째 자식 노드 찾기 | $대상.children().eq(index) |
부모 노드 찾기 | $대상.parent() |
조상 노드 찾기 | $대상.parents("선택자") |
이전 형제 노드 찾기 | $대상.prev() $대상.prevAll('선택자') |
다음 형제 노드 찾기 | $대상.next() $대상.nextAll('선택자') |
노드 생성 | $('추가노드dom 문자열') |
첫 번째 자식 노드로 추가 | $부모노드.prepend($추가노드) $추가노드.prependTo($부모노드) |
마지막 번째 자식 노드로 추가 | $부모노드.append($추가노드) $추가노드.appendTo($부모노드) |
특정 노드의 이전 위치에 추가 | $추가노드.insertBefore($기준노드) $기준노드.before($추가노드) |
특정 노드의 다음 위치에 추가 | $추가노드.insertAfter($기준노드) $기준노드.after($추가노드) |
첫 번째 자식 노드로 이동 | $부모노드.prepend($이동노드) $이동노드.prependTo($부모노드) |
마지막 번째 자식 노드로 이동 | $부모노드.append($이동노드) $이동노드.appendTo($부모노드) |
특정 노드의 이전 노드로 이동 | $이동노드.insertBefore($기준노드) $기준노드.before($이동노드) |
특정 노드의 다음 노드로 이동 | $이동노드.insertAfter($기준노드) $기준노드.after($이동노드) |
특정 노드 제거 | $대상.remove() |
모든 자식 노드 제거 | $대상.children().remove() |
노드 내용을 문자열로 읽기 | $대상.html() $대상.text() |
노드 내용 수정하기 | $대상.html('수정할 태그 문자열') $대상.text('수정할 텍스트') |
노드 내용을 이용해 여러 개의 자식 노드 추가 | $대상.html('추가할 태그 문자열') |
노드 내용을 이용해 모든 자식 노드 제거하기 | $대상.html('') |
스타일 다루기. | |
스타일 값 구하기 |
$대상.css('스타일') $대상.css('스타일',~~~) |
스타일 값 설정하기 |
$대상.css('스타일',값) $대상.css({스타일:값, ~~~}) |
클래스 추가 |
$대상.addClass('클래스이름1 클래스이름2 ~~~~') |
클래스 삭제 |
$대상.removeClass('클래스이름1 클래스이름2 ~~') |
속성 다루기 |
|
속성값 구하기 |
$대상.attr('속성') $대상.data('data-속성') |
속성값 설정하기 |
$대상.attr('속성',값) $대상.data('data-속성이름',값) |
이벤트 다루기 |
|
일반 이벤트 등록 |
$대상.on('이벤트이름',리스너) |
단축 이벤트 등록 |
$대상.단축이벤트(리스너) |
등록한 이벤트 제거 |
$대상.off('click',리스너) $대상.off('click') $대상.off() |
이벤트 한번만 실행 |
$대상.one(이벤트,리스너) |
기본 행동 취소 |
이벤트객체.preventDefault() |
버블링 멈추기 |
이벤트객체.stopPropagation() |
버블링 활용. |
$대상.on('이벤트','선택자',리스너) |
'web > back + front' 카테고리의 다른 글
js deferred promise 비동기 처리 관련. (0) | 2017.02.15 |
---|---|
jquery 이벤트 흐름. (0) | 2017.02.12 |
js 정규식 관련. (0) | 2017.02.03 |
css selector관련. (0) | 2017.02.02 |
js 기본 지식2 (0) | 2017.01.31 |