다음은 자바스크립트보다 더욱 간결하게 웹 기능을 사용할 수 있는
'제이쿼리(jQuery)'에 대해 알아볼 것이다.
jQuery 란 무엇인가?
제이쿼리는 '경량의 JavaScript 라이브러리'라고도 한다.
기존과 다른 특별한 소프트웨어가 아니라 자바스크립트를 웹에서 '훨씬 쉽게 사용'할 수 있도록 하는 것이다.
jQuery는 자바스크립트 코드로는 길게 작성해야 하는 작업을 한 줄의 코드로 호출할 수 있다.
자바스크립트의 많은 복잡한 작업을 단순화할 수 있다는 이야기이다.
jQuery는 다른 사람이 써놓은 자바스크립트를 '가져와서(임포트)' 사용한다고 볼 수 있다.
그렇기 때문에 jQuery를 사용하기 위해서는 <head> 부분에 항상 임포트 하는 구문이 필요하다.
jQuery를 공부할 때 유용한 사이트
저번 글에서 다룬 HTML/CSS/JavaScript와 마찬가지로
jQuery를 공부할 때 매우 유용한 사이트가 있다.
바로
w3schools
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
jQuery Get Started Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com Include jQuery from a CDN, like Google Downloading jQuery There are two versions of jQuer
www.w3schools.com
해당 사이트도 본문은 영어로 되어 있지만, 오른쪽 상단 위를 보게 되면
구글의 언어선택이 있는데 여기서 '한국어'로 설정해주면 된다.
크롬을 사용하고 있는 분이라면 자동번역 기능을 사용해도 좋다.
jQuery는 항상 '임포트'를 해야 사용할 수 있다.
임포트 구문은 해당 사이트에서 쉽게 가져올 수 있다.
아래 사진에서 살펴볼 수 있는데,
해당 구문을 <head></head> 태그 사이에
아래 코드를 복사 붙여넣기 해주면 완료이다. 매우 간단하다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
jQuery 기본 구문 알아보기
jQuery의 사용은
HTML 의 요소를 선택[=쿼리(=>정보 수집에 대한 요청을 뜻함)]하고 '작업'을 수행하는 기능을 한다.
jQuery의 기본 구문은
$ (selector).액션()
이다.
$는 쉬프트+숫자4로 입력할 수 있다.
$는 jQuery를 정의함과 동시에 액세스를 하기 위한 기호이다.
괄호 안에 들어갈 것은 HTML 요소가 들어가며, 이 요소를 쿼리(찾기)위함이다.
.액션()은 요소에 대해 수행할 작업을 위함이다.
위 사진의 아랫 쪽 예시는 () 괄호 안에 HTML 요소를 숨기는(hide) 예시이다.
jQuery는 언제 사용하는가
jQuery는 웹 페이지가 응답할 수 있는 방문자의 행동(이벤트)가 발생했을 때
행동의 예로는 'HTML의 어떤 요소 위로 마우스가 이동'한다거나
라디오 버튼을 선택한다거나
요소를 클릭한다거나 등을 말한다.
흠... 그러니
사용자가 이벤트를 발생시켰을 때
다양한 동적 움직임을 보여주고 싶을 때 사용한다.
자바스크립트로 나타낼 수 있는 것들을
jQuery를 사용해 간결한 코드로 나타내면 된다.
jQuery 활용해보기
jQuery를 버튼을 통해 요소를 열고 닫는 것을 활용해보았다.
웹에서 자주 보는 것인데, 버튼을 누르면 어떠한 입력창이 뜨고
다시 버튼을 누르면 어떠한 입력창이 닫히는 것이다.
여기에 추가적인 요소는 버튼을 눌렀을 때 버튼의 이름이 열기<->닫기로 바뀌는 것이다.
바로 아래에서 확인하자.
1. 버튼을 누르기 전에는 버튼 내용은 [포스팅박스 닫기]이며
그 바로 아래에 포스팅박스가 나타나 있다.
2. [포스팅박스 닫기] 버튼을 누르게 되면 해당 버튼은 -> [포스팅박스 열기]로 바뀌게 되며
아래에 있는 포스팅은 사라지게 된다. 이 기능은 자바스크립트로 나타낼 수 있겠지만
jQuery를 사용한다면 매우 간단하게 구현할 수 있다.
해당 코드 구현은 아래에 나타냈다.
함수 이름을 한 눈에 봐서도 알기 쉽게 'btn_posting_click()'으로 나타냈다.
버튼인데, 포스팅 클릭과 관련되어 있는 함수 임을 나타낸 것이다.
그리고 조건문 if()가 있는데, 여기서 포스팅박스가 hide() 숨겨졌을 때
그 값이 'none'이 되는 성질(?)을 사용해 조건문을 구성했다.
만약에 hide() 상태가 아니라면 포스팅 박스의 display 속성 값은 'block일 것이고
그때의 버튼 값은 '포스팅 박스 닫기'로 되어 있을 것이니 이를 '포스팅 박스 열기'로 바꿔줄 것이다.
이름이 바뀌기 전에 포스팅 박스를 .hide()시켜 사라지게 만드는 것이다.
어차피 동시에 일어나는 것처럼 보이니 순서는 크게 상관없다.
else 문에는 그 반대로 적용해주었다.
말로 설명하면 이해가 안 될 수도 있으니
직접 해보면서 이해하길 바란다.
<script>
function btn_posting_click(){
if($("#post-box").css("display")=="block"){
$("#post-box").hide();
$("#btn-posting-box").text("포스팅박스 열기");
}
else{
$("#post-box").show();
$("#btn-posting-box").text("포스팅박스 닫기");
}
}
</script>※여기서 조금 더 기능을 세련되게(?) 바꿔보자면
홈페이지를 처음 들어왔을 때 포스팅 박스를 안 보이게 설정을 하는 것이다.
사용자가 포스팅 박스가 보고 싶지 않을 수도 있기 때문이다.
원할 때 버튼을 클릭해 볼 수 있도록 설정할 수가 있다.
처음 CSS 속성에 display 값을 none으로 지정을 해주면
홈페이지에 처음 들어갔을 때부터 포스팅 박스는 보이지 않게 된다.
보고싶으면 알아서 버튼을 눌러 열어보면 되는 것이다 ~!
※느낀 점※
자꾸 실수를 하는데, 요소에 id를 주고
jQuery를 통해 요소를 가지고 올 때
따옴표 안에 '#'를 안 써서 id를 못 가져오는 상황이 빈번히 발생한다.
계속 인지하고 유의를 하자.
※공부하며 알게된 점※
` <-백틱이라고 해서 키보드 물결표시를 쉬프트 안 누르고
입력할 수 있는 것인데
이는 HTML처럼 생긴 문자열을 HTML로 변환시킬 수가 있다.
$("요소").append(백틱으로 입력한 문자열)
예)
let temp_html = `<button>버튼임돠</button>`
$("#card-box").append(temp_html)을 입력하면
card-box공간에 '버튼임돠'라고 적혀있는 버튼이 생긴다.
여기서 백틱의 좋은 점을 활용하자면
어떤 요소의 title을 바꾸고 싶을 때
let title = `제목은 이걸로 수정`
html 요소에 ${title}을 적용하면
title의 값이 '제목은 이걸로 수정'으로 바뀌게 된다.
^^* 말로 설명하려니 어렵다..
'개발(Develop) > 웹(Web) _프로젝트project' 카테고리의 다른 글
| 웹 / jQuery와 Ajax 예제 연습/ 따릉이 API 활용해보기/ 서울시 OpenAPI/ 쉬운 예제와 설명 (0) | 2021.05.22 |
|---|---|
| 웹 / Ajax란? / Ajax를 이용한 미세먼지 API 이용해보기 / Ajax 동작방식/동기 비동기 방식 차이점/ 실습 예제 (0) | 2021.05.20 |
| 웹 / JSON이란?/ JSON View/ JSON 소프트웨어 / 크롬확장프로그램 JSONView/꿀팁 (0) | 2021.05.19 |
| 웹 / 제이쿼리(jQuery) 자주 쓰이는 함수 모음zip / 제이쿼리 메소드 / 제이쿼리 이벤트 함수/ HTML제어 메소드 (1) | 2021.05.18 |
| 웹 / 처음 제작해보는 나만의 웹 쇼핑몰 사이트 - HTML CSS JS / 자세한 설명 (1) | 2021.05.16 |
| 웹 / '제대로 된' 웹 공부를 하고자 한다 (0) | 2021.05.15 |
댓글