728x90
jQuery에서 전역 함수는 다음과 같이 생성합니다. javascript에서 단순 함수를 만들어 사용해도 되는 부분이지만 jQuery에서는 이렇게 사용하는 것도 가능하다는 것만 참고로 하면 될 것 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$.myfunc = function () {
$('img').animate({
opacity: 0.2
}, 'slow', function() {
alert('완료');
});
};
$(function () {
$.myfunc();
});
</script>
</head>
<body>
<img src="http://cliel.com/assets/img/item/home.png">
</body>
</html>$.[함수명]의 형태로 선언한 뒤에 원하는 함수를 구현하고 $.[함수명]의 형태로 호출합니다. 만약 함수를 호출하는데 선택자가 사용되어야 한다면 jQuery의 fn속성을 사용해야 합니다.
$.fn.myfunc = function () {
$(this).animate({
opacity: 0.2
}, 'slow', function() {
alert('완료');
});
};
$(function () {
$('img').myfunc();
});이때 this는 선택자에서 선택된 요소를 의미하며 함수를 호출할때는 $(선택자).[함수명] 형태로 호출해야 합니다.
생성한 전역함수에 특정한 값을 전달해야 한다면 원하는 값을 전달하는 객체를 지정해 다음과 같이 넘겨야 합니다.
$.fn.myfunc = function (param) {
$(this).animate({
opacity: 0.2
}, 'slow', function() {
alert('완료');
});
alert(param.myvalue);
};
$(function () {
$('img').myfunc({
myvalue: 'abc'
});
});객체가 존재하지 않는 경우 기본값을 지정해야 한다면 미리 객체를 정의해 둘 수 있습니다.
$.fn.myfunc = function (param) {
$(this).animate({
opacity: 0.2
}, 'slow', function() {
alert('완료');
});
var pr = { myvalue : 'def' };
$.extend(pr, param);
alert(pr.myvalue);
};하지만 미리 객체를 전달할지 하지 않을지 알 수 없으므로 이때는 param이 존재하는 경우 기존 객체의 값을 덮어쓸 수 있도록 $.extend를 사용합니다.
위와 같이 하면 함수를 호출할때 객체가 존재하면 해당 객체의 값을, 존재하지 않으면 기존 객체의 값을 사용하게 됩니다.
728x90
'Web > JQuery' 카테고리의 다른 글
| [jQuery] 쿠키(Cookies) (0) | 2020.07.06 |
|---|---|
| [Javascript / jQuery] Ajax (0) | 2020.06.30 |
| [jQuery] 효과 (0) | 2020.06.16 |
| [jQuery] 이벤트 다루기 (0) | 2020.06.11 |
| [jQuery] 요소 조작 메서드 (0) | 2020.06.07 |