Jquery란, 준비방법, 문법, 스타일 제어

● Jquery 사용 배경

'멀티 브라우져 지원'. 어느 브라우져에서나 동일하게 작동을 한다는 것. 특히 IE의 독자노선 행보로 인해 IE와 다른 브라우져들은 자바스크립트에서 지원하는 기능이 다르거나, 같은 기능이 있더라도 사용 방법이 다른 경우 jquery에서는 이것을 전부다 해결해준다.

멀티 브라우져에서의 ajax이용, 이벤트 설정, DOM 탐색이야말로 jquery의 핵심적인 기능인 것이다.

: 또 다른 장점은 바로 간단하게 이용할 수 있는 핵심 기능들을 포함하고 있다는 것.

: 특히, jquery-mobile은 모든 모바일 단말에서의 똑같은 UI와 동작. 단순히 attribute를 설정해주는 것만으로 UI들이 바로바로 적용되는 놀라운 기능들을 소개해주고 있다.

사용이유

● Jquery란?

jQuery가 기본적으로 가진 철학은 "write less, do more"로 적게 쓰고 많이 쓰자이다. 개발자의 언어로 번역하면 "적은 코드로 많은 일을 하자"이다.

- DOM과 관련된 처리를 쉽게 구현 할 수 있다.

- 규칙성을 가지고 이벤트를 처리 할 수 있다.

- 애니메이션 효과를 쉽게 만들 수 있다.

- AJAX 처리 방식을 편리하게 사용 할 수 있다.

● Jquery사용방법 및 준비

- jquery라이브러리추가

1. 파일을 다운로드

<script src="./js/jquery-3.6.0.min.js"></script>

https://jquery.com/

jquery-3.6.0.min 파일을 다운로드 한뒤, 자신의 프로젝트 dir에 이동시킨다.

그리고 html의 head태그에서 src를 지정해주면 된다.

<head>
   <script src="./jquery-3.4.1.min.js"></script>
</head>

2 . CDN을 이용해서 사용

https://releases.jquery.com/

<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>

예제)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 파일을 다운로드 받아서 사용 -->
    <!-- <script src="./js/jquery-3.6.0.min.js"></script> -->
    <!-- 2. CDN을 이용해서 사용 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <p>제이쿼리가 적용되지 않았습니다.</p>
    <script>
        $(document).ready(()=>{
            $('p').text('준비 완료!')
        })
    </script>
</body>
</html>

- 위의 코드를 입력했을때.

- <head>안의 <script src="https://code.jquery.com/jquery-3.6.0.min.js ">이 부분을 주석처리하면

● Jquery문법

● Jquery 스타일 제어

예제)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 id="h1Tag">
        jquery를 활용하자!
    </h1>

    <script>
        // jQuery에서 요소를 선택
        // $('선택자')

        // 1.innerText => $('선택자').text('변경할내용')
        $('#h1Tag').text('jQuery 변경')

        // 2.innerHtml => $('선택자').html('변경할내용+태그')
        // $('#h1Tag').html('<a hred="#">jQuery 변경!</a>')

        // 3.style.속성이름 => .css('속성이름','속성값')
        $('#h1Tag').css('color','salmon')
    </script>
</body>
</html>

1.innerText => $('선택자').text('변경할내용')

$('#h1Tag').text('jQuery 변경')

=> 글자만 "jQuery를 활용하자"에서 "jQuery 변경"으로 변경됨.

2.innerHtml => $('선택자').html('변경할내용+태그')

$('#h1Tag').html('<a hred="#">jQuery 변경!</a>')

=> "jQuery변경"에서 "jQuery변경!"으로 변경

3. 1번을 입력한 상태에서

style.속성이름 => .css('속성이름','속성값')

$('#h1Tag').css('color','salmon')

=> Html의 문자가 설정한 색의 속성으로 변한다.

저작자표시

'개발 공부 > JS, JQuery' 카테고리의 다른 글

자바스크립트 a href="#" 무엇을 의미? (0)	2023.10.19
Jquery 이벤트, this 키워드 (0)	2023.10.19
자바스크립트 스타일바꾸기, 콜백함수(이벤트) (0)	2023.10.19
jQuery 사용 방법, 다운로드 방법 (1)	2023.10.19
자바스크립트 DOM (0)	2023.10.19