상세 컨텐츠

본문 제목

[jQuery] 전역함수

Web/JQuery

by 클리엘 클리엘 2020. 6. 17. 01:17

본문

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를 사용합니다.

 

위와 같이 하면 함수를 호출할때 객체가 존재하면 해당 객체의 값을, 존재하지 않으면 기존 객체의 값을 사용하게 됩니다.

 

'Web > JQuery' 카테고리의 다른 글

[jQuery] 쿠키(Cookies)  (0) 2020.07.06
[Javascript / jQuery] Ajax  (0) 2020.06.30
[jQuery] 전역함수  (0) 2020.06.17
[jQuery] 효과  (0) 2020.06.16
[jQuery] 이벤트 다루기  (0) 2020.06.11
[jQuery] 요소 조작 메서드  (0) 2020.06.07

관련글 더보기

댓글 영역