jquery를 접해 보면 머리가 쫌 트끔 할거라고 생각 합니다...
어떻게 이런 기능이 이렇게 쉽게 구현 될까 ...?
원래 javascript 의 기능 인가 .... ???
웹쪽에서 밥을 얻어 먹는 개발자라면 ,,,, 반드시 습득 해야 될 것 같습니다.....
나온지도 꽤 오래 된 기술이라서 계속 모르고 있다면 ... 쪽 팔릴 것 같습니다.
<!DOCTYPE html>
<!--
http://api.jquery.com/html/
-->
<html>
<head>
<style>
p { margin:8px; font-size:20px; color:blue;
cursor:pointer; }
b { text-decoration:underline; }
button { cursor:pointer; }
</style>
<style>
.red { color:red; }
</style>
<script src="scripts/jquery.1.3.2.min.js"></script> <!-- 요듬은 1.4 이다, 제가 다운로드 한게 1.3 이라서... -->
</head>
<body>
<p>
<b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
to a <span id="text">text</span> node.
</p>
<p>
This <button name="nada">button</button> does nothing.
</p>
<script>
$("p").click(function () { // 오든 P tag 의 click event 에 바인딩 되더라...
var htmlStr = $(this).html(); // html ===> innerHTML 인것 같구요.,,,, 여기서 $(this) 는 현재의 p tag 이더군요
$(this).text(htmlStr); // html 을 html 로 취급하지 말고 text 로 그냥 넣는다.
});
</script>
<span>Hello</span>
<div></div>
<div></div>
<div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>
<div id="divx">
helo mulder divx
</div>
<div id="divy">
helo mulder divy
</div>
<script>
$("#divy").css("cursor", "pointer"); // css attribute 를 이렇게 동적으로 넣어 준다... , 쉽더군요.
$("#divy").click(function () {
$("#divy").html("<b>aaa</b> ffffffff excitement...")
.append(document.createTextNode("!!!")) // text 를 동적으로 만들어서 앞쪽 element 에 추가로 붙여준다.
.css("color", "red");
});
</script>
</body>
</html>