고정 헤더 영역
상세 컨텐츠
본문
반응형
1. 선택자 (Selector)
1. 기본 선택자
선택자 | 기능 |
태그 | HTML 태그로 선택 |
.class | 클래스 속성을 가지는 태그 선택 |
#id | id속성을 가지고 있는 태그 선택 |
그룹 | 여러 선택자를 한번에 선택 |
* | 모든 태그 선택 |
2. 속성 선택자
선택자 | 기능 |
[name="value"], [name!="value"] | 태그의 name 속성값과 "value"가 일치(일치하지않는)하는 요소만 찾아 선택 |
[name^="value"] | "value"에 해당하는 문자가 시작 부분에 포함되어 있는지 확인 후 선택 |
[name$="value"] | "value"에 해당하는 문자가 속성의 끝에 있는지 확인후 선택 |
[name*="value"] | "value"값이 위치와 상관없이 포함되어 있으면 선택 |
[name="value"][name2="value2"] | 여러 필터를 사용하여 선택 범위를 선택 |
3. 기본 필터 선택자
산텍자 | 기능 |
:animated | show, hide, slideDown, slideUp 등으로 현재 애니메이션되고 있는 태그를 선택 |
:eq(index) | 인덱스 번호를 이용하여 선택 |
:gt(index) | 인덱스보다 큰 인덱스를 가지고 있는 태그 선택 |
:lt(index) | 인덱스보다 작은 인덱스를 가지고 있는 태그 선택 |
:header | h1, h2, h3와 같은 제목요소를 선택 |
:first | 첫 번째 요소를 선택 (DOM에서 모든 li를 선택한 후 그 중 첫 번째를 선택) |
:last | 마지막 요소를 찾아 선택 |
:odd | index를 기준으로 홀수를 선택 |
:even | index를 기준으로 짝수를 선택 |
:not() | 현재 선택한 집합의 반대를 선택 |
4. 내용 필터 선택자
선택자 | 기능 |
:contains() | $("li:contains('ab')") |
:empty | $("li:empty").text("Hello World") |
:has() | $("ul:has(li)") |
:parent | $("li:parent") 요소에 텍스트가 존재할 때에 선택 |
5. 자식 요소 필터 선택자
선택자 | 기능 |
:first-child | 같은 부모를 가지는 li를 따로 관리하여 각 부모의 첫번째 자식을 선택 |
:last-child | 같은 부모를 가지는 li를 따로 관리하여 각 부모의 마지막 자식을 선택 |
:nth-child(index), nth-child(even), nth-child(odd), nth-child(Nn) |
|
2. 탐색 (Traversing)
1. 트리구조 탐색
매서드 | 설명 |
children() | 자식 레벨에서만 찾아서 선택 |
find() | 자손 태그들 중에서 모두 선택 |
next() | 선택한 노드의 다음 선택 |
nextAll() | 선택한 노드의 다음 모두 선택 |
parent() | 노드의 부모를 선택 |
parents() | 노드의 모든 부모 선택 |
prev() | 선택한 노드의 이전 선택 |
prevAll() | 선택한 노드의 이전 모두 선택 |
closest() | 선택한 노드를 포함하면서 가장 가까운 상위 노드를 선택 |
nextUntill() | - |
parentsUntill() | - |
prevUntill() | - |
siblings() | 태그의 형제 노드를 선택 (본인은 제외) |
3. DOM 변경 (Dom Manipulation)
append() | $("div").append("<p>Nice to meet you</p>"); 선택된 요소 내부 가장 뒤에 자식 추가 |
appendTo(target) | - |
prepend() | $("div").prepend("<p>Nice to meet you</p>"); 선택된 요소 내부 가장 앞에 자식 추가 |
prependTo(target) | - |
html() | var htmlString = $("#intro").html(); 선택된 내부 요소들을 HTML문자열로 변환 $("#main").html(htmlString) 문자열이 전달되면 그 요소에 HTML을 추가 |
text() | var textString = $("#intro").text(); 요소의 텍스트 저장 $("#main").text(textString) 새로운 텍스트 추가 |
after() | 선택된 노드 뒤에 새로운 노드 추가 (형제 관계) |
before() | 선택된 노드 앞에 새로운 노드 추가 (형제 관계) |
insertAfter(target) | - |
insertBefore(target) | - |
wrap() | - |
wrapAll() | - |
wrapInner() | - |
detach() | remove와 기능은 같지만 제거된 노드를 임시 보관 가능, 추후에 다시 사용 가능 |
empty() | 선택된 노드의 자식/자손 모두 제거 (선택된 객체는 삭제되지 않음) |
remove() | 선택된 노드를 DOM에서 제거 (관련 이벤트와 jQuery 모두 삭제) |
unwrap() | - |
replaceAll() | - |
replaceWith() | - |
clone() | - |
4. CSS 스타일링
.addClass() | 특정한 클래스를 노드에 추가할 수 있다 |
.css() | $("div").css("width"); 요소 가로폭의 크기 px값을 반환 $("div").css('color', '#f00') 특정 객체의 속성 값 변환도 가능 $("div").css({'background-color':'#ddd', 'color':'#f00'}); {}사용시 여러개 가능 |
.hasClass() | 특정한 클래스가 있는지 찾을 수 있음 |
.removeClass() | $('p').removeClass('classA classB classC'); 여러개 클래스를 제거할 수 있다 $('p').removeClass('classA').addClass('classB'); 제거, 추가 동시에 사용가능 |
.toggleClass() | 특정한 클래스의 추가, 제거를 한번에 처리 가능 |
5. Events
jQuery 이벤트 처리 방식 2가지
객체에 직접 이벤트를 등록 | #('div').click(sum); |
bind 메서드(함수)를 이용하여 등록 | #('div').bind("click", sum); #('div').bind('mouseenter mouseleave', 함수) |
이벤트 제거 | #('#obj').unbind("click"); click 이벤트를 제거 #('#obj').unbind(); 객체에 모든 이벤트를 제거 |
| |
이벤트 | 설명 |
click | 노드를 마우스 포인터로 눌렀다가 떼었을 때 발생 |
dblclick | 노드를 더블클릭 했을때 발생 |
hover | mouseenter 와 mouseleave 이벤트를 한번에 사용 |
mousedown | 노드 영역에서 마우스를 눌렀다가 떼었을 때 발생 |
mouseenter | 노드에 마우스가 진입했을 때 발생 |
mouseleave | 노드에 마우스가 나갔을 때 발생 |
mousemove | 노드 영역에서 마우스가 움직일 때 발생 |
mouseout | 노드에서 마우스 포인터가 떠났을 때 발생 |
mouseover | 노드 영역에 마우슷 올려놓았을 때 발생 |
mouseup | 마우스 포인터를 노드에 올려놓고 마우스 버튼을 눌렀을 때 발생 |
toggle | click 이벤트에 핸들러를 바인딩하고, 클릭할 때마다 함수들을 차례로 실행 |
자바스크립트 선택자
자바스크립트의 선택자를 배우기전 먼저 이해할 부분이
바로 DOM (Document Object Model)부분 입니다.
이 DOM 구조는 결국 웹상에서 보이는 HTML을 포함한 화면
전부를 말합니다.
그리고 이 DOM을 구성하는 요소들이 있는데
요소노드, 텍스트노드, 속성노드 등이 있습니다.
요소노드는 <body>, <p>, <ul> 같은 일반적인 태그를 말합니다.
텍스트 노드는 요소노드 안에 들어있는 텍스트들을 말합니다.
document.getElementById('id');
document.getElementsByName('name');
document.getElementsByTagName('name');
document.getElementsByClassName('name');
getAttribute(''attr);
<제이쿼리와 웹표준에 대한 간단한 팁을 알려드립니다>
[출처] 제이쿼리 강좌 _ 선택자 (jQuery Selector) 입문 강의|작성자 F2F
반응형
'JavaScript & HTML' 카테고리의 다른 글
| 날짜 검색 범위 정하기 (jquery) (0) | 2015.09.10 |
|---|---|
| 웹 학습 (0) | 2015.08.31 |
| jquery 엔터 키 이벤트 (jquery, keydown) (0) | 2015.08.07 |
| 이미지 클릭 손 (cursor:pointer) (0) | 2015.08.05 |
| html 테이블 고정 (table fixed) (0) | 2015.08.04 |
댓글 영역