- HTML은 정적이고 JavaScript는 동적이므로 HTML을 동적으로 다루기 위해 jQuery가 효과적
- jQuery를 통해 JavaScript에서 HTML 데이터를 다루기 좋음
- HTML과 JavaScript 간의 데이터 이동이 효과적임
0.
$. : 웹 전체, $el. : 현재 뷰 전체
1. .html()
- HTML 태그를 포함하여 선택한 요소 안의 내용을 가져옴
var jb = $( 'h1' ).html();<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
var jbHtml = $( 'div' ).html();
alert( jbHtml );
} );
</script>
</head>
<body>
<div>
<h1>Lorem ipsum dolor.</h1>
</div>
<div>
<h1>Aenean nec mollis.</h1>
</div>
</body>
<div>처럼 해당 태그가 여러개일 때는 맨 위 태그 하나만 변수에 담는다.$(document).ready(): html 문서가 다불러와지면 실행
2. .html( htmlString )
- 이전 내용을 지우고 새로운 내용을 넣음
$( 'div' ).html( '<h1>Lorem</h1>' );<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'div' ).html( '<p>Aenean nec mollis.</p>' );
} );
</script>
</head>
<body>
<div>
<h1>Lorem ipsum dolor.</h1>
</div>
<div>
<h1>Phasellus lacinia tempus.</h1>
</div>
</body>
3. .addClass()
- 문서 객체의 클래스 속성을 추가
- 여기서 클래스(class)는 HTML 태그 안에 들어가는 CSS를 말함
$( 'h1' ).addClass( 'abc' );
$( 'h1' ).addClass( 'ab cd ef' );- 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있음
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.bg { background-color: #eeeeee; }
.bd { border: 1px solid #666666; }
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'h1' ).addClass( 'bg' );
$( 'h2' ).addClass( 'bg bd' );
});
</script>
</head>
<body>
<h1>Lorem ipsum dolor.</h1>
<h2>Lorem ipsum dolor.</h2>
</body>
4. .removeClass()
- 문서 객체의 클래스 속성을 제거
$( 'h1' ).removeClass( 'abc' );
$( 'h1' ).removeClass( 'ab cd ef' );- 띄어쓰기로 구분하여 여러 개의 값을 제거할 수 있음
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
.bg { background-color: #eeeeee; }
.bd { border: 1px solid #666666; }
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'h1' ).removeClass( 'bg' );
$( 'h2' ).removeClass( 'bg bd' );
});
</script>
</head>
<body>
<h1 class="bg bd">Lorem ipsum dolor.</h1> <!-- bg 클래스만 제거 됨 -->
<h2 class="bg bd">Lorem ipsum dolor.</h2>
</body>
5. .attr()
- 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가함
$( 'div' ).attr( 'class' );- div 요소의 class 속성의 값을 가져옴
$( 'h1' ).attr( 'title', 'Hello' );- h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 설정
6. .removeAttr(name)
- 문서 객체의 속성을 제거 함
$('h1').removeAttr('data-index') // h1태그의 data-index 속성제거7. .css()
- .css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가
8. .text()
var jb = $( 'h1' ).text();- 선택한 'h1' 요소 안의 내용을 가져옵니다. 태그는 가져오지 않음
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
var jbText = $( 'div' ).text();
alert( jbText );
} );
</script>
</head>
<body>
<div>
<h1>Lorem ipsum dolor.</h1>
</div>
<div>
<h1>Aenean nec mollis.</h1>
</div>
</body>
- .html()와는 다르게
모든 <div>태그를 가져옴
$( 'div' ).text( '<h1>Lorem</h1>' );- div 요소의 내용을
<h1>Lorem</h1>로 바꾸고 HTML 태그는 텍스트로 처리함 (.html()은 태그를 반영함)
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'div' ).text( '<p>Aenean nec mollis.</p>' );
} );
</script>
</head>
<body>
<div>
<h1>Lorem ipsum dolor.</h1>
</div>
<div>
<h1>Phasellus lacinia tempus.</h1>
</div>
</body>
9. .remove()
- 선택한 요소를 HTML 문서에서 제거 (태그까지 모두 삭제)
$('h1').first().remove(); // 첫번쩨 h1 삭제10. .empty()
- 선택한 요소의 내용을 지움. 내용만 지울 뿐 태그는 남아있다는 것에 주의 (태그는 남김)
$('div').empty(); // div 자식 객체까지 삭제11. .$()
- 문서 객체를 생성함
$('<h1></h1>');
$('<h1></h1>').html('내용');
$('<h1></h1>').html('내용').appendTo('body'); // 태그와 내용을 body에 추가12. appendTo, append, prependTo, prepend
.$(a).appendTo(b) & .$(a).append(b) / .$(a).prependTo(b) & .$(a).prepend(b) $( target ).append( 추가할 내용);
$( 추가할 내용 ).appendTo( target );- 뒤에 추가
$( target ).prepend( 추가할 내용);
$( 추가할 내용 ).prependTo( target );- 앞에 추가
$( 'p' ).appendTo( 'blockquote' );- p 요소를 blockquote 요소 안으로 이동
$('img').first().appendTo('body');- 첫번째이미지를 body 안 맨뒤로 보냄
13. .$(a).insertAfter(b)
- a를 b의 뒤에 추가함. (태그 밖)
14. .$(a).insertBefore(b)
- a를 b의 앞에 추가함. (태그 밖)
$('#cool').insertBefore('#list');- '#'은 id를 의미 / '.'은 class를 의미
<div id="cool"></div> // jQuery에서 부를 때 #cool
<div class="hot"></div> // jQuery에서 부를 때 .hot15. .$(a).after(b)
$( 'h1' ).after( '<p>Hello</p>' );- h1 요소 뒤에 Hello를 내용으로 갖는 p 요소를 추가
$( 'h1.a' ).after( $( 'p.b' ) ); // .a : 클래스a, .b : 클래스b- 클래스 값으로 a를 갖는 h1 요소 뒤에 클래스 값으로 b를 갖는 p 요소를 이동
16. .$(a).before(b)
$( 'h1' ).before( '<p>Hello</p>' );- h1 요소 앞에 Hello를 내용으로 갖는 p 요소를 추가
$( 'h1.a' ).before( $( 'p.b' ) );- 클래스 값으로 a를 갖는 h1 요소 앞에 클래스 값으로 b를 갖는 p 요소를 이동
17. wrap, wrapAll
.$(a).wrapAll(b); / .$(a).wrap(b);$( 'p' ).wrap( '<div></div>' );- 모든 p 요소를 모아서 div 태그로 감쌈
18. .clone()
$( '.ab' ).clone().appendTo( 'h1' );- ab를 클래스 값으로 가지는 요소를 복제하여 h1 요소에 삽입
BE Developer