-
JQuery 접해보기웹 프로그래밍/FE(Front-End) 2021. 6. 27. 22:34
오늘은 JQuery를 처음으로 접해봤다.
그 전에는 모든 기능은 JavaScript로만 구현했는데 JQuery를 알게되니까 너무 편하다는 것을 느끼게 됐다.
그러면 지금부터 JQuery에 대해 알아보자.
JQuery는 JavaScript를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다.
JQuery를 이용하면 DOM과 이벤트 처리를 손쉽게 구현할 수 있고 Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있다.
그러면 코드를 보며 JQuery가 기존에 JavaScript만을 써서 코드를 짠 것보다 얼마나 더 간편한지 알아보자.
HTML에서 어떠한 요소를 숨기는 기능을 구현하는 것을 생각해보자.
JavaScript로만 코드를 짠다면 아래와 같다.
document.querySelector("element").style.display = "none";queryselector로 원하는 요소를 찾고 해당 요소의 style에 접근해서 display에 접근해서 해당 속성 값은 none으로 변경해야한다.
코드가 길다는 느낌이 든다.
그러면 JQuery를 사용하면 어떨까?
$('element').hide();확연하게 코드가 간단해보이고 짧아졌다는 것을 느낄 수 있다.
우리가 찾고자 하는 요소를 'element'에 태그면 태그명을 넣고 id이면 #id명을 너고 class이면 .class명을 넣으면 된다.
이렇게 간편한 기능을 제공하는 JQuery를 사용하기 위해서는 어떻게 하면 될까?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><head>와</head>태그 사이에 위 코드를 넣어주면 JQuery를 사용할 수 있게 된다.
JQuery 라이브러리에는 다양한 메소드가 존재하는데 자주 쓰이는 메소드를 알아보자.
먼저, input 박스의 값 가져오는 것이다.
이를 위해서는 .val() 메소드를 사용하는데 코드를 보면 아래와 같다.
<input id='input-1' type='text> <!--JQuery--> $('#input-1').val()val()을 이용해서 input박스에 직접 값을 넣을 수도 있는데 .val('넣고싶은 값')으로 쓰면 된다.
다음으로 CSS의 속성 값 가져오는 것이다.
.css()메소드를 사용하는데 코드를 보면 아래와 같다.
<style> .div-1 { background-color: gray; } .p-1 { color: red; font-size: 20px; } </style> <body> <div class='div-1'> <p class='p-1'>안녕하세요.</p> </div> </body> <!--JQuery--> $('.div-1').css('background-color') //결과: gray $('.div-1').css('display') //결과: block $('.p-1').css('color') //결과: red마지막으로 웹 페이지가 로딩되었을 때 동작하는 기능을 넣어주는 것이다.
코드를 보면 아래와 같다.
<script> $(document).ready(function(){ alert('로딩 완료') }); </script>콜백함수인 function()의 중괄호 안에 원하는 기능을 선언해주면 페이지가 로딩되었을 떄 선언한 기능이 동작한다.
이 외에도 많은 메소드가 JQuery에 존재하다.
더 다양한 메소드를 알려보려면 아래 링크를 통해 공부하면 좋을 것같다.
jQuery API Documentation
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t
api.jquery.com
'웹 프로그래밍 > FE(Front-End)' 카테고리의 다른 글
form 태그 파헤치기 (0) 2021.07.01 [에러 수정] Uncaught TypeError: $.ajax is not a function (0) 2021.06.29 HTML 속성 제대로 알고 사용하기!!(lang, rel, href, role) (0) 2021.06.26 AJAX 파헤치기 (add. 동기/비동기) (0) 2021.06.21 DOM Node 조작해보기(DOM API) (0) 2021.06.19