jQuery 메서드 이벤트 정리

 

 

 

제이쿼리 메서드 이벤트 정리

※ append(), prepend(), appendTo(), prependTo(), after(), before(), insertAfter(), insertBefore()

$(A).append(B)  //A 뒤에 B 추가
$(A).prepend(B)  //A 앞에 B 추가
$(A).appendTo(B)  //A를 B 뒤에 추가
$(A).prependTo(B)  //A를 B 앞에 추가
$(A).after(B)  //A 뒤에 B 추가
$(A).before(B)  //A 앞에 B 추가
$(A).insertAfter(B)  //B 영역 다음에 A 추가
$(A).insertBefore(B)  //B 영역 앞에 A 추가

<div class="text">
   <span>테스트</span>
</div>


$(function(){
   $('<span>입니다</span>').insertAfter('.text > span');
   // 입니다를 .text 안 span 뒤에 추가
});


<div class="text">
   <span>테스트</span>
   <span>입니다</span>
</div>

 

 

 

※parent(), next(), prev(), closet(), siblings()

$(A).parent().removeClass(B)  //A의 부모 태그에 B클래스 제거
$(A).next().removeClass(B)  //A 다음 태그에 B클래스 제거
$(A).prev().removeClass(B)  //A 바로 전 태그에 B클래스 제거
$(A).closet('span').removeClass(B)  //A와 가장 가까운 span에 B클래스 제거
$(A).siblings().removeClass(B)  //A의 형제요소에 B클래스 제거

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>


$('li').click(function(){
   $(this).addClass('on').siblings().removeClass('on');
   // li를 클릭하면 클릭한 요소에 on 클래스를 추가하고 나머지 동급 li에는 on 클래스를 삭제 
});

 

 

 

※ addClass(), removeClass(), hasClass(),toggleClass()

$(A).addClass('B')  //A에 B클래스 추가
$(A).removeClass('B')  //A에 B클래스 삭제
$(A).hasClass('B')  //A가 B클래스를 가지고 있는지 확인 후, true/false 로 결과값 반환
$(A).toggleClass('B')  //A에 B클래스를 추가 삭제 토글

<div class="test"></div>
<div></div>


$(function(){
   $('.test').addClass('on');
   // test 클래스에 on 클래스 추가
});


<div class="test on"></div>
<div></div>

 

 

 

※ attr(), removeAttr()

$('img').attr('src', '../img/test.png'); //img의 src 속성을 ../img/test.png 바꾼다
$('img').removeAttr('src');  //img의 src 속성을 삭제

<img src="test01.jpg">
<img src="test01.jpg">
<div class="on">확인</div>


$('img:first').attr('src','img02.jpg');  //첫번째 이미지의 주소를 img02.jpg로 바꿈
$('.on').attr('class','active');  //on클래스 네임을 active로 클래스 네임을 바꿈


<img src="test02.jpg">
<img src="test01.jpg">
<div class="active">확인</div>

 

 

 

※ contents(), remove()

contents()  //선택된 개체 안에 모든 요소를 반환. contents 메서드는 filter 메서드와 조합해서 많이 쓰임
remove()  //메서드 삭제

<ul>
   <li></li>
   <li></li>
   <li>
      <ul>
         <li></li>
      </ul>
   </li>
</ul>


$('ul').find('li').contents().remove('ul');
//ul 하위 li 내에서 ul contents를 찾아서 모두 삭제


<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

 

 

 

※ click(), dbclick()

click()  //마우스 클릭 시 이벤트 발생
dbclick()  //마우스 더블 클릭 시 이벤트 발생

 

 

 

※ text(), html()

text() //해당 태그 내의 텍스트를 가져옴
html() //태그 자체를 다 가져옴

 

 

 

※ on(), off()

// on()으로 실행한 이벤트는 off()로 삭제 가능

$('.test').on(click, function(){}); // test클래스를 클릭하면 이벤트가 발생

키보드	input, keydown, keyup, keypress
마우스	click, dblclick, mouseup, mousedown, mouseover, mousemove, mouseout, hover
ui	focus, blur, change
form	submit, select, scroll
문서	ready, load, unload

 

 

 

※ change(), val()

<input type="text">
<span>@</span>
<input type="text" class="mail">

<select class="mailAdd">
   <option>naver.com</option>
   <option>gmail.com</option>
   <option>daun.net</option>
</select>


$('.mailAdd').change(function(){
test(this);  //셀렉트박스 선택이 바뀌면 "셀렉트박스 요소"를 함수로 생성
});
  

function test(){
   var value = $(':selected').val();  //value 변수는 선택된 섹렉트박스의 벨류값
   $('.mail').val(value);  //인풋박스 mail의 벨류값은 변수 벨류값
};

 

 

 

※ width(). height()

$('div').width(10);  //div 가로값에 10을 넣어라
$('div').height(10);  //div 세로값에 10을 넣어라

var width = $('div').width();  // 변수 width는 div의 가로값
var height= $('div').height();  // 변수 width는 div의 세로값

 

 

 

※ position()

var test = $('div').position();  //변수 test는 div의 위치값
var testTop = test.top;  //변수 testTop은 변수 test의 top값
var testRight = test.right;  //변수 testRight는 변수 test의 right값

 

 

 

※ offset()

// 위치값을 지정하거나 가져오는 메서드

span {margin-top: 20px;}


<span>안녕</span>
<span>잘가</span>


var test = $('span:last');
var offset = test.offset();
test.html(' top= ' + offset.top + ', bottom= ' + offset.bottom);


<span>안녕</span>
<span>잘가 top= 20px, bottom= 0</span>

 

 

 

※ not()

$('div').not('.off').addClass('on');  // div에 off클래스를 가진 div만 제외하고 on클래스를 추가

 

 

 

※ end()

//end() 메서드가 호출되면 바로 이전 상태로 돌아감


<ul>
   <li>01</li>
   <li>02</li>
</ul>


$('ul').find('li').addClass('test').end().addClass('good');
//ul 하위에서 li를 찾아서 test클래스를 추가하고 빠져나와서 good클래스를 추가


<ul class="good">
   <li class="test">01</li>
   <li class="test">02</li>
</ul>