traverse 필터 선택자 2– Miscellaneous 필터링
add(expr) : 기존 검색요소에 expr과 일치하는 검색요소를 추가.
- 주의할 점은 메서드명이 add이기 때문에, 새로운 요소가 기존 요소에 생성/추가 되는 것이 아니다.
- expr은 선택자 또는 html이 될 수 있다.
- $("div").add("p")는 $("div, p")와 동일하다고 볼 수 있다.
addBack(selector) : 필터링에 의한 결과 집합에 필터링 이전의 최초 대상이 되었던 요소를 포함시켜 반환.
contents() : 인자 없는 메서드로서 text를 포함한 모든 자식요소를 반환,.
- 일반적으로 .filter() 및 find() 메서드와 같이 주로 사용된다.
end() : 필터링 하기 전의 상태로 복귀가 가능한 메서드.
- jQuery는 '메서드체인’ 방식으로 한꺼번에 여러 메서드를 호출해서 특정 작
업을 연속 처리 할 수 있다.
traverse 필터 선택자 3– tree 필터링
children(Selector) : 선택된 요소에서 selector와 일치하는 모든 자식 요소를 반환.
selector 생략시 모든 자식 노드를 반환
find() : 자식+자손
closest() : 선택된 요소에서 selector와 일치하는 가장 가까운 조상요소를 1개 반환
- 반드시 0개 또는 1개를 반환
- 중첩 테이블일 경우 parent는 table 태그를 2개 반환한다. 이 때 closest를 사용하면 좋다.
parent() : 선택된 요소에서 selector와 일치하는 부모요소를 반환. 부모 요소가 여러개면 배열로 반환
parents() : 모든 조상 요소 반환. selector 생략시 html태그를 포함한 모든 조상 요소 반환.
next() : 선택된 요소에서 selector와 일치하는 다음 형제 요소를 반환. 만약 selector가 생략되면 바로 다음 형제 요소가 반환
nextAll() : 선택된 요소에서 selector와 일치하는 모든 다음 형제 요소를 반환. 만약 selector가 생량되면 모든 다음 형제 요소들을 반환.
prev() : selector에 해당하는 앞의 형제 요소. 생략시 바로 앞의 형제 요소.
prevAll() : selector에 해당하는 모든 앞의 형제 요소. 생략시 앞의 모든 형제 요소.
siblings() : selector에 해당하는 앞과 뒤의 모든 형제 요소 반환. 생략시 앞과 뒤의 모든 형제 요소 반환
자주 사용하는 것
children find parent filter
jQuery Attributes
jQuert 메서드를 사용하여 태그의 속성을 제어하는 방법이다.
jQuery Attributes
.toggleClass(className)
선택된 요소에 className에 해당되는 class 속성이 존재하면 제거하고, 존재하지 않으면 설정.
addClass()와 removeClass()를 번갈아 실행시키는 것과 동일한 효과.
해당 className에 적용되고있는 css style이 있으면 자동으로 적용 해제까지 함께 해준다.
.attr
.prop
위 둘의 차이?
jQuery Manipulation
jQuery Manipulation
<꼭 기억할 것>
append()
empty()
remove() 중요
append(content)
appendtTo(target)
prepend(content)
prependTo(target)
after(content)
insertAfter(target)
before(content)
insertBefore(target)
wrap(html)
wrapAll(html)
replaceWith(content)
replaceAll(content)
empty()
remove()(중요)
jQuery Utilities
jQuery Utilities
기본적으로 jQuery를 $로 축약하여 간편하게 사용할 수 있다.
jQuery.each() = $.each()
jQuery.each(object,function(idx, ele))
인자의 object는 순회할 원본데이터(배열/맵)가 들어간다.
콜백함수에서 return false; 할 경우에는 더 이상 순회하지 않는다.
$.each(s2, function(key, value){
console.log(key, value)
})아래는 반환값이 좀 다름. 알아만 두자
$(s2).each(function(key, value){
console.log(key, value)
})
jQuery.grep( array,function[,inverter])
- 입력된 배열형식을 함수에서 필터링 처리 후에 다시 배열로 반환시키는 메서드.
- 콜백함수는 function(값, 인자)형식이다.
(값과 인자값의 위치가 반대로 특이 케이스이다.) - inverter : true/false가 저장되며 기본값은 false다. 기능은 fuction기능을 역으로 실행할게 할 수 있다. (true인 경우 콜백함수의 return값이 반대로 false인 경우만 전부 반환된다.)
- 기본적으로는 콜백함수 return 값이 true일 경우에만 값이 반환된다.
$(document).ready(function(){
var s = ["A", "B", "C", "D"];
var arr = $.grep(s, function(data, idx){
return data=="B";
}, true);
console.log(arr);
});오늘 한 것 중에 잊지 말아야할 구문
find 자손
children 자식
empty 자식 자손 삭제
remove 선택한 항목 삭제
each 순회 콜백함수인자 순서는 idx, value
