addClass(클래스명)
removeClass(클래스명)
toggleClass(클래스명)
<script>
$(function(){
$('h1').addClass(function(i){
return 'color_'+i
})
})
</script>-> 모든 h1태그에 클래스 선택자가 추가되는데,
인덱스 i값에 따라 다른 클래스들이 설정된다
ex) 첫번째 h1태그(인덱스 0번에 위치한)는 color_0 클래스가 지정된다
filter 함수
is 함수
<script>
$(function(){
//(1)
$('h4:odd').css({backgroundColor:'Black',color:'White'})
//(2)
$('h4').filter(':odd').css({backgroundColor:'Black',color:'White'})
//(3)
$('h4').filter(function(i){
return i%2==1
}).css({backgroundColor:'Black',color:'White'})
})
</script>
-> 1~3번 모두 홀수번 태그에 관하여 스타일을 설정한다
$('h4').each(function(){
if($(this).is('.yellow')){
$(this).css('background','yellow')
}else{
$(this).css('background','green')
}
})-> h4태그 중 yellow클래스 선택자를 가진 태그에 관해 yellow배경색을 설정하고
그렇지 않다면 green배경색을 설정한다
[api.jquery.com]참조
.appendTo(target)-> target의 기존자식의 뒤에 추가
.prependTo(target)->target의 기존자식의 앞에 추가
.insertAfter(target)->target뒤에 추가
.insertBefore(target)->target앞에 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('<h1>Test1</h1>').appendTo('div') //(1)
$('<h1>Test2</h1>').prependTo('div') //(2)
$('<h1>Test3</h1>').insertAfter('div') //(3)
$('<h1>Test4</h1>').insertBefore('div') //(4)
$('img').attr('width',300).insertBefore('div')//이미지태그의 크기나 위치도 설정할 수 있다
})
</script>
</head>
<body>
<!-- (4)<h1>Test4</h1> -->
<div>
<!-- (2)<h1>Test2</h1> -->
<h1>hello</h1>
<!-- (1)<h1>Test1</h1> -->
</div>
<!-- (3)<h1>Test3</h1> -->
<h1>jquery</h1>
<img src="../cloud.jpg">
</body>
</html>
$(target).append(content) -> content를 target의 기존자식의 뒤에 추가할때 사용
$(target).prepend(content) -> content를 target의 기존자식의 앞에 추가할때 사용
$(target).after(content) -> content를 target뒤에 추가할때 사용(자식뒤에 추가하는게 아님)
$(target).before(content) -> content를 target앞에 추가할때 사용
* $(태그1~태그2) -> 태그1에 인접한 태그 중 태그2인 모든것
'jQuery' 카테고리의 다른 글
| [jQuery]bind함수, 태그에 이벤트 연결하기 (0) | 2021.03.08 |
|---|---|
| [jQuery]$.extend, $.each (0) | 2021.03.08 |
| [jQuery]setTimeout, setInterval, 태그의 인덱스 번호에 따라 구분하기 (0) | 2021.03.05 |
| [jQuery]중첩태그 구분하기, 같은 태그를 속성에 따라 구분하기 (0) | 2021.03.05 |
| [jQuery]이클립스 template 추가하기/ 제이쿼리 함수 attr, each, children, text, html, val (0) | 2021.03.05 |