기본 콘텐츠로 건너뛰기

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

댓글

이 블로그의 인기 게시물

1. Welcome to React!

1. Welcome to React! 본 포스팅은 리액트를 처음으로 공부하기 시작하는 사람들을 위해 제작되었다. 구글에 영어로 react라고만 쳐봐도 기본적인 개념을 배울만한 블로그는 아주 많지만 막상 처음부터 하나하나 따라할 수 있는 튜토리얼과 같은 게시글이 없는 것 같아 이 부분에 초점을 맞춰 포스팅을 써보려 한다. 자바스크립트의 라이브러리 우선 리액트는 페이스북이 직접 개발한 자바스크립트의 라이브러리이다. 즉, 문법과 기능에 확장이나 변화가 있을 수는 있지만 그 뼈대는 자바스크립트에 있다는 것이다. 따라서 리액트를 공부하기 전에 자바스크립트의 기본적인 변수선언(const, let, var 등) 같은 문법을 알아둔 후 공부하는 것이 좋다. 참고하면 좋을만한 사이트 : https://opentutorials.org/course/743 Virtual Dom 필자가 리액트를 공부하며 처음으로 느낀 장벽은 바로 virtual DOM이라는 개념이다. 이 개념에 대해 구글에 검색해본 결과 다음과 같이 요약할 수 있다. 변한 부분만 다시 그린다. 이는 다시 말하면 리액트가 출시되기 전까지 모든 프레임워크는 변하지 않은 부분도 불필요하게 다시 그리고 렌더링 했다는 것이다. 아래에서 Angular라는 구글의 웹 개발 프레임워크와 React의 차이를 예시를 들어 비교해보자. 출처 - 블로그 : http://blog.naver.com/PostList.nhn?blogId=songc7 위의 두 그림을 차례로 그린다고 가정하자. 우선 누가 어떤 방법으로 그리던 모두 처음 그림은 캔버스에 백지상태부터 그려야 한다. 하지만 두번째 그림을 이어서 그려야 할때 Angular는 새로운 캔버스에 전체 그림을 다시 그려서 우리에게 보여주는 반면 리액트는 처음과 두번째 그림을 비교해서 달라진 부분만 찾아서 그린 후 원래 그림에 덮어서 보여준다. 여기서 "속도"의 차이가 명확하게 발생한다. Angular을 포함한 기존의 프레임워크들은 전체 그림(

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증...

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증... django 는 기능이 참 너무 많다 ^^; 지금은 서버는 django로, 프론트는 angular를 붙여서 간단한 웹을 만들어 보려고 한다. 웹 만들때 항상 회원가입/로그인 기능은 맨 앞에 구현한다. 어떻게 구현하면 좋을까... 찾아보다가 이 기능을 구현할 수 있는 방법이 너무 많아서 정보를 찾기 더 어려웠다. 일단 나는 django에서 django rest framework라는 것을 사용해서 API를 만드려고 한다. 순수 django 튜토리얼에는 바로 template 랑 연결해서 설명하는 부분이 많았다. 나는 그냥 API 만 만들고 싶다고!! 그래서 찾은 것이 django REST framework. https://www.django-rest-framework.org/api-guide/authentication django REST framework 설치 using pip pip install djangorestframework settings.py INSTALLED APPS 에 추가해야함 INSTALLED_APPS = [ ... 'rest_framework', ] django REST framework 에서도 인증 관련해서 제공하는 것이 1개가 아닌 여러 개다. 나는 그중에 TokenAuthentication을 이용해서 로그인을 구현해 보려고 한다. TokenAuthentication Token authentication is appropriate for client-server setups, such as native desktop and mobile clients. 이렇게 나와있어서 내가 하려는 것과 일치해서 이걸로 결정 ~ 솔직히 처음 로그인을 구현하려고 하면 도대체 그 과정이 어떻게 되는지 모를 수 도 있다. 나는 쉽게 정리하면 아래와 같은 과정이라고 생각한다. 로그인 로그아웃

개발자를 위한 React.js 툴 및 리소스

개발자를 위한 React.js 툴 및 리소스 개발자를 위한 React.js 툴 및 리소스 페이스 북이 2013 년에 라이브러리를 처음 공개 한 이후 React.js의 인기는 빠르게 증가하고 있습니다.이 프로젝트는 Github에서 다섯 번째로 가장 많이 출연 한 오픈 소스 프로젝트이며 React 개발자를위한 구인 광고도 크게 증가하고 있습니다. React는 사용자 인터페이스를 구축하기위한 간단한 JavaScript 프레임 워크입니다. 가장 두드러진 예로는 Facebook 및 Instagram이 있습니다. React는보다 간단한 구조와 성능 최적화에 중점을 둔 Angular 또는 Backbone과 같은 MVC 프레임 워크에 대한 대안을 제공합니다. React가 앞으로 몇 년 동안 웹 개발 환경을 확실히 정의 할 것이기 때문에이 기사에서는 React 개발 영역에 발을 딛는 데 도움이되는 개발자 툴킷을 제공하고자합니다. 공식 React.js 문서 Facebook은 개발자에게 React의 주요 개념에 대한 자세한 문서를 제공합니다. 문서 외에도 React를 사용하여 대화 형 틱택 토 게임을 구축하는 방법에 대한 훌륭한 자습서와 React 개발자를위한 토론 포럼을 찾을 수 있습니다. 문서는 오픈 소스이므로 원하는 경우 편집 할 수도 있습니다. 공식 페이스 북 문서 React.js Github Repo React Github Repo에서 필요할 때마다 React의 소스 코드를 확인할 수 있습니다. 현재 개발 상태에 대한 정보를 유지하려면 문제, 중요 시점 및 최신 풀 요청을 살펴볼 수도 있습니다. 문제가 발생하면 문제 해결 가이드를 약간 연구하는 것이 좋습니다. React.js Github Repo 안녕하세요 월드 스타터 코드 빠른 반응을 원한다면 Codepen에서이 "Hello World"대화식 데모로 시작할 수 있습니다. 필요한 모든 자산과 시작 코드도 포함되어 있습니다. Babel도 켜져 있으므로 ECMAScri