클리엘
CLIEL LAB
클리엘
전체 방문자
오늘
어제
  • 분류 전체보기 (513)
    • Mobile (47)
      • Kotlin (47)
    • Web (84)
      • NestJS (9)
      • HTML5 & CSS3 (38)
      • Javascript (20)
      • TypeScript (6)
      • JQuery (11)
    • .NET (300)
      • C# (83)
      • ASP.NET (67)
      • Windows API for .NET (128)
    • Server (53)
      • SQL Server (10)
      • MariaDB (18)
      • Windows Server (6)
      • node.js (19)
    • System (12)
      • 작업LOG (12)
    • Review (11)
    • ETC (6)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 블로그 정리

인기 글

태그

  • CSS3
  • android studio
  • asp.net core
  • 변수
  • MariaDB
  • ASP.NET
  • exception
  • JavaScript
  • jQuery
  • HTML5
  • Kotlin
  • c#
  • Entity Framework
  • NestJS
  • Windows API
  • LINQ
  • asp.net core web api
  • .NET
  • android
  • node.js

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
클리엘
Web/JQuery

[jQuery] 전역함수

Web/JQuery

[jQuery] 전역함수

2020. 6. 17. 01:17
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
    'Web/JQuery' 카테고리의 다른 글
    • [jQuery] 쿠키(Cookies)
    • [Javascript / jQuery] Ajax
    • [jQuery] 효과
    • [jQuery] 이벤트 다루기
    클리엘
    클리엘
    누구냐 넌?

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.