웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > angularjs

jQLite, 작은 jQuery라고도 하는 이 안에 수행 가능한 것들은 무엇인가요?

Last Modified : 2017-09-21 / Created : 2017-03-31
2,822
View Count
jQLite 작은 jQuery라고도 하는 이 안에 수행 가능한 것들은 무엇인가요?

AngularJS에는 jQLite가 포함되어 있습니다. 이 덕분에 angularJS를 사용하면서도 jQuery의 파워풀한 기능을 일부 사용할 수 있죠. 하지만 jQuery가 지원하는 모든 기능을 지원하는 것은 아니죠.

만약 jQuery를 사용하길 원하는 경우 jQLite는 자동으로 동작하지 않으므로 걱정하지 않아도 됩니다. 하지만 두 가지를 동시에 사용하는 것은 퍼포먼스를 중요시 하는 프로젝트에서 한 번 고려할 사항이기도 합니다. 이미 jQLite가 많은 기능을 지원해 주기 때문이죠.



# 제이쿼리의 Css 방식 선택자 기능 지원


제이쿼리를 사용할 경우 간편한 선택자 엔진이 매우 편리합니다. jQLite 역시 동일한 방식으로 선택자 기능을 가지며 아래와 같이 AngularJs에서 사용 가능합니다.

$element
angular.element()
jQuery()
$()

그럼 jQLite가 지원하는 기능들은 어떤 것이 있는지 아래에서 알아보도록 하겠습니다. jQuery 기능들 중 오직 아래의 기능들만 지원됩니다.


​​​​​​​# jQLite에서 지원하는 기능들 보기

addClass() - 첫번째 인자 미지원
after()
append()
attr() - 파라미터 기능 미지원

bind() - deprecated 되었으므로 on()을 사용하는 것 권장

clone()
contents()
css() - 인라인 스타일에만 적용됨

data()
detach()

empty()
eq()

find() - 태그 이름에만 제한됨

getComputedStyle

hasClass()
html()

next() - 첫번째 인자 미지원

on()
off()
one() - 네임스페이스, 선택자 미지원

parent() - 선택자 기능 미지원
prepend()
prop()

ready() - deprecated 기능임
remove
removeAttr() - 다수의 속성은 미지원
removeClass() - 함수 사용 미지원
removeData()
replaceWith()

​​​​​​​text()
toggleClass() - 첫번째 인자 기능 미지원
triggerHandler()

unbind() - deprecated 이며 off() 사용할 것

val()
wrap()


여기에 추가적인 기능들을 제공합니다. 아래의 $destroy 역시 추가로 지원하는 이벤트 핸들러 기능입니다.


# $destroy 알아보기


$destroy는 페이지를 벗어나거나 기타 DOM을 제거할 때 발생하는 이벤트입니다. 이 이벤트를 통해 angularjs 또는 jQlite 이 외의 바인딩된 것을 제거할 수 있도록 도와줍니다.

그 외에도 별도 메소드를 지원합니다.

controller()
inject()
scope()
inheritedData()

jQuery를 무조건 사용하는 것보다 jQLite를 최대한 활용하는 것이 좋은 방법일 수 있습니다. 제이쿼리에 익숙하다면 jQLite 사용이 어려울 수 있지만 사용하다보면 왠만한 기능은 대부분은 구현이 가능합니다.

Previous

AngularJS에서 Drag and Drop 드래그하여 요소를 이동하는 방법은?

Previous

angularjs에서 이미지 crop의 ngImgCropFullExtended 에러, ColorThief is not defined 해결방법은?