.addClass()
Jquery 1.4 부터, addClass() 메소드의 파라미터로 함수를 입력할 수 있다.
$( "ul li" ).addClass(function( index ) {
return "item-" + index;
});
두 개의 li 요소가 있다면, 첫번째 요소는 "item-0", 두번째 요소는 "item-1" 클래스가 된다.
예시
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
div {
background: white;
}
.red {
background: red;
}
.red.green {
background: green;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>This div should be white</div>
<div class="red">This div will be green because it now has the "green" and "red" classes.
It would be red if the addClass function failed.</div>
<div>This div should be white</div>
<p>There are zero green divs</p>
<script>
$( "div" ).addClass(function( index, currentClass ) {
var addedClass;
if ( currentClass === "red" ) {
addedClass = "green";
$( "p" ).text( "There is one green div" );
}
return addedClass;
});
</script>
</body>
</html>
.after()
.insertAfter() 메소드와 기능은 같으나 파라미터의 순서를 다르게 쓴다.
$(target).after(contentToBeInserted)
$(contentToBeInserted).insertAfter(target)
다음과 같이 DOM 엘리먼트를 인자로 사용할 수도 있다.
$( ".container" ).after( $( "h2" ) );또한 이렇게 타겟이 하나인 경우 $("h2") 는 복사되는 것이 아니라 옮겨지게 된다.
(타겟이 여러개인 경우는 복사된다)
.animate()
step 옵션.
애니메이션이 일어나는 중간에 다른 일을 추가할 때 사용한다.
$( "li" ).animate({
opacity: .5,
height: "50%"
}, {
step: function( now, fx ) {
var data = fx.elem.id + " " + fx.prop + ": " + now;
$( "body" ).append( "<div>" + data + "</div>" );
}
});인자로는 now, fx가 있고 이름은 상관없지만 순서는 지켜져야 한다.
다음은 fx 인자의 옵션값들이다.
| The object | ||
|---|---|---|
| Attribute | Type | Description |
| easing | String | 현재 애니메이션의 easing 설정값을 보여 준다. |
| elem | DOM Element | 현재 애니메이션의 대상요소. (jQuery 랩핑되지 않은 순수 DOM 요소) |
| end | Number | 애니메이션이 종료되는 시점의 값. |
| now | Number | 애니메이션이 재생 되는 동안의 현재의 값. |
| options | Object | 설정 한 옵션을 보여 준다. 단순히 처음 설정값에 대한 정보일 뿐이므로, 특정 조건을 주어 옵션을 변경하는 것은 불가능 하다. 예를 들어 if(now == 500) fx.options.easing = "swing" 하더라도 현재 애니메이션의 easing은 변하지 않음. |
| complete, duration, easing, queue, specialEasing, step등의 하위 속성을 가진다. fx.options.duration 이라고 하면 애니메이션 재생시에 옵션으로 설정했던 duration 값을 가지고 온다. |
||
| pos | Number | 가속시 사용되는 속도를 표시해 준다. 0~1 사이의 값이 나온다. 즉 처음부터 끝까지 갈 동안을 나누어 놓은 비율이 표시된다고 생각하면 된다. |
| prop | String | 현재 재생되는 css의 속성값을 보여준다. top 혹은 left 등. |
| start | Number | 애니메이션의 시작값을 보여준다. |
| unit | String | 애니메이션 재생의 단위를 보여준다. 예를들어 px, em 등이다. |
queue 옵션
다음과 같이 queue옵션에 false를 주면
애니메이션이 순차적으로 실행되지 않고 동시에 실행된다.
$( "#go1" ).click(function() {
$( "#block1" )
.animate({
width: "90%"
}, {
queue: false,
duration: 3000
})
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});위 경우, width가 90% 커짐과 동시에 폰트사이즈가 24px로 변한다.
이 애니메이션이 끝난 뒤 border 애니메이션이 시작된다.
.find()
해당 엘리먼트의 자식 엘리먼트중 일치하는 것을 찾음.
예시.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>find demo</title>
<style>
p {
font-size: 20px;
width: 200px;
color: blue;
font-weight: bold;
margin: 0 10px;
}
.hilite {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
When the day is short
find that which matters to you
or stop believing
</p>
<script>
var newText = $( "p" ).text().split( " " ).join( "</span> <span>" );
newText = "<span>" + newText + "</span>";
$( "p" )
.html( newText )
.find( "span" )
.hover(function() {
$( this ).addClass( "hilite" );
}, function() {
$( this ).removeClass( "hilite" );
})
.end()
.find( ":contains('t')" )
.css({
"font-style": "italic",
"font-weight": "bolder"
});
</script>
</body>
</html>
.on()
엘리먼트에 이벤트 핸들러를 붙여주는 메소드.
.bind() 메소드와 같은 기능을 하나, .on() 의 사용이 권장된다.
다음과 같이 데이터를 전달해줄 수도 있다.
function greet( event ) {
alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", { name: "Karl" }, greet );
$( "button" ).on( "click", { name: "Addy" }, greet );
위 경우엔 두 번의 alert창이 뜨게된다.
다음과 같은 경우엔 이벤트 버블링이 tr부터 tbody 까지만 올라가게 된다.
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
'Javascript , JQuery' 카테고리의 다른 글
| Jquery : Ajax로 아이디 중복체크 하기 (2) | 2017.07.10 |
|---|
