jQuery [Manipulation]
[General Attribute]
● .attr( attributeName) : 선택된 element의 속성(attribute)의 값을 리턴한다.
● .attr( attributeName, value) : 선택된 element의 속성(attribute)의 값을 설정한다.
● .attr( map) : $( "#greatphoto" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
});
//<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" title="photo by Kelly Clark">
● .attr( attributename, function(index, attr))
: $("#greatPhoto").attr('title', function(){
result this.alt + " - photo by kelly Clark"
});
// <img id="greatphoto" src="brush-seller.jpg" alt="brush seller" title="brush seller - photo by Kelly Clark">
● .removeAttr() : 선택된 element의 속성 (attribute)을 삭제한다.
- $(this).next().removeAttr("disabled");
● .val() : 선택된 element의 value값을 리턴한다.
var singleValues = $("#single").val(); //단일값
var multipleValues = $("#multiple").val() || [] //복수값
● .val(value) : 선택된 element의 value 값을 할당한다.
$("#multiple").val(["multi1","multi2"]);
● .val( function(index, value)
$("input:text.items").val(function(index,value){
return value + " " + this.className;
});
[DOM Insertion, Inside]
● .append() : 선택된 element 의 content 맨 끝에 인자로 넘어온 내용을 추가한다.
// element를 추가
$(".inner")append("<p>Test</p>");
// $("h2")에 해당하는 요소를 붙이면서 원래의 $("h2") element 는 사라짐.(cut > paste)
$(".container).append($("h2"));
● .appendTo(target) : 선택된 element를 target에 해당하는 Element의 content의 끝에 추가한다.
(선택된 element가 기존에 존재하는 것이면 (cut > paste)형태)
// inner 클래스에 해당하는 Element의 content 마지막에 '<p>Test</p>'를 추가한다.
$('<p>Test</p>').appendTo('inner');
//container 클래스에 해당하는 Element의 content 마지막에 H2요소에 해당하는 element 추가
$('H2').appendTo($('.container'));
● .prepend() : 선택된 element의 content 가장 앞에, 인자로 넘어온 내용을 추가한다. ( <!=>append)
// .inner 앞에 <p>Test</p> 추가한다.
$(".inner").prepend('<p>Test</p>);
● .prependTo(target) : 선택된 element를 target에 해당하는 element의 content의 가장 앞에 추가한다 (<!=> appendTo)
// inner 클래스에 해당하는 Element의 content 가장 앞에 '<p>Test</p>'를 추가한다.
$('<p>Test</p>').prependTo('inner');
//container 클래스에 해당하는 Element의 content 가장 앞에 H2요소에 해당하는 element 추가
$('H2').prependTo($('.container'));
● .html() : 선택된 Element의 html을 리턴한다.
- $("div.demo-container').html();
● .html( htmlString) : 선택된 element의 content 내용을 변경한다.
● .html( function(index, oldhtml){})
● .text() : 선택된 element의 contend중 (html 태그정보를 제외한 ) text에 해당하는 값만 리턴한다.
- $('div.container').text() (== "hello goodbye hello")
● .text( textString) : 선택된 element의 content에 textString인자를 입력한다. 단 '<p>Test</p>' 와 같은
태그가 존재하면 <p> Test </p> (이스케이프 시퀀스)처럼 입력한다.
[DOM Insertion, OutSide]
● .after() : 선택된 element의 같은 레벨(형제 노드)의 바로다음 element로 추가한다.
.after( content)
.after( function(index))
예) $('.inner').after('<p>Test</p>');
● .before() : 선택된 element의 같은 레벨(형제 노드)의 바로이전 element로 추가한다.
(*content가 selector라면 잘라붙이기가 된다.(move))
● .insertAfter() : target에 해당하는 element의 같은 레벨(형제노드)의 바로 다음에 $(selector) 를 추가한다.(appendTo 와 유사)
예) $('.<p>Test</p>).insertAfter('.inner');
● .insertBefore() : target에 해당하는 element의 같은 레벨(형제노드)의 바로 이전에 $(selector) 를 추가한다.(prependTo 와 유사)
예) $('.<p>Test</p>).insertAfter('.inner');
[DOM removal]
● .detach( [selector] ) : 선택된 요소를 제거한다.
(.remove()와 기능적으로 거의 동일하지만 선택된 요소의 이벤트 핸들러 정보등은 제거되지 않는다.(기억))
● .empty() : 선택된 element 의 하위 Content를 삭제한다.
예) 1. <div class="hello"> test </div>
2. $(".hello").empty();
= 3. <div class="hello" />
● .remove() : 선택된 element 를 삭제한다.
$(".hello").remove(); // hello 클래스가 있는 element 삭제
$("div").remove(".hello") // div요소에서 .hello 클래스가 있는 element를 삭제
[DOM Replacement]
● .repalceAll( target) : target에 선택도니 element를 찾아 $() 형태로 바꾼다.
(* replaceWith() 함수와 selector 냐 target 이냐의 차이만 있다.)
예) $("<h2> New heading</h2>").replaceAll(".inner"); // .inner 클래스에 해당하는 element를 "<h2> New heading</h2>" 로 변경
● .repalceWith() : 선택된 element를 newContent로 바꾼다.
.replaceWith( function)
예)
$(".second").replaceWith("<h2>New heading</h2>");
<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">and</div> --> <h2>New heading</h2> 변경
<div class="inner third">GoodBye</div>
</div>
[DOM Insertion, Around]
● .wrap() : 선택된 element를 부모 element(wrappingElement)의 자식 element로 포함시킨다.
예)
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$( ".inner" ).wrap( "<div class='new'> </div>" );
<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>
예)
$( ".inner" ).wrap(function() {
return "<div class='" + $( this ).text() + "'></div>";
});
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
● unwrap() : 선택된 element 의 부모 element를 제거한다.
예)
var pTags = $( "p" );
$( "button" ).click(function() {
if ( pTags.parent().is( "div" ) ) {
pTags.unwrap();
} else {
pTags.wrap( "<div></div>" );
}
});
● wrapAll() : 선택된 element 모두를 하나의 부모 element
(wrappingElement)의 자식 element로 포함한다.
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$( ".inner" ).wrapAll( "<div class='new' />");
<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로 포함.
(자식될 요소의 인자를 부모될 요소에 넣어주고 가져온 인자를 자식에 넣어줌.)
예1)
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$( ".inner" ).wrapInner( "<div class='new'></div>");
<div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>
예2)
$( ".inner" ).wrapInner(function() {
return "<div class='" + this.nodeValue + "'></div>";
});
<div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>
[Copying]
● .clone() : 선택된 요소 집합을 깊은 복사(deep copy:선택된 요소들의 모든 자식요소들과 텍스트 노드 포함)할 수 있는 기능을 합니다.
끼워넣기 위한 함수의 용도로 사용될 때, .clone() 함수는 페이지 상에 요소들을 복사하여 넣기에는 아주 편한 방법입니다
예) appendTo 와 비교
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
$('.hello').appendTo('.goodbye'); // 와 같이 스크립트를 작성하면 DOM 구조는 아래와 같이 바뀝니다. (* Move)
<div class="container">
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>
$('.hello').clone().appendTo('.goodbye'); // 와 같이 스크립트를 작성하면 DOM 구조는 아래와 같이 바뀝니다. (*Copy)
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>
● toggleClass() : element만 동일하게 복사하고 이벤트 핸들러는 복사안함.
● toggleClass(true) : 이벤트 핸들러가 연결된 element라면 이벤트 핸들로도 같이 복사.
'jQuery' 카테고리의 다른 글
제이쿼리 셀렉터 요약 (0) | 2014.02.04 |
---|---|
jQuery select box 제어 (0) | 2014.02.04 |
4.jQuery Events (0) | 2013.12.08 |
2.jQuery CSS (0) | 2013.12.06 |
1.jQuery Core [선택자] (0) | 2013.12.05 |