기본 콘텐츠로 건너뛰기

JQuery - $ 사용 유형.

JQuery - $ 사용 유형.

최근에 새로운 Javascript 프레임워크와 라이브러리들이 많이 등장했고 시장 점유율 또한 많이 변동 되었다고 한다.

특히 요새 대새는 Angular와 React라고들 한다.

그리고 Jquery 요즘 누가써? Jquery 퇴물이야 등등...

그런 이야기들을 종종 찾아볼 수 있는데, 유행은 돌고 돌듯이 결국 Jquery가 몰락할 일은 없다고 생각하는 바,

묵묵히 Jquery를 고집하기로 한다...ㅎㅎ

먼저 Jquery 교과서랄까.. 기본 문법을 배울 수 있는 링크를 걸어둔다.

https://www.w3schools.com/jquery

여기서 기초들을 다 익힐 수 있다.

프로그래밍 문법을 한번이라도 봤다면 + - * / 같은 연산 while, for 등은 다 비슷하기 때문에

$ 사용법만 잘 알면 될 것 같다.

$ syntax 사용유형

일단 기본적으로 $는 JQuery에서 미리 정해놓은 변수 값이다. : JQueryStatic

1. $( ) : JQueryObject

가장 많이 사용하는 형태이다.

괄호 안에 들어 갈 수 있는 것들은 클래스 이름, 아이디, 셀렉터 등이다.

예를 들어 $('p')이면 현재 html 페이지에 있는 모든 를 JqueryObject로 가져오겠다는 것이다.

hide()는 제이쿼리 메서드이다.

$('p')는 제이쿼리 오브젝트이기 때문에 제이쿼리 메서드를 사용할 수 있다. 그중의 하나인 hide()를 사용해 보았다.

결과이다. 에는 스타일이 적용이 되었다.

해당 태그에는 jquery의 메서드가 적용이 된 것을 확인할 수 있다.

2. $.함수 : 플러그인 개발 또는 기본 전역함수

플러그인을 개발 할 때나 Jquery가 갖고 있는 기본 전역함수들을 사용할 때 쓴다.

전역함수에는 여러개가 있는데 그중에 개인적으로 많이 쓰는 것은

$.ajax({}), $.each({}) 등이 있다. 이 함수들의 사용방법은 따로 포스팅을 할 예정이다.

만들어져 있는 전역함수 외에 새로 생성할 수도 있는데

그렇게 일반적으로 만들어 놓은 것이 플러그인이라고 생각하면 좋겠다.

예를들어, 다음과 같이 세팅한다.

$.changeColor=function() { }; 이렇게 설정을 전역변수로 하게 되면 위에 박스친 부분처럼

메서드가 인텔리센스에 뜨게된다. 이런식으로 플러그인을 생성할 수 있다.

이렇게 사용한다.

함수의 매개변수도 나온다.

결과는 다음과 같다.

클릭한다. 시뻘겋게 바뀐다.

그러나 플러그인 개발시에 전역변수 이름이 겹치거나 $.의 직접호출이 엉키는 경우가 있으므로

$를 지역변수화 해서 호출 할 수도 있다.

전역변수를 지역변수화

(function ($) { })(jQuery) 이런식으로 바꾸면된다.

이만하면 기본적으로 jquery를 이용하는데 무리는 없을 듯하다.

from http://kellogue.tistory.com/18 by ccl(A) rewrite - 2020-03-11 05:20:30

댓글

이 블로그의 인기 게시물

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기 angular project를 빌드한다 ng build --prod 그러면 dist 폴더가 생긴다. dist 폴더 안에 있는 아이들을 사용한다. 아마존 s3 콘솔로 이동 https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2 새로운 Bucket 을 생성한다(Create bucket). 버킷 이름은 고유하게 짓는다. 버킷 생성후 properties tab > static website hosting을 클릭한다. index document는 index.html은 쓴다. properties > static website hosting Permission tab 에서 권한을 수정한다. overview tab 에서 필요한 파일 업로드 dist 폴더 안에 있는 파일들을 업로드 한다. bucket policy 설정 properties > static website hosting > endpoint 클릭하면 서버에 올라간 앱을 확인 할 수 있다 일단 angular 앱을 올리긴 했는데.. 이걸로는 아무것도 할 수 었다. django로 만든 서버를 올리고 database를 연결하고 그것을 지금 이 angular 앱과 연결해야한다. 아직 어떻게 해야 할지는 모르겠음 계속 삽질 중. 그래도 angular app 하나 올라갔는데 재밌네 from http://paigeblog.tistory.com/18 by ccl(A) rewrite - 2020-03-25 16:20:22

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a...

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a... - 좋아요 하이 .. !! Angular2 로 개발을 하다가 아래와 같은 에러를 만났다. 흠 .. 이게 뭘까 열심히 구글링을 해봤다. 간단한 내용이다. 모듈을 추가해주기만 하면 된다. app.module.ts를 열어보자. 여기에다가 FormsModule 과 ReactiveFormsModule을 추가해주면 문제가 해결된다 ! 다들 즐거운 코딩하자. from http://devkingdom.tistory.com/106 by ccl(A) rewrite - 2020-03-18 00:54:15

Angular Lazy-loading-ngmodules 사용해보기

Angular Lazy-loading-ngmodules 사용해보기 재미있는 프레임워크공부/Angular 2+ Lazy-loading-ngmodules를 사용하는 이유 SPA(Single Page Application)의 단점인 초기 구동 속도를 Angular로 피해갈 수는 없다. 프로젝트가 커지면 커질 수록 더 초기 구동 속도가 느려질 것이다. 그래서 이번 시간에는 초기 구동 시 전체 모듈을 불러오지 않고 관련한 모듈 페이지 로딩 시 불러올 수 있게 구글에서 만들어 놓은 Lazy-loading-ngmodules에 대해 알아보자. Lazy-loading-ngmodules를 먼저 알기 전 Angular route 기능에 대해 이해하고 들어갔으면 좋겠다. 자 그럼 이제 시작해보자. 1. app-routing (root)를 위한 app-routing.module.ts 를 만들어 보자 만약 새로운 프로젝트를 시작한다면 아래의 명령어를 치면 module을 자동적으로 생성해준다. ng new (프로젝트 이름) --routing 기존에 프로젝트에 적용하려고 한다면 app-routing.module.ts를 만들고 그 안에 아래의 내용들을 집어 넣는다. import { NgModule } from '@angular/core' ; import { Routes, RouterModule } from '@angular/router' ; const routes : Routes = []; @ NgModule ({ imports: [RouterModule. forRoot (routes)], exports: [RouterModule] }) export class AppRoutingModule { } CLI을 이용하면 자동적으로 AppModule에 import 되지만 직접 생성하였기 때문에 AppRountingModule을 app.module.ts에 import 해준다. 2. 이제 서브 라우팅을 생성하기 위해 새로운 ...