Library/jQeury

jQuery - 메소드들 methods

청렴결백한 만능 재주꾼 2021. 2. 18. 06:37
반응형

.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