[ jQuery ] jQuery란?

jQuery란?

jQuery를 사용하기 위해선 라이브러리 연동이 필요한데, 두 가지 방법이 있다.
  1. 실제로 다운을 받아서 프로젝트에 넣어두고 쓰는 방식
  2. CDN(Content Delivery Network)방식
브라우저에서 CDN방식으로 연동시키게 하면, 최신 jQuery가 적용되고, 대부분의 웹 어플리케이션들이 거의 CDN 연동을 한다. 따라서 로딩 시간도 줄어든다.

Google CDN을 통해 연동시키기
http://jquery.com/download/ 에서 Google CDN 클릭 후 아래 내용을 jQuery를 사용할 해당 웹페이지 소스에 추가해주면 된다.


   jQuery API
http://api.jquery.com/


jQuery DOM Traversing
태그나 클래스이름, 아이디로 접근 가능
접근방법 → $(“태그명") / $(“.클래스명") / $(“#아이디명")

DOM 제어
- each()
 
- html(), val()
 
- attr(), prop() 차이
(Reference : http://javascriptandjquerydev.blogspot.kr/2012/07/attr-prop.html)
 
- append(), prepend()


※ css 속성먹이기

$("#bt_3").click(function() {
    $("#result").html("<b>HTML!!</b><br/>");
});
    
$("#bt_4").click(function() {
    $("#result").css("color", "white");
});


$("#bt_5").click(function() {
    $("#result").css({
        "font-size": 30, 
        "text-align" : "center", 
        "background" : "black"
        });
    }
});


댓글

댓글 쓰기

이 블로그의 인기 게시물

[SPRING] log4j2.xml 설정

log4j2.xml 설정 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <?xml version="1.0" encoding="UTF-8"?> <configuration status= "WARN" > <appenders> <Console name= "console" target= "SYSTEM_OUT" > <PatternLayout pattern= "%d{HH:mm:ss.SSS} [%t] %-5level %logger{36} - %msg%n" /> </Console> <RollingFile name= "file" fileName= "./logs/all.log" filePattern= "./logs/all.%i.%d{yyyy-MM-dd}.log" > <PatternLayout pattern= "%d{HH:mm:ss.SSS} [%t] %-5level %logger{36} - %msg%n" /> <Policies> <SizeBasedTriggeringPolicy size= "10MB" /> <!-- 이 용량이 초과되면 아래 DefaultRolloverStrategy 정책만큼 넘버링 할거다. --> </Policies> <DefaultRolloverStrategy max= "1000" fileIndex= "min"...
자세한 내용 보기

[ Javascript ] 프로토타입 이해하기

이미지
자바스크립트는 프로토타입 기반 언어라고 불립니다. 자바스크립트 개발을 하면 빠질 수 없는 것이 프로토타입인데요. 프로토타입이 거의 자바스크립트 그 자체이기때문에 이해하는 것이 어렵고 개념도 복잡합니다. 하지만 프로토타입이 무엇인지 깨우친 순간 자바스크립트가 재밌어지고, 숙련도가 올라가는 느낌을 팍팍 받을 수 있습니다. 그럼 지금부터 프로토타입을 이해해봅시다. Prototype vs Class 클래스(Class)라는 것을 한 번쯤은 들어보셨을겁니다. Java, Python, Ruby등 객체지향언어에서 빠질 수 없는 개념이죠. 그런데 중요한 점은 자바스크립트도 객체지향언어라는 것입니다. 이게 왜 중요하냐구요? 자바스크립트에는 클래스라는 개념이 없거든요. 대신 프로토타입(Prototype)이라는 것이 존재합니다. 자바스크립트가 프로토타입 기반 언어라고 불리는 이유이죠. 클래스가 없으니 기본적으로 상속기능도 없습니다. 그래서 보통 프로토타입을 기반으로 상속을 흉내내도록 구현해 사용합니다. 참고로 최근의 ECMA6 표준에서는 Class 문법이 추가되었습니다. 하지만 문법이 추가되었다는 것이지, 자바스크립트가 클래스 기반으로 바뀌었다는 것은 아닙니다. 어디다 쓰나요? 그럼 프로토타입을 언제 쓰는지 알아봅시다. 넌 이미 알고있다 자바스크립트에 클래스는 없지만 함수(function)와 new를 통해 클래스를 비스무리하게 흉내낼 수 있습니다. function Person() { this.eyes = 2; this.nose = 1; } var kim = new Person(); var park = new Person(); console.log(kim.eyes); // => 2 console.log(kim.nose); // => 1 console.log(park.eyes); // => 2 console.log(park.nose); // => 1 kim과 park은 ey...
자세한 내용 보기

[JWT] 토큰(Token) 기반 인증에 대한 소개

이미지
소개 토큰(Token) 기반 인증은 모던 웹서비스에서 정말 많이 사용되고 있습니다. 여러분이 API 를 사용하는 웹서비스를 개발한다면, 토큰을 사용하여 유저들의 인증작업을 처리하는것이 가장 좋은 방법입니다. 토큰 기반 인증 시스템을 선택하는데에는 여러가지 이유가 있는데요, 그 중 주요 이유들은 다음과 같습니다 Stateless 서버 Stateless 서버를 이해하려면 먼저  Stateful  서버가 무엇인지 알아야합니다. Stateful 서버는 클라이언트에게서 요청을 받을 때 마다, 클라이언트의 상태를 계속해서 유지하고, 이 정보를 서비스 제공에 이용합니다. stateful 서버의 예제로는 세션을 유지하는 웹서버가 있습니다. 예를들어 유저가 로그인을 하면, 세션에 로그인이 되었다고 저장을 해 두고, 서비스를 제공 할 때에 그 데이터를 사용하지요. 여기서 이 세션은, 서버컴퓨터의 메모리에 담을 때도 있고, 데이터베이스 시스템에 담을 때도 있습니다.  Stateless  서버는 반대로, 상태를 유지 하지 않습니다. 상태정보를 저장하지 않으면, 서버는 클라이언트측에서 들어오는 요청만으로만 작업을 처리합니다. 이렇게 상태가 없는 경우 클라이언트와 서버의 연결고리가 없기 때문에 서버의  확장성 (Scalability)  이 높아집니다. 모바일 어플리케이션에 적합하다 만약에 Android / iOS 모바일 어플리케이션을 개발 한다면, 안전한 API 를 만들기 위해선 쿠키같은 인증시스템은 이상적이지 않습니다. (쿠키 컨테이너를 사용해야하죠). 토큰 기반 인증을 도입한다면, 더욱 간단하게 이 번거로움을 해결 할 수 있습니다. 인증정보를 다른 어플리케이션으로 전달 대표적인 예제로는, OAuth 가 있습니다. 페이스북/구글 같은 소셜 계정들을 이용하여 다른 웹서비스에서도 로그인 할 수 있게 할 수 있습니다. 보안 토큰 기반 인증 시스템을 사용하여 어플리케이션의 보안을 높일 수 있습니...
자세한 내용 보기