반응형
.wrap
<script type="text/javascript">
$(document).ready(function(){
$('div').wrap('<div class="containerDIv"></div>');
});
</script>
셀렉터로 지정한거에 부모로 넣어주는 것
.append
<script type="text/javascript">
$(document).ready(function() {
$('div').append('<b> Tutorial</b>');
});
</script>
셀렉터로 지정한 곳에 내용 추가(안에 내용물이 있다면 끝에 내용 추가)
.prepend
<script type="text/javascript">
$(document).ready(function() {
$('div').prepend('<b> Tutorial</b>');
});
</script>
셀렉터로 지정한 곳에 내용 추가(내용물 맨앞에 추가함)
.appendTo
.prependTo
반대로 하면 됨
<script type="text/javascript">
$(document).ready(function() {
$('<b>Tutorial</b>').appendTo($('div'));
});
</script>
.before , .after
<script type="text/javascript">
$(document).ready(function() {
$('div').before('<b> Tutorial</b>');
});
</script>
before : 지정한 셀렉터(모든 div) 앞에 추가함.
after : 지정한 셀렉터 뒤에 추가함
.insertBefore , .insertAfter
<script type="text/javascript">
$(document).ready(function() {
$('<b> Tutorial</b>').insertBefore($('div'));
});
</script>
지정한 문구를 셀렉터 앞/뒤에 넣음
add or remove class
hasClass | 만약 클래스를 가지고 있으면 true를 리턴한다. |
addClass | 하나의 클래스를 추가하거나 그 이상의 지정한 클래스를 추가한다. 스페이스로 구분하여 여러 클래스를 추가할 수 있다. |
removeClass | 하나 이상의 클래스를 제거한다. 여러개의 클래스를 제거할 때 스페이스로 구분하여 제거 가능하고 모든 클래스를 제거할 때는 클래스를 지정할 필요가 없다. |
toggleClass | 하나 이상의 지정된 클래스를 토글한다. 만약 지정된 클래스가 있으면 제거되고 없으면 추가 된다. |
.each() , $.each() method
.each() 는 앞에 html의 무언가가 붙는다.
예) $('li').each(function (index, element) {})
'li'엘레멘트에 속한 애들을 순회하게 된다.
$.each() 같은 경우는 순회할 리스트를 안에서 지정해준다.
예)
$.each(obj name, function(index, element){})
이런식으로 접근
.map() method
<script type="text/javascript">
$(document).ready(function (){
alert($('li').map(function (index, element) {
return $(element).text();
}).get().join('|'));
});
$.map | $.each |
반복 연산자이다. | immutable 반복연산자이다. |
새로운 어레이를 리턴한다. | 기존의 어레이를 리턴한다. |
콜백 arguments의 순서 - element, index | 콜백 arguments의 순서 - index, element |
반복을 중간에 종료 못함 | 조건을 걸고 리턴 false를 설정할 경우 반복문이 break가 된다. |
반응형
'Library > jQeury' 카테고리의 다른 글
jQuery - preventdefault (0) | 2021.02.24 |
---|---|
jQuery 배우면서 끄적인 코드 (0) | 2021.02.24 |
jQuery - jQuery 제이 쿼리란 ? (0) | 2021.02.11 |
jQuery - ajax 란? (0) | 2021.01.28 |
jQuery - 선택자 Selector (0) | 2021.01.27 |