Jquery[제이쿼리] wrap()메서드 배우기

안녕하세요~ 제이쿼리공장장 주니주니 입니다.

오늘은 제이쿼리[jquery] wrap()메서드를 배워보겠습니다.

이렇게 준비해보았습니다.

실행화면입니다.

=============================== 
$('.b1').on('click',function(){
   $('p').wrap('<b></b>');
  });
=============================== 
class b1가 click되면 <== wrap('<b></b>')버튼입니다.
<p>태그 대상으로 wrap()메서드를 실행합니다.

※wrap()란 선택한대상에다가 사용자가 입력한것을 감싸는 메서드입니다.
형식은 wrap( wrappingElement ) / wrap(function) 으로 구성되어있습니다.
wrappingElement 에는 감쌀요소를 적어주시면된답니다.
function 에는 기능을 적어주시면된답니다.

이해가 안되는 분들은 ↓↓↓↓↓↓
http://api.jquery.com/wrap/

wrap('<b></b>')버튼을 클릭한뒤의 모습입니다.

=============================== 
$('.b2').on('click',function(){
   var a=['blue','green','red'];
   $('p').wrap(function(i){
    $(this).css('color',a[i]);
    return "<li></li>";
   });
  });
=============================== 
class b2가 click되면 <== wrap(function())버튼입니다.
a라는 배열변수에 'blue','green','red'라는 값을 저장하고
a배열변수의 값으로
인덱스0번째 <p>태그의 css color를 blue로
인덱스1번째 <p>태그의css color를 green로
인덱스2번째 <p>태그의css color를 red로
변경하고 return 값에다가 "<li></li>"을주어
<p>태그에다가 <li>태그를 감싸도록 하였습니다.

wrap(function())버튼을 클릭한뒤의 모습입니다.

wrap('<b></b>')버튼, wrap(function())버튼을 클릭한뒤의 모습입니다.

오늘은 제이쿼리[jquery] wrap()메서드를 배워보았습니다.
그럼 다음에 또만나요.