jQuery 1탄 (ready, click, text, $(요소 선택) )
jQuery란?
jQuery는 JavaScript 기반의 오픈 소스 프론트엔드 라이브러리입니다. 웹 개발을 위한 도구로 사용되며, HTML 문서의 요소를 선택하고 조작하는 데 특히 유용합니다.
jQuery는 단순하고 직관적인 API를 제공하여, 복잡한 JavaScript 코드를 간결하게 작성할 수 있도록 도와줍니다. 웹 페이지의 동적인 요소를 조작하고 애니메이션 효과를 적용하며, 서버와의 데이터 통신을 쉽게 처리하는 등 다양한 기능을 제공합니다.
jQuery는 여러 가지 기능을 갖춘 다양한 모듈로 구성되어 있으며, 기본적인 선택자, 이벤트 처리, 애니메이션, AJAX와 같은 웹 개발에 필요한 다양한 기능을 포함하고 있습니다. 하지만 최근 웹 개발의 발전과 JavaScript의 표준화로 인해 jQuery의 인기는 점차 줄어들고 있습니다.
대부분의 최신 브라우저는 jQuery의 기능을 원래 JavaScript로 직접 구현할 수 있는 기능을 제공하고 있으며, 많은 개발자들은 jQuery를 대체하는 순수 JavaScript나 다른 프레임워크를 선호하게 되었습니다.
뭐... 인기는 조금 떨어지고 있지만 뭐든 알아놓으면 좋으니까 알아보도록 하겠습니다.
요소선택, ready, click, text 함수
요소 선택 $(selector)
$("#idName")이렇게 어떤 tag의 id가 idName 인 요소를 선택합니다.
다음은 click과 ready에 대하여 알아봅시다.
ready, click, text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>jquery study </title>
</head>
<body>
<div class="container pt-3">
<script type="text/javascript">
/* jQuery(document).ready(function() {
alert("document ready~~");
}); */
//위와 같은 표현
$(document).ready(function() { // document ready : dom 이 준비되면(로드되면) , ready function 전달된 익명함수 실행
// 현 페이지에서 동작될 함수를 등록 , 이벤트 핸들러 바인딩(등록)
$("a").click(function() {
alert("링크 눌렀네");
});
$("button").click(function() {
alert("버튼 클릭했군요");
});
$("span").click(function() {
alert("span click "+$(this).text());
});
});
</script>
jquery 기본 <br><br>
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
</ul>
<span>클릭해보세요 span입니다^^</span> <br><br>
<span>클릭해보세요 스팬입니다TT</span>
<br>
<button type="button">버튼1</button>
<button type="button">버튼2</button>
</div>
</body>
</html>이런식으로 작성해서 진행해 보겠습니다.
1. Script에 작성된 표현들을 알아보도록 합시다
2. 밑에 작성한 문법은 dom이 준비되면 function 안에 있는 함수가 실행될 수 있습니다.
$(document).ready(function()3. click 함수
$("a").click(function() {
alert("링크 눌렀네");
});
$("button").click(function() {
alert("버튼 클릭했군요");
});
$("span").click(function() {
alert("span click "+$(this).text());
});4. a 태그를 click 하면 '링크 눌렀네'라는 알림 창이 나옵니다.
5. button 태그를 누르면 '버튼 클릭했군요'라는 알림 창이 나옵니다.
6. span 태그를 누르면 span 태그에 작성된 text 파일이 뒤에 나오게 만들었습니다.
직접 복사 붙여 넣기 해서 실행해 보시면 알 수 있습니다.
순서가 뒤바뀌어도 실행 가능
이것이 무슨 말인지 알아보도록 하겠습니다.
html 파일은 위에서부터 한 라인씩 읽어가기 때문에 밑에 작성한 파일을 읽지 않은 상태에서는
아래에 있는 내용을 읽어 올 수 없습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>jquery study </title>
</head>
<body>
<div class="container pt-3">
<span id="spanTest1">jquery study</span>
<script type="text/javascript">
alert(document.getElementById("spanTest1"));
alert(document.getElementById("spanTest2"));
$(document).ready(function() {
alert(document.getElementById("spanTest2"));
});
</script>
<span id="spanTest2">jquery study2</span>
</div>
</body>
</html>하지만 jQuery와 함께라면 읽어올 수 있습니다. 왜냐면 DOM이 생성되고 나서 실행하면 되기 때문이죠.
위에 있는 document.getElementById("spanTest2")는 null 값이 나오게 되고
밑에 jQuery로 작성된 값은 값이 잘 나오게 됩니다.
window.onload 와의 차이점
window onload는 이미지, 동영상 등의 자원들이 모두 load 된 후 실행되는 이벤트라면
jQuery는 앞서 말씀드렸다시피 Document Object Model (DOM)만 load 되면 실행되는? 실행될 수 있는 이벤트입니다.
이것 또한 직접 해보시면서 느껴보세요.
$(this)
자신을 불러오는 변수, 선택자인데요.
사용법을 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>jquery study </title>
</head>
<body>
<div class="container pt-3">
<a href="http://daum.net" class="myLink">다음넷으로</a><br>
<a href="http://www.naver.com">네이버로</a><br>
<a href="http://google.com" class="myLink">구글로</a><br>
<script type="text/javascript">
$(document).ready(function() {//dom이 load 되면 실행될 익명함수 : 현페이지 이벤트핸들러를 바인딩
// class myLink 가 클릭되었을 때 동작될 익명함수를 등록
$(".myLink").click(function(){
// $(this) : 이벤트 발생된 .myLink 링크요소 객체
// $(this).text() : 해당 요소의 텍스트 정보를 반환하는 jquery 함수
return confirm($(this).text()+" 이동하시겠습니까?");
});
});
</script>
</div>
</body>
</html>1. dom이 로드가 되면 안에 있는 함수가 실행 가능합니다.
2. class가 myLink로 되어있는 tag 가 클릭되면
3. $(this)의 텍스트가 나타나게 됩니다.
4. 그니까 눌러진 id가 myLink인 태그의 텍스트가 confirm 함수로 나오게 됩니다.
text 응용 및 타입 확인
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>jquery study </title>
</head>
<body>
<div class="container pt-3">
<button type="button">버튼1</button>
<button type="submit" class="test">submit버튼2</button>
<button type="button">버튼3</button>
<button type="button" class="test">버튼4</button>
<hr>
<span id="result"></span>
<script type="text/javascript">
$(document).ready(function() {
// type이 button 인 요소들에게 일괄적으로 이벤트 처리 담당 핸들러를 등록
$("button[type=button]").click(function() {
alert($(this).text());
});
// class test인 버튼을 클릭하면 result span에 버튼 자신의 텍스트를 할당
$(".test").click(function() {
$("#result").text($(this).text());
});
});
</script>
</div>
</body>
</html>1. 버튼 중에 type 이 button 인 것을 누르면 알람이 나옵니다.
2. Class가 test인 것을 누르면 id가 result인 태그에 텍스트 내용이 누른 것의 텍스트 내용으로 채워지게 됩니다.
버튼 4를 누르면 이런 식으로 나오게 됩니다.
소감
개발의 유행이 돌고 돌지는 모르지만 어쩌면 많이 사용할 날이 있을 것입니다. 이러한 내용을 배울 수 있음에 감사함을 느끼며 오늘 하루를 마무리하겠습니다.
항상 선생님께서는 유머가 중요하다고 말씀하시는데, 오늘 유머에 대한 글을 읽으면서 선생님 생각이 나더라고요.
남을 대할 때 가장 어려운 것이 남을 재미있게 해주는 것이라고 어떤 글에서 나왔습니다. 각박한 세상에 이런 사람들이 더욱 빛을 발한다고 한다는데 여러분들의 생각은 어떠신가요?
제 생각도 이와 비슷하다고 생각합니다. 남을 웃게 만들 수 있는 능력이야말로 가지고 싶은 능력 중 하나라고 생각이 됩니다. 그렇다고 남을 비하하면서 웃기면 안 됩니다.