안녕하세요. 신기한 연구소입니다.
jQuery를 처음 하는 분들이 궁금해하는 부분이 있습니다.
jQuery를 공부하면 $를 사용하는데요. 이전 포스팅에서 이야기했듯 $는 jQuery에서 사용하는 특수 기호입니다.
원래 jQuery("p").remove(); 로 사용하는데 단축표기로 $("p").remove(); 로 쓰면 됩니다.
훨씬 짧고 깔끔하네요. 이렇게 약속을 한거니 jQuery개발자라면 바로 이해하겠지요.
$() 사용 방법은 이전 포스팅을 참고하세요.
2021.03.01 - [Software/jQuery] - [ jQuery/javascript]jQuery 기본 사용법에 대해 알아봅니다.
[ jQuery/javascript]jQuery 기본 사용법에 대해 알아봅니다.
안녕하세요. 신기한 연구소입니다. 오랜만에 프로젝트에 투입되었는데 jQuery를 사용하네요. ㅎㅎ 사용한 지 오래되어서 기억이 가물거립니다. 복습도 할 겸 포스팅을 해봅니다. 사실 일하면서
tiboy.tistory.com
작성일을 보니 2년이 훌쩍 지나버렸네요. 게으른 개발자입니다.
사실 다른 프로젝트로 옮겨 다니다 보니 jQuery 사용을 하지 않아서 잠깐 관심을 못가졌던겁니다.
그런데 제목을 보면 $와 $()에 대한 이야기로 되어 있는데요. 둘이 같은 거 아닌가요?
우리가 보통 jQuery를 사용할 때는 $()를 사용합니다.
아래 remove() 같은 메서드들은 jQuery 객체에서 호출되는데 $.fn 네임스페이스 또는 jQuery prototype이라고 하는데 jQuery 객체 메서드로 이해하는 것이 좋겠네요.
$("p").remove();
그럼 $는 무엇일까요?
$.trim();
위 소스를 보면 $에 ()가 없습니다. 그리고 바로 메서드를 호출합니다.
$('p') 객체에 jQuery메서드인 remove()를 실행한다는 의미의 $()와는 다르게 $는 core jQuery methods(코어 jQuery 메서드) 즉, utility method를 호출할 때 사용한다고 생각하면 됩니다.
바로 $.trim() 같은 경우입니다.
jQuery는 $ namespace로 여러 유틸리티 메서드들을 제공하고 있습니다.
일반적인 유형의 프로그래밍을 할 때 유용하게 사용할 수 있습니다.
특정한 DOM 객체를 지정해서 jQuery 메서드를 작동시키는 것과 달리$ namesapce 방식은 일반적은 데이터를 가지고 활용할 수 있습니다.
$.trim()으로 간단한 예제를 만들어보겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<title>tiBoyTest</title>
<script src="js/jquery-3.7.0.min.js"></script>
</head>
<body>
<div id="test1">Test jQuery</div>
<script>
$(document).ready(function(){
var a = ' asdfdf ';
alert(a);
alert($.trim(a));
});
</script>
</body>
</html>
|
cs |
위 예제를 보면 변수 a에 앞 뒤로 공백을 넣은 문자열 리터럴 값을 할당했습니다.
그리고 alert(a)를 하면 공백이 포함된 값이 팝업으로 뜹니다.
alert 창이 뜨면 'asdfdf' 글자 위에 마우스 우클릭 후 전체 선택을 하면 공백이 포함되었음을 확인할 수 있어요.
두 번째 alert($.trim(a))은 $ namespace로 utility 메서드인 trim()을 호출했습니다.
특정 DOM 객체 없이 변수값으로 메서드를 실행했고 결과는 앞 뒤에 있는 공백이 사라지게 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<title>tiBoyTest</title>
<script src="js/jquery-3.7.0.min.js"></script>
</head>
<body>
<div id="test1">Test jQuery</div>
<script>
$(document).ready(function(){
debugger;
var myArray = [ 1, 2, 3, 4 ];
if ( $.inArray( 4, myArray ) !== -1 ) {
console.log( "값이 존재함." );
}
});
</script>
</body>
</html>
|
cs |
하나 더 예를 들어 봅니다.
$.inArray 는 배열 내 지정한 값이 있으면 해당 index를 리턴합니다. 만약 일치하는 값이 없으면 -1을 리턴합니다.
위 예제를 보면 배열 내 값 4가 존재하므로 콘솔에 '값이 존재함'을 출력합니다.
정리하면,
jQuery에서 $기호는 jQuery를 단축 기호를 의미합니다.
$()는 $.fn 으로 DOM 객체를 선택하고 그 객체에 jQuery 메서드를 실행할 수 있게 합니다.
반면, $ namespace는 jQuery 내 유틸리티 메서드 (코어 메서드)를 실행할 때 사용합니다.
우리는 이제 jQuery에서 $와 $()를 이해했고 구분해서 사용할 수 있게 되었습니다.
utility methods는 jQuery 사이트에서 확인해 볼 수 있습니다.
슬슬 재미있어집니다.
'Software > jQuery' 카테고리의 다른 글
| [ jQuery/javascript]jQuery 기본 사용법에 대해 알아봅니다. (1) | 2021.03.01 |
|---|
