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); // 넘겨주는 인자 param이 있을 경우 기존 'def'값 덦어쓸 수 있도록 한다.
alert(pr.myvalue);
};
// 기본값 던질 경우 -> abc 적용됨
$(function () {
$('img').myfunc({
myvalue: 'abc' // 매개변수를 객체 형식으로 던짐 { , } -> 객체형식
});
});
// 기본값 안 던질 경우 -> 'def' 적용됨
$(function () {
$('img').myfunc();
});
하지만 미리 객체를 전달할지 하지 않을지 알 수 없으므로 이때는 param이 존재하는 경우 기존 객체의 값을 덮어쓸 수 있도록 $.extend를 사용합니다.
위와 같이 하면 함수를 호출할 때 '객체가 존재'하면 해당 객체의 값을, '존재하지 않으면' 기존 객체의 값을 사용하게 됩니다.
728x90
반응형
'📌 Front End > └ jQuery' 카테고리의 다른 글
| [jQuery] 변수앞에 달러를 붙이는 이유 (0) | 2023.03.10 |
|---|---|
| [jQuery] $.fn.extend({ }) vs $.extend({ }) 비교하기 (0) | 2023.03.10 |
| [jQuery] JQuery를 이용한 AJAX통신 (0) | 2023.03.10 |
| [JQuery] 이벤트 처리 방법(event binding) (0) | 2023.03.10 |
