JQuery란?
JQuery란? JavaScript으로 만들어진 라이브러리중 하나이며, Vue와 react도 JavaScript라이브러리에 속한다.
JQuery의 문법은 JavaScript의 문서객체모델(DOM) 찾기, 이벤트제어, 애니메이션만들기, Ajax 개발을 쉽게 할 수 있도록 개발 되었다고한다. $로 시작을하며, CSS의 id, class 명명법을 동일하게 사용 한다.
JQuery 적용.
<head>부분에 주석이 된 3가지 모두 사용이 가능하며,
https://jquery.com/사이트를 통해서 .js파일로 받아 버전을 맞춰 사용도 가능하다.
학습이 목적이라면 아래 코드와 같이 <head>부분에 적용해서 바로바로 적용하는것이 여러 프로젝트를 만들고 지우는것에 유리하며, 프로젝트에 들어갔을경우에는 버전에 맞추어 프로젝트 내에 파일을 걸어두어서 사용하는것이 좋다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!-- <script src="./js/jquery.min.js"></script> -->
<!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
</head>
<body>
</body>
</html>JQuery의 사용
<script>태그 안에서 시작하며, <script>태그는 head, body 어디에 놔도 크게 상관없지만 프로젝트를 진행할 경우에는 .js 파일을 빼놓고 사용하는것이 좋다. 아래 두코드 모두 사용가능하며, ""과 ''을 구분없이 사용가능하고, ; 또한 생략이 가능하다. ()와 {}가 연속적으로 나오다보니 헷갈리는 경우가 있으니 주의하도록 하자.
<script type="text/javascript">
$(document).ready(function () {
// JQuery 및 JavaScript문법사용가능
});
</script>
<script type="text/javascript">
$(function () {
// JQuery 및 JavaScript문법사용가능
})
</script>JQuery의 객체 접근 방법
JQuery에서 선택자로 접근하는 방법은 CSS와 거의 동일하다.
| Selector | JQuery |
| ALL Selector | $("*") |
| Element Selector | $("elementName") |
| ID Selector | $("#idName") |
| Name Selector | $("tagName[name=attrName]") |
| Class Selector | $(".className") |
| Multiple Selector | $("selector1, selector2, selectorN") |
아래 코드를 실행해보면 조금더 명확 하게 알 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>여기가 p 태그입니다</p>
<p id="demo">p tag id demo</p>
<p class="cls">p tag class cls</p>
<h3 class="cls">h3 tag class cls</h3>
<script type="text/javascript">
$(document).ready(function () {
$("p").html("<b>Hello P Tag</b>"); // element selector
$("#demo").text("Hello P Tag id demo"); // id selector
$(".cls").text("class cls인 태그입니다"); // class selector
var cls = $(".cls").text();
alert(cls);
});
</script>
</body>
</html>JQuery 접근 관련 메소드
JQuery는 아래의 메소드로 접근이 용이하며, getter와 setter 둘다 쉽게 가능하다는 장점이 있다.
| DOM Method | |
| html() | 문서 객체 글자와 관련된 모든 것을 수행함 (html 태그인식) |
| text() | 문서 객체 글자와 관련된 모든것을 수행 |
| val() | value 값 |
| css() | css와 관련된 모든것을 수행 (style) |
| attr() | attribute와 관련된 모든것을 수행 |
| $(a)append(b) | b를 a의 안쪽 뒷부분에 추가 |
| $(a)prepend(b) | b를 a의 안쪽 앞부분에 추가 |
아래의 코드는 text() 와 html()을 getter로 사용하는 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
<p id="demo">개인 PC<b>해킹</b>, 이것만 했어도 막을 수 있었다?</p>
<button id="btnText">show Text</button>
<button id="btnHtml">show Html</button>
<script type="text/javascript">
$(document).ready(function () {
$("#btnText").click(function () {
var text = $("#demo").text();
alert(text);
});
$("#btnHtml").click(function () {
var html = $("#demo").html();
alert(html);
});
});
</script>
</body>
</html>val() 메소드를 getter로 사용하는 예시 코드
<input type="text" id="text" placeholder="입력주제">
<button type="button" id="btnInput">show value</button>
<script type="text/javascript">
$(function () {
$("#btnInput").click(function () {
var v = $("#text").val(); // getter
alert(v);
});
});
</script>attr() 메소드를 사용하여, 속성값에 접근하고 setter로 사용하는 예시 코드
<p>
<a href="http://www.naver.com" id="naver">Naver Link</a>
</p>
<button type="button" id="btnAttr">Attribute(속성)</button>
<script type="text/javascript">
$(function () {
$("#btnAttr").click(function () {
// getter
var attrVal = $("#naver").attr("href");
alert(attrVal);
// setter
$("#naver").attr("href", "http://www.daum.net");
$("#naver").text("다움 홈페이지");
});
});
</script>