01. j query에 대해서
목차
- 제이쿼리란?
- 제이쿼리 사용법
- 제이쿼리 기본형
- 태그요소 불러오기
제이쿼리란?
제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식이 자바스크립트를 이용해 만든 라이브러리 언어입니다.
라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합체를 말합니다.
자바스크립트에서 함수는 열런의 코드를 함수내에 정의했다가 필요할때마다 호출해서 사용하는 것이라고 배웠습니다. 제이쿼리는 이런 다양한 함수들을 제공하고 있고, 자바스크립트에서 불편했던 몇 가지 점들을 간편하게 사용할 수 있도록 개선한 언어입니다.
1. 호환성 문제 해결
: 자바스크립트의 문서 객체 모델(DOM)과 이벤트객체는 호환성(크로스브라우징)이 떨어진다는 단점이 있습니다.
크로스브라우징이란 모든 브라우저에서 동일한 기능을 사용할 수 있게 해주는 것을 말합니다.
제이쿼리에서는 문서객체 선택자의 호환성 문제가 모두 해결되었습니다.
2. 쉽고 편한 애니메이션 효과 기능 구현
: 자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 하기 때문에 개발에 많은 시간이 소요되었습니다. 하지만 제이쿼리는 애니메이션과 다양한 효과(Effect)를 지원하는 메서드들을 제공하고 있기 때문에 개발 시간을 많이 단축할 수 있습니다.
제이쿼리 사용법
제이쿼리는 <script>태그 안에 직접 작성하거나 js파일을 만들어서 작성하면 됩니다.
하지만 그 전에 제이쿼리가 반드시 먼저 연결되어 있어야만 사용할 수 있습니다.
1. 제이쿼리 파일 연결 첫번째 방법
: 아래 사이트에서 jquery.min.js파일을 </>아이콘을 눌러 <head>태그 안에 붙혀 넣습니다.
그 다음 내가 작성할 자바스크립트 파일을 아랫줄에 연결합니다.
이 순서가 바뀌면 오류가 발생하므로 주의해야 합니다!
최신 버전을 쓴다면 미그레이트 파일을 함께 사용해주면 옛날 라이브러리 기능도 호환할 수 있습니다.
2. import문법을 이용해 .js파일 안에서 불러 올 수 있습니다.
: 자바스크립트 파일 첫 줄에 import라는 문법을 이용해 제이쿼리를 연동할 수 있습니다.
예시) import './js/jquery.min.js'
https://cdnjs.com/libraries/jquery/1.12.4
jquery - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
JavaScript library for DOM operations - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make
cdnjs.com
https://cdnjs.com/libraries/jquery-migrate
jquery-migrate - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Migrate older jQuery code to jQuery 1.9+ - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We ma
cdnjs.com
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import
import - JavaScript | MDN
정적 import 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용합니다.
developer.mozilla.org
제이쿼리 연결 방법1
제이쿼리 연결 방법2
제이쿼리 기본형
제이쿼리를 사용하려면 먼저 제이쿼리를 연결한 후에 기본구조를 먼저 작성해줘야 합니다.
제이쿼리에서 $기호는 '제이쿼리'를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자 역할을 합니다.
$()는 '제이쿼리 함수'를 뜻하며 기본형의 가장 바깥에 쓰입니다.
또한 $()는 css선택자를 전달하여 특정 html요소를 선택할 수 있도록 해줍니다.
$()함수를 통해 생성된 요소를 '제이쿼리 객체' 라고 부릅니다.
$()함수에 전달되는 인수는 반드시 ""를 사용한 문자열 형태로 전달되어야 합니다.
(기본형)
1. $(document).ready(function)(){
자바스크립트 코드~~;
});
2. $(function(){
자바스크립트 코드~~;
});
태그요소 불러오기
제이쿼리로 태그에 특정 css를 적용하고 싶다면 아래 문법을 사용합니다.
(기본형)
1. 선택한 요소에 지정한 css스타일을 적용합니다.
$('css선택자').css('스타일 속성명'), '값');
2. 선택한 요소에 지정한 속성을 적용합니다.
$('css선택자').attr('속성'), '값');
태그요소 불러오기 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>제이쿼리 기본 구조</title>
<!-- 제이쿼리 연결 -->
<script src="./js/jquery.min.js"></script>
</head>
<body>
<h1 id="title">제이쿼리</h1>
<a href="#" id="naver">네이버</a>
<script>
/**/
$(document).ready(function () {
// h1태그에 글자 컬러를 red로 배경색을 pink로 변경하기
$("#title").css("color", "red").css("background-color", "pink");
// a태그에 링크를 네이버 주소로 바꾸고 새창열기
$("#naver")
.attr("href", "https://www.naver.com")
.attr("target", "_blank");
});
</script>
</body>
</html>