jQuery / Reference / .appendTo()
개요
- .appendTo()는 선택한 요소를 다른 요소의 종료 태그 앞으로 이동시킵니다.
문법
.appendTo( target )
예제
- abc를 클래스 값으로 가지는 span 요소를 h1 요소의 </h1> 앞으로 이동시킵니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
body {
font-family: Consolas, monospace;
font-size: 16px;
}
.abc {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.7.1.js"></script>
<script>
$( document ).ready( function() {
$( 'span.abc' ).appendTo( 'h1' );
} );
</script>
</head>
<body>
<h1>Lorem Ipsum Dolor</h1>
<span class="abc">Consectetur elit.</span>
<p>Aenean nec mollis nulla.</p>
</body>
</html>
- 렌더링 결과는 다음과 같습니다.
<h1>Lorem Ipsum Dolor<span class="abc">Consectetur adipiscing elit.</span></h1> <p>Aenean nec mollis nulla.</p>
jQuery / Reference / :contains()
개요 :contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문법 $( ':contains( text )' ) 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다. 예를 들어 다음은 ab 문자열을 포함한 p 요소를 선택합니다. $( 'p:contains( "ab" )' ) 예제 jb를 포함한 p 요소를 선택해서 글자를 빨간색으로 만듭니다. 첫번째 문단은 jb가 없어서, 세번째 문단은 jb가 있지만 대문자여서 선택되지 않습니다. <!doctype html> <html ...
jQuery / Reference / .append()
개요 .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다. 문법 .append( content ) 예제 1 순서 없는 목록 마지막에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { line-height: ...
jQuery / Reference / .appendTo()
개요 .appendTo()는 선택한 요소를 다른 요소의 종료 태그 앞으로 이동시킵니다. 문법 .appendTo( target ) 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소의 </h1> 앞으로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { ...
jQuery / Reference / .toggleClass()
개요 .toggleClass()로 선택한 요소에 클래스 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 다음은 p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. $( 'p' ).toggleClass( 'xyz' ); 예제 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경색이 사라집니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Reference / .slideUp()
개요 .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...
jQuery / Reference / .prependTo()
개요 .prependTo()는 선택한 요소를 다른 요소의 시작 태그 뒤로 이동시킵니다. 문법 .prependTo( target ) 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소의 <h1> 뒤로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { ...
개요 .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 다음은 h1 요소의 하위 요소 중 span 요소를 선택합니다. $( 'h1' ).find( 'span' ) 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. <!doctype html> <html lang="ko"> <head> ...
개요 .width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다. 문법 1 .width() 선택한 요소의 가로 크기를 반환합니다. 예를 들어 다음은 p 요소의 가로 크기를 변수 jbVar에 저장합니다. var jbVar = $( 'p' ).width(); 문법 2 .width( value ) 선택한 요소의 가로 크기를 변경합니다. 예를 들어 다음은 h1 요소의 가로 크기를 100px로 만듭니다. $( 'h1' ).width( '100px' ); 예제 1 선택한 요소의 가로 ...
jQuery의 .each() 함수는 주로 배열, 객체, 또는 jQuery 선택자로 선택된 요소 집합에 대해 반복 작업을 수행하기 위해 사용됩니다. JavaScript의 for 또는 forEach 루프와 유사하지만, jQuery의 특성과 통합된 방식으로 작동합니다.
jQuery / Reference / .wrapAll()
개요 .wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다. 문법 .wrapAll( wrappingElement ) 예를 들어 다음은 모든 p 요소를 모아서 div 태그로 감쌉니다. $( 'p' ).wrap( '<div></div>' ); 예제 1 .wrap()은 선택한 요소에 각각 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div ...