티스토리 뷰

FRONT-END/JQUERY

[JQUERY] BASIC THINGS

진심스테이크 2018. 10. 14. 20:32

 

https://api.jquery.com/

 

 

jQuery : 자바스크립트 라이브러리

- 목적 : 웹 사이트에서 자바스크립트를 사용하는 것이 훨씬 쉬워지도록 하는 것

- 여러 줄의 자바스크립트 코드를 필요로 하는 많은 일반적인 작업을 한 줄의 코드로 작업할 수 있는 메서드로 실현 가능

- 기능

  1. HTML/DOM 조작 : 특정 요소를 쉽게 찾고, 내용 변경이 간단

  2. CSS 조작 : 특정 요소에 대한 스타일의 변경 등의 작업이 간단

  3. HTML 이벤트 : 이벤트를 간단히 처리

  4. 효과 및 애니메이션 : 웹 페이지 상의 효과나 애니메이션이 가능

  5. AJAX : 네트워크를 통하여 서버와의 정보 교류를 쉽게 함

 

 

 

 

다운로드

1. cmd 창 열기

2. npm install jquery 입력

 

 

3. 사용

- HTML 페이지 안에서 사용

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


- 사이트를 방문 후 참조하여 사용

㉠ Google CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

 

㉡ Microsoft CDN

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>

 

 

 

 

jQuery 기초

- jQuery를 사용하여 HTML 요소를 선택(쿼리)하고,  'action'을 수행

- 기본 형태

  $(selector).action( );

- $ 기호 : jQuery를 정의하고 jQuery를 호출하여 사용 가능

- selector : HTML 요소를 쿼리(또는 찾기)하는 역할

 

- action( ) : 선택된 요소가 행하는 동작을 명시

<head>
  <script src="jquery-3.3.1.min.js"></script>
  <script>
  // 웹 페이지가 로드되면 실행되는 함수
    $(document).ready(function() {
      //버튼을 클릭하면 실행되는 함수의 선언
      $("button").click(function() {
        //<p>의 모든 요소를 숨김
        $("p").hide();
      })
    })
  </script>
</head>
<body>
  <h2>This is a heading</h2>
  <p>This is a paragraph</p>
  <p>This is an another paragraph</p>
  <button>Click me to hide paragraphs</button>
</body>

 

- 파일 분리

test.js

$(document).ready(function() {
  $("button").click(function() {
    $("p").hide();
  })
})

main.html

<head>
  <script src="jquery-3.3.1.min.js"></script>
  <!-- 파일 호츨 -->
  <script src="test.js"></script>
</head>
<body>
  <h2>This is a heading</h2>
  <p>This is a paragraph</p>
  <p>This is an another paragraph</p>
  <button>Click me to hide paragraphs</button>
</body>

 

저작자표시 비영리 변경금지 (새창열림)

'FRONT-END > JQUERY' 카테고리의 다른 글

[JQUERY] GRAMMER - 문법  (0) 2019.01.24
[JQUERY] 애니메이션 효과  (0) 2019.01.24
[JQUERY] 실행 시점  (0) 2019.01.24
[JQUERY] CSS 스타일 변경  (0) 2019.01.24
[JQUERY] 회원가입 유효성 검사  (1) 2018.04.08
댓글