[Class Attribute]
■ .addClass()
=> 선택된 element에 css 클래스를 추가
.addClass( className ) version 1.0
(예) $('p').addClass('myClass yourClass');
.addClass( function(index, class) ) version 1.4
- index 번째(0번부터), class : element의 현재 설정되어있는 class명
(예) $('ul li:last').addClass(function() { return 'item-' + $(this).index(); });
■ .hasClass()
=> 선택된 element의 class가 className 할당 되어있는지 유무를 확인 (return value= true / false)
.hasClass( className ) version 1.2
(예) $('#mydiv').hasClass('bar')
■ .removeClass()
=> 선택된 element에 css 클래스를 제거
.removeClass( [ className ] ) version 1.0
(예) $('p').removeClass('myClass noClass').addClass('yourClass');
.removeClass( function(index, class) ) version 1.4
- index 번째(0번부터), class : 이전 클래스명
(예) $('li:last').removeClass(function() { return $(this).prev().attr('class'); });
■ .toggleClass()
=> 선택된 Element의 css 클래스를 반복적으로 설정된 css 클래스를 설정/해제한다.
.toggleClass( className ) version 1.0
(예)
1) <div class="tumble">Some text.</div>
2) $('div.tumble').toggleClass('bounce'); 호출
3) <div class="tumble bounce">Some text.</div> // // bounce가 적용
4) $('div.tumble').toggleClass('bounce'); 호출
1) <div class="tumble">Some text.</div> // bounce가 해제
.toggleClass( className, switch ) version 1.3
- [switch]는 boolean값으로 조건값 true이면 토글형태로 동작한다.
(예) $('#foo').toggleClass(className, addOrRemove);
==
if (addOrRemove) {
$('#foo').addClass(className);
}
else {
$('#foo').removeClass(className);
}
.toggleClass( function(index, class), [ switch ] ) version 1.4
(예)
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar')) {
return 'happy';
} else {
return 'sad';
}
});
[Copying]
■ .clone( [ withDataAndEvents ] )
선택된 element의 element정보를 동일하게 복사
.toggleClass()
- Element만 동일하게 복사하고 이벤트 핸들러는 복사안함
.toggleClass(true)
- 만약에 click 등의 이벤트 핸들러가 연결된 Element라면 이벤트 핸들러도 같이 복사
[DOM Insertion, Around]
■ .wrap()
선택된 element를 부모 element(wrappingElement)의 자식 element로 포함시킨다.
.wrap( wrappingElement ) version 1.0
(예)
1) <div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
2) $('.inner').wrap('<div class="new" />'); 호출
3) <div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>
(예) $("p").wrap(document.createElement("div"));
.wrap( wrappingFunction ) == .wrap( function() {} ) version 1.4
(예) $('.inner').wrap(function() { return '<div class="' + $(this).text() + '" />'; });
■ .unwrap()
선택된 element의 부모 element를 제거한다.
.unwrap() version 1.4
(예) $("p").unwrap();
(예) http://api.jquery.com/unwrap/
■ .wrapAll( )
선택된 element 모두를 하나의 부모element(wrappingElement)의 자식 element로 포함한다.
.wrapAll( wrappingElement ) version 1.2
(예)
1) <div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
2) $('.inner').wrapAll('<div class="new" />'); 호출
3) <div class="container">
<div class="new">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
</div>
■ .wrapInner()
선택된 element의 content가 인자로 넘어온 element의 content로 포함되고 그 element는 선택된 element의 자식element로 포함
- .wrapInner( wrappingElement ) version 1.2
(예)
1) <div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
2) $('.inner').wrapInner('<div class="new" />'); 호출
3) <div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>
- .wrapInner( wrappingFunction ) version 1.4
(예)
1) <div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
2) $('.inner').wrapInner(function() { return '<div class="' + this.nodeValue + '" />'; }); 호출
3) <div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>
[DOM Insertion, Inside]
■ .append()
선택된 Element의 Content의 맨끝에 인자로넘어온 내용을 추가한다.
.append( content ) version 1.0
(예) $('.inner').append('<p>Test</p>'); // element를 추가
(예2) $('.container').append($('h2')); // $('h2')에 해당하는 요소를 추가하면서 원래의 h2 Element는 사라진다.(즉, 잘라내기->붙이기)
.append( function(index, html) ) version 1.4
- index : 0번째 부터 시작, html : 선택된 Element의 이전 Content
(예) $('.inner').append(function(index, html) { return '(' + index + ')'; }); // element를 추가
■ .appendTo()
선택된 element를 target에 해당하는 Element의 Content의 끝에 추가한다.(선택된 element가 기존에 존재하는 것이면 잘라내기->붙이기 형태가 된다.)
.appendTo( target ) version 1.0
(예) $('<p>Test</p>').appendTo('.inner'); // inner 클래스에 해당하는 Element의 content 마지막에 '<p>Test</p>'를 추가한다.
(예2) $('h2').appendTo($('.container')); // container 클래스에 해당하는 Element의 content 마지막에 h2요소에 해당하는 Element를 추가하고 원래의 h2 Element는 사라진다.(즉, 잘라내기->붙이기)
■ .html()
[getter]
선택된 Element의 html을 리턴한다.
.html() version 1.0
(예) $('div.demo-container').html();
[setter]
선택된 Element의 Content 내용을 변경한다.
.html( htmlString ) version 1.0
.html( function(index, oldhtml) {} ) version 1.4
■ .prepend()
선택된 Element의 Content의 가장 앞에 인자로넘어온 내용을 추가한다.
.prepend( content ) version 1.0
(예) $('.inner').prepend('<p>Test</p>'); // .inner css 클래스에 해당하는 element의 content 가장 앞에 '<p>Test</p>'를 추가한다.
.prepend( function(index, html) ) version 1.4
■ .prependTo()
선택된 element를 target에 해당하는 Element의 Content의 가장 앞에 추가한다.(.appendTo()와 반대)
.prependTo( target ) version 1.0
(예) $('<p>Test</p>').prependTo('.inner'); // inner 클래스에 해당하는 Element의 content 가장 앞에 '<p>Test</p>'를 추가한다.
(예2) $('h2').prependTo($('.container')); // container 클래스에 해당하는 Element의 content 가장 앞에 h2요소에 해당하는 Element를 추가하고 원래의 h2 Element는 사라진다.(즉, 잘라내기->붙이기)
■ .text()
[getter]
선택된 element의 content중 (html 태그정보를 제외한) text에 해당하는 값만 리턴한다.
.text() version 1.0
(예)
1) <div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
2) $('div.demo-container').text() == "Demonstration Box list item 1 list item 2"
[setter]
선택된 element의 content에 textString인자를 입력한다. 단 '<p>TEST</p>'와 같은 태그가 존재하면 <p>TEST</p> 처럼 입력된다.
.text( textString ) version 1.0
.text( function(index, text) {} ) version 1.4
[DOM Insertion, Outside]
■ .after()
선택된 element의 같은 레벨(형제노드)의 바로 다음 Element로 추가한다.
.after( content ) version 1.0
.after( function(index) ) version 1.4
(예) $('.inner').after('<p>Test</p>');
■ .before()
선택된 element의 같은 레벨(형제노드)의 바로 이전 Element로 추가한다.(contnent가 selector라면 잘라붙이기가 된다.)
.before( content ) version 1.0
(예) $('.inner').before('<p>Test</p>');
.before( function(index) ) version 1.4
■ .insertAfter()
- target 에 해당하는 element의 같은 레벨(형제노드)의 바로 다음에 $(selector)를 추가한다. (.appendTo()와 비슷)
- .insertAfter( target ) version 1.0
- (예) $('<p>Test</p>').insertAfter('.inner');
■ .insertBefore()
- target 에 해당하는 element의 같은 레벨(형제노드)의 바로 이전에 $(selector)를 추가한다. (.prependTo()와 비슷)
- .insertBefore( target ) version 1.0
- (예) $('<p>Test</p>').insertBefore('.inner');
[DOM Removal]
■ .detach( [ selector ] )
선택된 요소를 제거한다. (.remove()와 기능적으로 거의 동일하지만 선택된 요소의 이벤트 핸들러 정보등은 제거되지 않는다.)
.detach( [ selector ] ) version 1.4
(예) http://api.jquery.com/detach/
■ .empty()
선택된 element의 하위 Content를 삭제한다.
(예) <div class="hello">test</div> --> $('.hello').empty(); --> <div class="hello"/>
■ .remove()
선택된 element를 삭제한다.
.remove( [ selector ] ) version 1.0
- 인자로 selector가 들어갈 경우 선택된 요소의 또다른 조건이라고 생각하면 된다.
(예) $('.hello').remove(); // .hello 클래스가 있는 element를 삭제
(예) $('div').remove('.hello'); // div 요소에서 .hello 클래스가 있는 element를 삭제
[DOM Replacement]
■ .replaceAll( target )
target에 선택된 element를 찾아 $() 형태로 바꾼다. (.replaceWith() 함수와 selecor이냐 target이냐의 차이만 있다.)
.replaceAll( target ) version 1.2
(예) $('<h2>New heading</h2>').replaceAll('.inner'); // .inner 클래스에 해당하는 element를 '<h2>New heading</h2>' 으로 바꾼다.
■ .replaceWith()
선택된 element를 newContent로 바꾼다.
.replaceWith( newContent ) version 1.2
(예)
1) <div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
2) $('.second').replaceWith('<h2>New heading</h2>'); 호출
3) <div class="container">
<div class="inner first">Hello</div>
<h2>New heading</h2>
<div class="inner third">Goodbye</div>
</div>
.replaceWith( function ) version 1.4
[General Attributes]
■ .attr()
[getter]
선택된 element의 속성(attribute)의 값을 리턴한다.
.attr( attributeName ) version 1.0
[setter]
선택된 element의 속성(attribute)의 값(value)을 설정한다.
.attr( attributeName, value ) version 1.0
.attr( map ) version 1.0
(예) $('#greatphoto').attr( {alt: 'Beijing Brush Seller', title: 'photo by Kelly Clark'} ); // 인자를 json형태로
.attr( attributeName, function(index, attr) ) version 1.1
(예) $('#greatphoto').attr('title', function() { return this.alt + ' - photo by Kelly Clark' } );
■ .removeAttr()
선택된 element의 속성(attribute)을 삭제한다.
.removeAttr( attributeName ) version 1.0
(예) $(this).next().removeAttr("disabled");
■ .val()
[getter]
선택된 element의 value값을 리턴한다.
.val() version 1.0
form element(input, select 태그등)에서 사용된다.
(예)
function displayVals() {
var singleValues = $("#single").val(); // 단일값
var multipleValues = $("#multiple").val() || []; // 복수값
$("p").html("<b>Single:</b> " + singleValues + " <b>Multiple:</b> " + multipleValues.join(", "));
}
[setter]
- 선택된 element의 value값을 할당한다.
- .val( value ) version 1.0
- (예) $("#multiple").val(["Multiple2", "Multiple3"]);
- .val( function(index, value) ) version 1.4
- (예) $('input:text.items').val(function(index, value) { return value + ' ' + this.className; } );
[Style Properties]
jQuery CSS에서 참조
