728x90
반응형
1. 선택자 (Selector)
1. 기본 선택자
선택자 | 기능 |
태그 | HTML 태그로 선택 |
.class | 클래스 속성을 가지는 태그 선택 |
#id | id속성을 가지고 있는 태그 선택 |
* | 모든 태그 선택 |
2. 속성 선택자
선택자 | 사용법 | 기능 |
$("요소 선택[속성]") | $("li[tktle]") | 요소 중 속성이 포함된 요소만 선택 |
$("요소 선택[속성=값]") | $("li[title='list']") | 요소 중 속성이 값인 요소만 선택 |
$("요소 선택[속성^=텍스트]") | $("a[href^='http://']") | 요소 중 속성이 텍스트로 시작하는 요소만 선택 |
$("요소 선택[속성$=텍스트]") | $("a[href$='.com']") | 요소 중 속성이 텍스트로 끝나는 요소만 선택 |
$("요소 선택[속성*=텍스트]") | $("a[href*='easy']") | 요소 중 속성이 텍스트를 포함하는 요소만 선택 |
$("요소 선택:hidden") | $("li:hidden") | 요소 중 숨겨져 있는 것만 선택 |
$("요소 선택:visible") | $("li:visible") | 요소 중 보이는 것만 선택 |
$(":text") | $(":text") | input 요소 중 type 속성값이 "text"인 것만 선택 |
$(":selected") | $(":selected") | selected 속성이 적용된 요소만 선택 |
$(":checked") | $(":checked") | checked 속성이 적용된 요소만 선택 |
3. 기본 필터 선택자
산텍자 | 사용법 | 기능 |
:animated | $(":animated") | show, hide, slideDown, slideUp 등으로 현재 애니메이션되고 있는 태그를 선택 |
:eq(index) | $("td:eq(넘버)") | 넘버 번호를 이용하여 선택 |
:gt(index) | $("td:gt(넘버)") | 넘버보다 큰 인덱스를 가지고 있는 태그 선택 |
:lt(index) | $("td:lt(넘버)") | 넘버보다 작은 인덱스를 가지고 있는 태그 선택 |
:header | $(":header") | h1, h2, h3와 같은 제목요소를 선택 |
:first | $("td:first") | 첫 번째 요소를 선택 |
:last | $("td:last") | 마지막 요소를 찾아 선택 |
:odd | $("td:odd") | index를 기준으로 홀수를 선택 |
:even | $("td:even") | index를 기준으로 짝수를 선택 |
:not() | $("input:not(:checked)") | 현재 선택한 집합의 반대를 선택 |
4. 내용 필터 선택자
선택자 | 사용법 | 기능 |
:contains() | $("li:contains('ab')") | li에 ab 문자열을 가진 객체 선택 |
:empty | $("li:empty").text("Hello World") | li 빈 요소에 Hello World를 넣기 |
:has() | $("ul:has(li)") | ul에서 li 가진 객체 선택 |
:parent | $("li:parent") | li의 부모요소 선택 |
5. 자식 요소 필터 선택자
선택자 | 기능 |
:first-child | 첫번째 자식을 선택 |
:last-child | 마지막 자식을 선택 |
:nth-child(index) | 인덱스 번째의 자식을 선택 |
:nth-child(even) | 짝수 자식을 선택 |
:nth-child(odd) | 홀수 자식을 선택 |
:nth-child(Nn) | N 배수에 위치한 자식 선택 |
2. 탐색 (Traversing)
매서드 | 설명 |
children() | 자식 레벨에서만 찾아서 선택 |
find() | 자손 태그들 중에서 모두 선택 |
next() | 선택한 노드의 다음 선택 |
nextAll() | 선택한 노드의 다음 모두 선택 |
parent() | 노드의 부모를 선택 |
parents() | 노드의 모든 부모 선택 |
prev() | 선택한 노드의 이전 선택 |
prevAll() | 선택한 노드의 이전 모두 선택 |
closest() | 선택한 노드를 포함하면서 가장 가까운 상위 노드를 선택 |
siblings() | 태그의 형제 노드를 선택 (본인은 제외) |
3. DOM 변경 (Dom Manipulation)
append() | $("div").append("<p>Nice to meet you</p>"); | 선택된 요소 내부 가장 뒤에 자식 추가 |
appendTo(target) | $("<p>Nice to meet you</p>").appendTo("div"); | |
prepend() | $("div").prepend("<p>Nice to meet you</p>"); | 선택된 요소 내부 가장 앞에 자식 추가 |
prependTo(target) | $("<p>Nice to meet you</p>").prependTo("div"); | |
html() |
var htmlString = $("#intro").html(); | 선택된 내부 요소들을 HTML문자열로 변환 |
$("#main").html(htmlString) | 문자열이 전달되면 그 요소에 HTML을 추가 | |
text() |
var textString = $("#intro").text(); | 요소의 텍스트 저장 |
$("#main").text(textString) | 새로운 텍스트 추가 | |
after() | 선택된 노드 뒤에 새로운 노드 추가 (형제 관계) | |
before() | 선택된 노드 앞에 새로운 노드 추가 (형제 관계) | |
detach() | remove와 기능은 같지만 제거된 노드를 임시 보관 가능, 추후에 다시 사용 가능 | |
empty() | 선택된 노드의 자식/자손 모두 제거 (선택된 객체는 삭제되지 않음) | |
remove() | 선택된 노드를 DOM에서 제거 (관련 이벤트와 jQuery 모두 삭제) |
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
객체에 직접 이벤트를 등록 | #('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 이벤트에 핸들러를 바인딩하고, 클릭할 때마다 함수들을 차례로 실행 |
※ 공부한다고 예전에 서치하다가 봤던 내용 적어놓았던 건데 어떤 블로그였는지 기억이 안나네요 ㅠ_ㅠ)
좀 더 자세한 예제와 내용을 보고싶으신 분들은 하단에 사이트에서 검색하면서 테스트를 해보시기 바랍니다.
728x90
반응형
'공부 > jQuery' 카테고리의 다른 글
제이쿼리 슬라이드 배너 (ulslide) (0) | 2021.09.26 |
---|---|
제이쿼리 달력 달기 (datepicker) (0) | 2021.09.26 |
제이쿼리 레이어 팝업 (bpopup) (0) | 2021.09.26 |
jQuery 자식요소 내 요소 선택 (0) | 2015.12.07 |
jQuery 기본 구조 (작성법) (0) | 2015.10.23 |