jQuery 객체에 사용자 정의 메소드를 추가하여 사용하는 방법
$.fn
우리는 다음과 같이 jQuery를 통해 미리 제작된 다양한 메소드를 간편하게 사용하고 있었다.
$("button").eq(0).text("첫 번째 버튼");
이렇게 jQuery.Selector를 이용하는 메소드를 추가하려면 $.fn.메소드명을 통해 추가하면 된다.
다음 소스코드는 서버에서 특정 문자열이 XSS 필터링되어 변환된 문자열을 다시 복원하는 메소드의 예시이다.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
$.fn.HTMLTagRestore = function() {
var value = this.val();
if(this.is("input") || this.is("textarea")) {
this.val(
value.replaceAll('& lt;', '<')
.replaceAll('& gt;', '>')
);
}
return this;
}
</script>
</body>
</html>
(& 문자열 다음의 띄어쓰기는 티스토리에서 자동으로 치환하여 의도된 띄어쓰기이다.)
보는 바와 같이 input 또는 textarea 태그일 경우 해당 기능을 수행한다.
메소드 바디안에 this 키워드가 가리키는 부분은 $("셀렉터")를 통해 들어온 jQuery Object를 뜻한다.
그래서 this 키워드를 통해 jQuery 메소드를 사용할 수 있으며
맨 마지막에 return this;를 통하여 최종적으로 리턴하게 된다.
리턴을 적지 않을 경우 다음과 같이 jQuery 메소드를 이어서 호출할 수 없다.
$("input").HTMLTagRestore().show();
$.fn의 최종ㅇ목적은 셀렉터를 이용할 수 있는 확장 메소드를 구현하는 것이다.
추가로 셀렉터를 이용하지 않는 $.ajax와 같은 메소드의 구현은 다음과 같다.
$.HTMLTagRestore = function() {
$("input, textarea").each(function() {
var value = $(this).val();
$(this).val(
value.replaceAll('& lt;', '<')
.replaceAll('& lt;', '<')
);
});
};$.fn.메소드명이 아닌 $.메소드명으로 정의하면 된다.
이 경우 $.HTMLTagRestoreAll(); 과 같이 사용할 수 있다.
출처:
'제이쿼리' 카테고리의 다른 글
| $.map() (0) | 2020.12.06 |
|---|---|
| jquery 분석 (0) | 2020.11.20 |
| .val()에 대해 (0) | 2020.10.15 |
| [제이쿼리] 가장 가까운 상위 요소 선택자 (0) | 2020.10.04 |
| [제이쿼리] 상위 요소 선택자 (0) | 2020.10.04 |
