jquery(제이쿼리) 기초문법, 실행명령

jquery(제이쿼리) 기초문법, 실행명령 살펴보기

jquery(제이쿼리)는,

자바스크립트 라이브러리, 웹개발을 간소화하기 위해 사용하는 프로그래밍 언어입니다.

일간에서는 제이쿼리를 리액트의 등장으로 인해 더 이상 사용하지 않는 언어라고 하지만, 에이전시의 88%가 사용하고 있고 최근까지도 업데이트가 활발하게 이뤄지고 있습니다.

(누군가 여러분에게 제이쿼리 왜배움?이라고 하면 님 에이젼시 가봄?이라고 대답해 보세요 호호) 

v3.7.1로 업데이트 되어 있는 제이쿼리

 

자바스크립트는 크로스브라우징이 안됐기 때문에 점차 사용빈도가 줄어들었고, C언어기반으로 문법이 어려워 진입장벽이 높다는 단점이 있었습니다. 컴퓨터공학과를 나오는 분들은 정석으로 C언어 > 자바스크립트 > 제이쿼리 순으로 배워나가겠지만, 저는 단기간 웹퍼블리셔 과정을 듣고 있는 상황에서 제이쿼리로 동작이 되는 기능들을 살펴보고 추후에 자바스크립트가 어떻게 구현되어 제이쿼리가 실행되는지 역순으로 공부하고자 해요!

---

 

jquery(제이쿼리) 특징

1. 크로스 브라우저 호환성

2. 간결하고 직관적인 문법

3. DOM(document object model, 웹 페이지를 하나로 묶어서 선택하는 객체)로 조작 간소화

-> html 문서를 쉽게 선택하고 조작이 가능 

4. 이벤트 처리 및 애니메이션 처리에 용이(css의 한계를 보완)

5. 2006년 출시되어 지금까지 많은 사용량으로 인한 생태계가 잘 되어있어 문제 해결이 용이함(풍부한 플러그인)

6. 문법의 동작을 직접 확인할 수 있어 학습이 용이함

---

 

jquery(제이쿼리) 연결 방법

연결방법에 대한 자세한 설명은 다른 블로그에도 많이 나와있어서 저는 방법만 소개하겠습니다~

 

1. CDN(contents delivery network) 연결

jquery download -> jquery cdn -> jquery 3.x (uncompressed, minified, slim, slim minified 중 택 1)

 

2. 제이쿼리 파일 다운로드 후 문서와 직접연결

jquery download -> 아래 화면 우클릭 -> 다른 이름으로 저장 후 연결 사용

 

---

 

jquery(제이쿼리)에서 주석 처리방법

1. 한 줄 주석 : // 주석을 쓰세요

2. 두줄 이상 주석: /* 두줄 이상 주석을 여기에 쓰세요 */

---

 

jquery(제이쿼리) 사용 실행명령

$(document).ready(function(){});

 

제이쿼리는 스크립트 순서가 정말 중요한 언어입니다. 제이쿼리 문서를 브라우저에 한 번 저장했다가 출력하는 형태로 SRC 연결방식을 취하고 있습니다. 스크립트를 연결하지 않은 채로 실행명력문을 먼저 입력하게 될 경우 추후에 스크립트를 연결하더라도 제이쿼리는 실행되지 않습니다. 

---

 

jquery(제이쿼리) css style method

1. .css()를 붙이면 된다.

$(선택자).css('속성','값')

$(document).ready(function(){
$("h1").css('color','red');
$("h1").css('background-color','blue');
});

 

여러 개의 속성값을 부여하려면 속성마다 코드를 별도로 적어야 하는 번거로움이 있다. 

 

2. 여러 가지 속성값 부여하고 싶을 때,

.css({ '속성' : '값' })

$(document).ready(function(){
$("li").css({
'color':'orange',
'list-style':'none',
'line-height':'30px',
'background-color':'black',
})
});

자동완성기능이 제공되지 않으므로 속성을 입력할 때 오타에 유의해야 한다. 

'속성':'값' 기입이 끝나면 , (쉼표)로 속성을 구분해줘야 한다. 그렇지 않으면 전체 제이쿼리 문법이 초기화된다. 

 

3. 속성 구분대문자표기법

여러 개의 스타일 속성을 입력할 때 따옴표와 하이픈을 생략하여 작성하고 싶을 때 사용하는 방법이다. 

-(하이픈)을 기준으로 하이픈 뒤 첫 번째 철자를 대문자로 변경하여 입력하면 된다. 

'background-color' -> 'backgroundColor'

$(document).ready(function(){
$("P").css({
backgroundColor:'green',
textAlign:'center',
color:'#fff'
});
});