티스토리 뷰

Programming/JavaScript, jQuery

[jQuery 2강] 제이쿼리 기본문법

국브 2019. 3. 26. 17:16

 [jQuery 2강] 제이쿼리 기본문법



이번글에서는 제이쿼리의 기본 문법에 대해서 알아보겠습니다.

저번글을 통해 제이쿼리가 무엇이며

장점과 단점, 자바스크립트와 다른점이 무엇인지 알아보았습니다.

그리고 제이쿼리를 사용하기위한 방법에 대해서도 알아보았습니다.

그럼 이제 연결된 제이쿼리를 사용하기위한 제이쿼리 기본문법에 대해서 살펴보도록 하겠습니다.

기본 문법에 들어가기전 이전글을 링크해두겠습니다.


 이전 글 링크 


2019/03/22 - [Programming/JavaScript, jQuery] - [jQuery 1강] 제이쿼리 개요 및 개발환경구축



 제이쿼리 기본문법


제이쿼리의 기본문법은 다음과 같습니다.

(자바스크립트에 비해 간결한것을 확인할수 있습니다.)


 사용방법 및 문법 


$(선택자).함수명(매개변수); 


또는


jQuery(선택자).함수명(매개변수); 


 예제 

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    window.onload=function(){
        
        //제이쿼리 문법1
        $("div").css("color","red");
        
        //제이쿼리 문법2
        //jQuery("div").css("color","red");
        
        //자바스크립트 동일 문법
        /* var divOb = document.getElementsByTagName("div");
        var i = 0;
        for(i;i<divOb.length;i++){
            divOb[i].style.color = "red";
        } */
    }
 
</script>
</head>
<body>
    <div>Hi!</div>
</body>
</html>
cs

 실행결과 및 설명 

 


내용이 "Hi!" 인 div 를 미리 만들어주었습니다. (<div>Hi!</div>)


<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>

다음 제이쿼리를 상단에 선언해주었고..


스크립트 온로드 영역에 $("div").css("color","red"); 라고 글자의 색상을 빨간색으로 변경되도록 하였습니다.


그결과 위와같이 글자의 색상이 빨간색으로 변경된것을 확인할수 있습니다.


추가 내용으로 주석으로 "자바스크립트 동일 문법" 을보시면..

자바스크립트로 글자색상을 변경할때 코딩량이 많은것을 확인할수있습니다.

이렇게 제이쿼리는 코딩을 간략하게 해줍니다.




 글을 마치며..


이렇게 해서 제이쿼리의 기본문법을 간략하게 알아보았습니다.

제이쿼리는 생각보다 문법이 간략하여 금방 숙지하실수 있습니다.

그리고 예제를 통해 제이쿼리를 사용했을때와 자바스크립트를 사용했을때의 코딩량의 차이를 확인할수 있었습니다.

그럼 글을 마치도록 하겠습니다. 수고하세요.


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 



저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[jQuery 4강] 제이쿼리 DOM (문서객체)  (0) 2019.03.28
[jQuery 3강] 선택자  (0) 2019.03.27
[jQuery 1강] 제이쿼리 개요 및 개발환경구축  (0) 2019.03.22
[javascript 16강] 이벤트 종류  (0) 2019.02.22
[javascript 15강] 이벤트  (0) 2019.02.21
댓글