제이쿼리의 다양한 속성과 메서드 기본
$Node.attr() 속성 값 구하기
$대상.attr(‘속성명’);
속성 값 설정하기
$대상.attr(‘속성명’, ‘값’);
예시)
$이미지노드.attr(‘src’, ‘이미지경로 변경 값’);
$링크노드.attr('href', '링크 변경 값');
$Node.length
length 속성을 이용하면 제이쿼리 객체 내부에 들어있는 노드 개수 를 구할 수 있습니다.
HTML에 태그를 구성해 놓고 특정 태그를 찾 는 태그는 아래와 같이 작성할 수 있습니다.
$(Node).length
$('div').length$Node.eq(index)
eq 메서드를 사용하면 찾은 노드의 n번째 노드로 접근할 수 있습니 다.
마치 CSS의 nth-child 및 nth-of-type을 이용하면 쉽습니다. 제이쿼리나 자바스크립트는 순서를 0부터 시작합니다.
$(Node).eq(index).제이쿼리 속성 및 메서드
$('div').eq(1)$(Node).get(index)
자바스크립트 DOM에 접근할 때 사용하는 메서드입니다. 주로 서버로부터 데이터를 가져올 때 사용하며 사용법은 eq와 같습 니다.
$(Node).get(index).자바스크립트 속성 및 메서드
$('div').get(0)
$(Node).each()
$대상에 들어있는 노드를 순차적으로 접근합니다. $(this) : this란 $대상에 들어있는 현재대상(DOM)을 의미합니다.
$(Node).each(function(){ 재사용문법 })
$(Node).filter(‘선택자’)
찾은 노드 중 특정 노드만을 걸러내고 싶을 때 filter 메서드를 사용합니다. filter 메서드가 찾는 대상은 오직 현재 찾은 노드이며 현재 찾은 노드 의 자식 또는 자손 그리고 부모 노드는 모두 관련이 없습니다.
$노드.filter(찾는 노드)
$('div').filter('.first')$(Node).find(‘선택자’)
찾은 노드의 자식(자손포함)노드 중 특정 노드를 찾고 싶을 때 사용합니다. find는 현재 노드가 아닌 현재 노드의 자식을 포함한 자손 노드를 검색하는데 사용합니다.
$노드.find(찾는 노드)
$('div').find('p')filter 메서드와 find 메서드의 차이점
- filter 는 현재 노드 중 특정 노드를 걸러내고 싶을 때(자식, 자손 제외)
- find 는 현재 노드의 자손 중 특정 노드를 찾고 싶을때 (현재 노드 제외)
$Node.not(선택자)
특정 선택자를 제외한 노드를 찾습니다.
$Node.not(선택자)
$('div').not(':eq(0)')
$('li').not(':odd')
$('li').not('.active')$Node.is(Node)
특정 노드 중 괄호 안 노드 존재 여부를 확인하여 true or false를 반환합니다.
$(Node).is(Node)
$('div').is('.container')
$Node.val()
input요소의 값을 확인합니다.
비교연산자를 추가하여 값의 true or false를 반환합니다.
//$(input요소).val() 비교연산자 비교값
$('input').val() == ''자식 노드
특정 노드(부모)의 아래에 위치하고 있는 노드를 말합니다.
//모든 자식 노드 찾기
$Node.children()
//특정 자식 노드 찾기
$대상.children(‘선택자’)
//첫번째 자식 노드 찾기
$Node.children().first()
$Node.children().eq(0)
$Node.children(‘:first’)
$Node.children(‘:eq(0)’)
//마지막 번째 자식 노드 찾기
$Node.children().last() $대상.children(‘:last’)
//n번째 자식 노드 찾기
$Node.children().eq(index) $대상.children(‘:eq(index)’)부모 노드
특정 노드를 감싸고 있는 바로 위의 상위 노드를 의미합니다. 조상노드는 특정 노드를 감싸고 있는 모든 노드를 의미합니다.
//부모노드찾기
$Node.parent()
//조상노드찾기
$Node.parents(‘선택자’)형제 노드
같은 라인에 있는 노드로 ul앆 li를 형제 노드라고 합니다.
//이전 형제 노드 찾기
$Node.prev()
$Node.prevAll(‘선택자’)
//다음 형제 노드 찾기
$Node.next()
$Node.nextAll(‘선택자’)노드 생성 및 추가 or 이동
//신규 노드 생성
$(‘신규DOM’);
//신규 노드를 자식노드로 추가
$부모Node.prepend($추가노드)
$추가Node.prependTo($부모노드)
//신규 노드를 마지막자식 위치로 추가
$부모Node.append($추가노드)
$부모Node.appendTo($부모노드)
//특정 노드를 이전 형제로 노드 추가하기
$추가Node.insertBefore($기준노드)
$기준Node.before($추가노드)
//특정 노드를 다음 형제로 노드 추가하기
$추가Node.insertAfter($기준노드)
$기준Node.after($추가노드)
추가노드방법과 이동노드 방법은 동일합니다.
노드 삭제
//특정 노드 삭제
$Node.remove()
//모든 자식 노드 삭제
$Node.children().remove()
//노드 내용을 문자열로 읽기
$Node.html()
$Node.text()
//노드 내용 수정하기
$Node.html('수정 내용')
//노드 내용 추가하기
$Node.html('추가 내용')
//노드 내용 제거하기
$Node.html("")