html/css/js는 능숙..까지는 아니지만 어렵지 않게 사용할 수 있어서,
가장 최근에 배운 그리고 내가 본 교육을 통해 처음 접한 jQuery에 대한 내용을 정리해보려고 한다.
제이쿼리(jQuery)란?
제이쿼리(jQuery)는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반 라이브러리다.
그동안 라이브러리를 활용하지 않는 순수 자바스크립트(바닐라 자바스크립트)를 사용하거나 리액트(React)를 활용한 실습만 했던 나였기에 제이쿼리를 배운 후 처음 느낀 감정은 '정말 쉽고 간편하다.' 였다.
그렇다면 코알누 쌤(나의 첫 코딩쌤)은 리액트에서 왜 제이쿼리를 사용하지 않았을까?
가상 돔(Virtual DOM)을 이용하는 리액트 역할이 제이쿼리와 충돌할 수 있기 때문이라고 한다. 제이쿼리나 리액트 모두 돔을 갱신한다는 같은 목적을 가진 도구이기 때문에 굳이 한 번에 같이 쓸 필요가 없다.
추가적으로 직접적으로 돔(DOM)을 제어하는 제이쿼리보다 상태(State)를 통해 돔을 선언적으로 제어하는 리액트나 뷰(Vue.js), 앵귤러(Angular)가 코드 이해도 쉽고 생산성이 좋기 때문에 이전보다 제이쿼리의 사용률이 줄었다고 한다.
제이쿼리 설정하기
<방법 1> jquery.js 외부파일로 연결
- jquery.js 파일 직접 다운로드 (https://jquery.com/download/)
- 하기 태그 추가
<script src='jquery.js 경로'></script>
<방법2> CDN 연결
- 제공되는 CDN들 중 하나 선택하여 태그 복사 (https://jquery.com/download/)
- 태그 추가
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
제이쿼리 사용하기
문단 요소를 먼저 로딩한 후 제이쿼리를 실행시키기 위해 다음 코드를 작성하여야 한다.
<script type="text/javascript">$(document).ready(function(){
// 실행문들
});
</script>또는 생략 가능한 (document).ready를 빼고 하기와 같이 작성한다.
<script type="text/javascript">$(function(){
// 실행문들
});
</script>제이쿼리 기본구문
선택자(Selector) 사용하여 값 가져오기
- 타입선택자 - 태그 요소 선택
<script>
$(function(){
let ex_1 = $('p');
// ex_1.text(); 텍스트 가져오기 -> "호두는 귀엽다"
ex_1.text("호두는 사랑스럽다") // 태그 사이의 텍스트 변경하기
})
</script>
<body>
<p> 호두는 귀엽다 </p>
</body>- ID선택자 - id 선택
<script>
$(function () {
$("#b1").click(function () {
let price = $("#price").val(); // 입력한 '커피가격' 값 가져오기
let count = $("#count").val(); // 입력한 '커피수량' 값 가져오기
let price2 = parseInt(price); // 문자열 -> 정수로 변환
let count2 = parseInt(count); // 문자열 -> 정수로 변환
alert(price2 * count2);
})
});
</script>
<body>
커피가격: <input type="text" id="price" /> <br />
커피수량: <input type="text" id="count" /> <br />
<button id="b1">커피 결제금액 확인</button>
</body>- class선택자 - class 선택
<script>
$(function () {
$(".btn1").css("background", "yellow");
// 버튼1 색 노란색으로
$(".btn2").css("background", "red");
// 버튼2 색 빨간색으로
});
</script>
<body>
<button class="btn1">버튼1</button>
<button class="btn2">버튼2</button>
</body>이벤트 처리
- change이벤트 - selector가 변경될 경우 특정 작업을 실행
<script>
$(function () {
$("#national").change(selectChange);
function selectChange() {
let value = $("option:selected").val();
console.log(value);
$("#result").val(value);
}
});
</script>
<body>
<h3>select > option 태그의 상태에 대한 선택자</h3>
<select id="national">
<option value="한국" selected>한국</option>
<option value="미국">미국</option>
<option value="일본">일본</option>
<option value="중국">중국</option>
</select>
<label>선택한 나라 : </label><input type="text" id="result" />
</body>
- click 이벤트 - selector를 클릭했을 때 특정 작업을 실행
<script>
$(function () {
$("button").click(function () {
$("img").attr("src", "img/giphy.gif"); // 속성 변경
$(this).css("background", "lime")
// this는 이벤트가 발생한 주체를 가리킴
// 클릭한 버튼을 라임색으로
});
});
</script>
<body>
<img src="img/baby.png" width="150" height="150" />
<br />
<button>이미지 변신...</button>
<button>이미지 변신2...</button>
</body>※ text(), val(), attr()
- text() : 태그 사이의 텍스트
<div>텍스트</div>
==> $("div").text();
$("div").text("새 텍스트");- val() : input 태그의 value 속성
<input id="id" value="oracle">
==> $("#id").val();
$("#id").val("mySQL");- attr() : input 태그 이외의 속성
<img src="text.jpg" width="100">
==> $("img").attr("src");
$("img").attr("src", "win.jpg");연습예제
<script>
$(function(){
$('#b1').click(function(){
let id = $('#user').val();
let idLen = id.length;
console.log("길이: " + idLen);
if(idLen < 5){
$('#d2').html('<font color=red> 5 글자 미만입니다. 재입력 해주세요. </font>')
} else{
$('#d2').html('<font color=blue> 확인되었습니다. </font>')
}
})
$('#pw2').keyup(function(){
let pw1 = $('#pw1').val();
let pw2 = $('#pw2').val();
if(pw1 == pw2){
$('#d1').html("<font color=blue> 비밀번호가 같습니다. </font>")
} else{
$('#d1').html("<font color=red> 비밀번호가 다릅니다. </font>")
}
})
})
</script>
<body>
패스워드: <input type="text" id="pw1"> <br>
패스워드 확인: <input type="text" id="pw2"> <br>
<hr>
<div id="d1"></div>
<hr>
사용자 아이디: <input type="text" id="user"><br>
<button id="b1">로그인 아이디 확인</button>
<div id="d2"></div>
</body>
본 포스팅은 멀티캠퍼스의 멀티잇 백엔드 개발(Java)의 교육을 수강하고 작성되었습니다.
성장하는 개발자, 하지은입니다.