78.jQuery - 나만의 jQuery 만들기 (12.PlugIn )
jQuery.도메인명.플러그인명.js 식으로 명명
- 도메인명 : 작성자 아이디, 회사명 등등
| 01.Replace.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>새로운 함수를 만들기</title>
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
//나만의 jQuery 메서드 만들기
//넘겨온 값(jQuery 개체)을 새로운 HTML로 대체
$.fn.ReplaceWith2010 = function
(html) { return this.after(html).remove(); //넘겨온 HTML로 대체 후 기존 값 제거
};
$.fn.Exec = function(a,
b) { var
r = a + " * " + b + " =
"
+ (a * b); //계산식 문자열 생성 return this.empty().append(r); //지정된 개체의 내용을 비우고, 문자열 추가
}
$(document).ready(function()
{ $('#btn1').click(function() { $('#my').empty(); $('#my').append("<h3>반갑습니다</h3>"); }); $('#btn2').click(function() { //<div
id='my'>를 동적으로 다시 사용할 수 있게 추가 $('#my').ReplaceWith2010("<div id='my'><h3>또 만나요</h3>"); //이유는 ReplaceWith2010에서 remove를 사용해서 지워졌기 때문에 //다시 사용하고자 할때 위와 같은 방법을 사용 }); $('#calc').Exec(3,
5); //32번 라인에 "3 * 5 = 15"를 출력하는 함수 확장
});
</script> </head> <body>
<input type="button" id="btn1" value="값 변경" />
<input type="button" id="btn2" value="값 변경" />
<div id="my">
<h3>안녕하세요.</h3>
</div>
<div id="calc"></div> </body> </html> |
| 결과화면 |
[그림78-1] |
01.Replace.htm