Jquery Write less, do more
Introduce
-
문법이 간결하다.
-
사용하기 쉽다.
-
빠르게 배울 수 있다.
-
다른 라이브러리들과 충돌을 일으키지 않는다.
-
다양한 플러그인이 존재한다.
-
브라우저 호환성 문제를 해결해준다.
-
MIT adn GPL LICENSES
Installation
jquery.com에서 스크립트 파일을 다운로드하여 링크한다. 혹은 CDN으로 코드를 추가한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
제이쿼리는 CSS 실렉터만 알고 있다면 정말 쉽게 배울 수 있다.
태그
<a class="hi" id="hello"> WELCOME TO MY BLOG </a>jquery
$("a")
javascript
document.getElementsByTagName("a")
아이디
<a class="hi" id="hello"> WELCOME TO MY BLOG </a>jquery
${"#hello"}
javascript
document.querySelector("#hello")
무엇을 사용하시겠습니까?
간단한 jquery에 매료되지 않을 수 없습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<header class="page-header" role="banner">
<h1>hello~ jQuery</h1>
</header>
</body>
</html>
이제 index.js에서 제이쿼리를 이용해 글자색을 변경해보겠습니다.
자바스크립트를 이용했을 경우 문서나, window가 로드됐을 경우 실행하도록 다음과 같은 코드를 작성한 적이 있습니다.
window.addEventListener("load", function(){
})
document.addEventListener("load", function(){
})
제이쿼리는 $의 기호를 사용합니다. 이러한 기호는 자바스크립의 문법과 혼용돼서 사용될 경우 에러가 발생할 수 있으므로 제이쿼리의 내용을 따로 작성하도록 도와주는 문법이 존재합니다.
$(document).ready(function(){
});
위의 코드는 다음과 같이 줄일 수 있습니다.
$(function(){
});이제 우리는 제이쿼리를 안전하게 사용할 준비가 되었으며 문서가 로드될 경우 자동으로 코드가 실행될 것입니다.
이제 준비는 끝났으니 css선택자로 글자색을 변경해볼까요
$(function(){
$('h1').css( {'color' : 'red'});
});
h1태그를 이용해 dom객체를 jquery객체로 변환합니다. 그런 뒤 jquery가 제공하는 함수를 통해 값을 변경하는 것이죠
jQuery 실행 흐름
1. $() 함수에서 명령 대상이 되는 DOM객체를 jQuery 객체로 변환
2. 변환한 jQuery 객체에 메서드를 호출해서 객체의 요소 즉 html 요소를 변경합니다.
3. 마지막은 세미콜론 ;으로 작성이 끝났음을 알립니다.
jQuery 객체
$(HTML 요소)
변경을 위한 명령
. method('매개변수', '매개변수');
만약 다음과 같이 jquery로 변경할 html속성이 여러 개라면 어떻게 해야 할까요
$(function(){
$('h1').css( 'color' : 'red');
$('h1').css( 'border-bottom' : '5px solid red');
});나열하는 것 대신 {}와 콤마 , 를 이용해 작성해줍니다.
$('h1').css( {
'transform' : 'rotate(45deg)',
'opacity' : 0.5
});제이쿼리는 camelCase를 지원합니다.
text-decoration , border-bottom과 같은 대시 - 로 연결되어있는 경우
textDecoration, borderBottom이라는 속성 값을 통해서도 변경할 수 있습니다.
$(function(){
$('h1').css({
color : 'red',
textDecoration : 'underline',
borderBottom:'5px solid red',
transform :'rotate(45deg)',
opacity : 0.5
})
});
확인해보시면 잘 나오는 것을 확인할 수 있습니다!!
'FrontEnd > jQuery' 카테고리의 다른 글
| [jQuery] load,ajax 사용하기 (0) | 2020.06.30 |
|---|---|
| [jQuery] animate (0) | 2020.06.30 |
| [jQuery] 실행 시점 제어하기 (0) | 2020.06.28 |
댓글