[jQuery] jQuery 예제 01

프로그래밍/Web 2009. 7. 17. 16:49 Posted by galad
출처: http://www.jiny.kr/jiny/417
위의 출처의 예제를 직접 해보면서 작성한 소스를 붙여넣고, 몇몇 사항들은 삭제/추가하였음...
문제있으면 알려주시길...

http://hanjiq.egloos.com/2108204
http://orangenius.tistory.com/5
http://jqueryui.com/home


size( ) 
Returns: Number
size( ), 실행후 숫자를 반환

The number of elements in the jQuery object.
매치되어진 원소들의 갯수를 반환한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>01</title>

<style>
body { cursor:pointer; }
div { width:50px; height:30px; margin:5px; float:left; background:blue; }
span { color:red; }
</style>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(document.body).click(function() {
        $(document.body).append($("<div>"));
        var n = $("div").size();
        //var n = $("div").length; // size()와 같다
        $("span").text("There are " + n + " divs. Click to add more.");
    }).click(); // 한 번 강제로 클릭 - 아래의 body에는 div가 3개인데 실행되면서 4개로 화면에 표시된다.
});
</script>

</head>
<body>

<span></span>
<div></div>
<div></div>
<div></div>

</body>
</html>
/JQueryTest01/WebContent/Example01/01.html

get( ) 
Returns: Array<Element>
get( ), 실행후 원소 배열 반환

Access all matched DOM elements.
매치되는 모든 문서 원소들을 배열로 반환한다
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>02</title>

<style>
span { color:red; }
</style>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    disp($("div").get().reverse()); // get으로 array를 얻어서, reverse로 순서뒤집기
});

function disp(divs) {
    var a = [];
    for(var i = 0; i < divs.length; i++) {
        a.push(divs[i].innerHTML);
    }

    $("span").text(a.join(" "));
}
</script>

</head>
<body>

Reversed - <span></span>
<div>One</div>
<div>Two</div>
<div>2.5</div>
<div>Three</div>

</body>
</html>
/JQueryTest01/WebContent/Example01/02.html

get( index ) 
Returns: Element
get( 인덱스 ), 실행후 매치 되는 원소를 반환

Access a single matched DOM element at a specified index in the matched set.
매치되는 원소들 중 주어진 인덱스에 해당하는 하나의 원소만 반환한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>02</title>

<style>
span { color:red; }
div { background:yellow; }
</style>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("*", document.body).click(function (e) {
        e.stopPropagation(); // 이벤트 정지
        var domEl = $(this).get(0); // 클릭한 객체를 받음
        $("span:first").text("Clicked on - " + domEl.tagName); // 태그명 표시
    });
});
</script>

</head>
<body>

<span> </span>
<p>In this paragraph is an <span>important</span> section</p>
<div><input type="text" /></div>

</body>
</html>

event.stopPropagation
https://developer.mozilla.org/en/DOM:event.stopPropagation
jQuery함수가 아니라 DOM 객체 함수임.

Prevents further propagation of the current event.
현재 이벤트가 더 진행하는 것을 방지
<html>
<head>
<title>Event Propagation</title>

<style type="text/css">
 #t-daddy { border: 1px solid red }
 #c1 { background-color: pink; }
</style>

<script type="text/javascript">

function stopEvent(ev) {
  c2 = document.getElementById("c2");
  c2.innerHTML = "hello";

  // this ought to keep t-daddy from getting the click.
  ev.stopPropagation();
  alert("event propagation halted.");
}

function load() {
  elem = document.getElementById("tbl1");
  elem.addEventListener("click", stopEvent, false);
}
</script>
</head>

<body onload="load();">

<table id="t-daddy" onclick="alert('hi');">
 <tr id="tbl1">
  <td id="c1">one</td>
 </tr>
 <tr>
  <td id="c2">two</td>
 </tr>
</table>

</body>
</html>
/JQueryTest01/WebContent/Example01/03.html

저작자표시 비영리 동일조건

'프로그래밍 > Web' 카테고리의 다른 글

[html] HtmlCleaner를 이용한 html 파싱  (1) 2009.07.27
[javascript] 스크립트로 style, class 변경  (1) 2009.07.24
[jQuery] Getting Started with jQuery 04  (0) 2009.07.11
[jQuery] Getting Started with jQuery 03  (0) 2009.07.11
[jQuery] Getting Started with jQuery 02  (0) 2009.07.10
 

티스토리툴바