jquery
2024. 1. 11. 22:30ㆍDaily Codig Reminder
CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- cdn 사용 네트워크 상의 lib 사용, 인터넷 연결 -->
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function(){
console.log("cdn 사용화면 로딩 후 실행됨");
console.log(document.getElementById("test"));
});
</script>
</head>
<body>
<div id="test">============</div>
</body>
</html>
<div id=”aaa”>
javascript
- document.getElementById(”aaa”)→ 태그(dom)
- document.querySelect(”#aaa”) → 태그(dom)
jquery
$(”#aaa”) → 태그 (dom) → jquery 객체로 반환 →
javascript dom: .value, .innerText, .innerHtml
jquery 객체 dom: .val(), .text(), .html()
ex)
js: document.getElementById(”aaa”).innerText
jquery: $(”#aaa”).text()
<input type =”text” id=”bbb” value=”1234"
js: document.getElementById(”bbb”).value=”1111”
jquery: $(”#bbb”).val(”1111”)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
jQuery(document).ready(function(){
console.log("ready1");
});
$(document).ready(function(){
console.log("ready2");
});
$(function(){
console.log("ready3");
});
</script>
</head>
<body>
</body>
</html>ready1
ready2
ready3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function(){
console.log(" $ ready1");
console.log(document.getElementById("aaa"));
console.log($("#aaa").val());
console.log(jQuery("#aaa").val());
});
jQuery(document).ready(function(){
console.log("jquery ready2");
});
$(function(){
console.log("no ready3");
});
</script>
</head>
<body>
<input type="text" id="aaa" value="1234">
</body>
</html>'Daily Codig Reminder' 카테고리의 다른 글
| ready, hierarchy (0) | 2024.01.12 |
|---|---|
| el, jstl (1) | 2024.01.11 |
| mvc (0) | 2024.01.11 |
| jsp2 (0) | 2024.01.04 |
| 5장- jsp (0) | 2024.01.04 |