jQuery와 JavaScript 차이점
| javascript | JQuery | |
| input태그 등 접근시 | value | val() |
| 일반태그 접근시 | innerHTML | html() |
| text() |
JavaScript getter와 setter 예시
document.getElementById("id명").innerHTML = "abc123"; // setter
let val2 = document.getElementById("id명").innerHTML // getter
jQuery getter와 setter 예시
$("p").html("hello <b>p<b> tag"); // setter
let ptag = $("p").html(); // getter jQuery 형식 예시
$(tag명, id, class, name).핸들러 함수(매개변수) onclick(JS)
jQuery 태그 접근방법 예시
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<p id="demo">p tag id=dome</p>
<h3 class="cls">h3 tag class=cls</h3>
<p class ="cls">p tag class=cls</p>
<script type="text/javascript">
$(document).ready(function () {
// id로 접근하기
let demo = $("#demo").html(); //getter
$("#demo").text("hello p tag demo"); //setter;
// class로 접근하기
$(".cls").text("이 element의 class는 cls입니다");
// 태그명.class로 접근하기
$("p.cls").text("p tag class cls");
//태그명으로 접근하기
$("p").text("p 태그입니다");
// 위 코드와 동일 java script : 3줄
let arrp = document.getElementsByTagName("p");
for(i=0; i<arrp.length; i++){
arrp[i].innerHTML = "이것은 p태그입니다";
}
});
</script>
</body>
</html>
설명
접근방법은 style tag와 비슷하다.
id = #id명
class = .class명
tag = tag명
마지막쯤 자바스크립트 코드를 보면 제이쿼리는 1줄이면 실행되는 것을 자바스크립트는 3줄이나 작성해야 실행이 된다. 제이쿼리가 훨씬 간편하다!
$(document).ready(function ()
웹브라우저에서 이문서를 다 읽고 난 다음에 함수를 실행해라!
반드시 사용하는 건 아니다.
document : html 문서 (정적)
html() vs text() 예시
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<p id="demo1">p tag id=dome</p>
<p id="demo2">p tag id=dome</p>
<script type="text/javascript">
$(document).ready(function () {
$("#demo1").html("hello <b>p<b> tag");
$("#demo2").text("hello <b>p<b> tag");
});
</script>
</body>
</html>
실행화면
설명
두 가지 다 일반 태그의 문자 값을 바꿔주는지만, html()은 <b>를 태그로 취급하고, text()는 <b>를 문자열로 취급하여 작성한 그대로 실행되는 것을 볼 수 있다.
'IT > JavaScript' 카테고리의 다른 글
| [jQuery] jQuery에서 요소 추가하기/append() (0) | 2021.06.11 |
|---|---|
| [jQuery] button tag 접근 예시/input radio, checkbox 접근 예시 (0) | 2021.06.11 |
| [jQuery] jQuery 정의/juery.min.js 소스 구하기, 파일 다운로드/jquery.min.js 적용방법 (0) | 2021.06.10 |
| [Html+JavaScript] NodeList/getElementsByTagName (0) | 2021.06.08 |
| [Html+JavaScript] DOM/childNodes/appendChild/insertChild/insertBefore/removeChild/createElement/createTextNode (0) | 2021.06.08 |