Where The Streets Have No Name

jQuery 기본 예제 모음(1) : jQuery Core 본문

Developement/Web

jQuery 기본 예제 모음(1) : jQuery Core

highheat 2008. 4. 10. 18:56
출처 : http://apmusers.com/tt/dbckdghk/59

<jQuery Core>

1. jQuery( html )  Returns: jQuery
jQuery( html ), 실행후 jQuery객체를 반환

Create DOM elements on-the-fly from the provided String of raw HTML.
주어진 html을 가지고 빠르게 문서 원소를 생성한다.
그리고 jQuery객체로서 그 것을 반환한다.
이말은 그것을 이어서 jQuery의 다른 함수와 함께 사용가능하다는 뜻이다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("<div><p>Hello</p></div>").appendTo("body");
  });
  </script>

</head>
<body>
</body>
</html>



2. jQuery( elements )  Returns: jQuery
jQuery( 원소 ) jQuery( 원소.원소.원소 ), 실행후 jQuery객체를 반환

Wrap jQuery functionality around a single or multiple DOM Element(s).
하나 또는 다단계의 문서원소로서 사용할수 있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $(document.body).css( "background", "black" );
  });
  </script>

</head>
<body>
</body>
</html>



3. jQuery( callback )  Returns: jQuery
jQuery( 콜백함수 ), 실행후 jQuery객체를 반환

A shorthand for $(document).ready().
$()은 $(document).ready() 의 짧은 표현으로 사용가능하다.
$(document).ready() 은 문서가 사용가능한 시점을 자동으로 인식하여 주어진 콜백 함수를 동작시킨다.
콜백함수란 지정된 행위가 끝난다음 자동적으로 실행될 함수를 의미한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(function(){

   $(document.body).css( "background", "black" );
  });
  </script>

</head>
<body>
</body>
</html>



4. each( callback )  Returns: jQuery
each( 콜백함수 ),  실행후 jQuery객체를 반환

Execute a function within the context of every matched element.
매치 되어진 모든 원소에 대해 주어진 콜백 함수를 실행한다. 루프의 의미이다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $(document.body).click(function () {
     $("div").each(function (i) {
       if (this.style.color != "blue") {
         this.style.color = "blue";
       } else {
         this.style.color = "";
       }
     });
   });

  });
  </script>
  <style>
  div { color:red; text-align:center; cursor:pointer;
       font-weight:bolder; width:300px; }
  </style>
</head>
<body>
  <div>Click here</div>
  <div>to iterate through</div>
  <div>these divs.</div>
</body>
</html>



5. 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>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $(document.body).click(function () {
     $(document.body).append($("<div>"));
     var n = $("div").size();
     $("span").text("There are " + n + " divs." +
                    "Click to add more.");
   }).click(); // trigger the click to start

  });
  </script>
  <style>
  body { cursor:pointer; }
  div { width:50px; height:30px; margin:5px; float:left;
       background:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <span></span>
  <div></div>
</body>
</html>



6. length  Returns: Number
length, 실행후 숫자를 반환

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>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $(document.body).click(function () {
     $(document.body).append($("<div>"));
     var n = $("div").length;
     $("span").text("There are " + n + " divs." +
                    "Click to add more.");
   }).trigger('click'); // trigger the click to start

  });
  </script>
  <style>
  body { cursor:pointer; }
  div { width:50px; height:30px; margin:5px; float:left;
       background:green; }
  span { color:red; }
  </style>
</head>
<body>
  <span></span>
  <div></div>
</body>
</html>



7. 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>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

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

   disp( $("div").get().reverse() );

  });
  </script>
  <style>
  span { color:red; }
  </style>
</head>
<body>
  Reversed - <span></span>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</body>
</html>



8. 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>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("*", document.body).click(function (e) {
     e.stopPropagation();
     var domEl = $(this).get(0);
     $("span:first").text("Clicked on - " + domEl.tagName);
   });

  });
  </script>
  <style>
  span { color:red; }
  div { background:yellow; }
  </style>
</head>
<body>
  <span> </span>
  <p>In this paragraph is an <span>important</span> section</p>
  <div><input type="text" /></div>
</body>
</html>



9. index( subject )  Returns: Number
index( 객체 ), 실행후 숫자를 반환

Searches every matched element for the object and returns the index of the element, if found, starting with zero.
매치되어진 원소들에 대해 주어진 객체와 동일한것을 검색하여,
존재하면 그 원소들중에 몇번째에 해당하는가 하는 인덱스 번호를 반환한다.
인덱스는 0부터 시작한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

   $("div").click(function () {
     // this is the dom element clicked
     var index = $("div").index(this);
     $("span").text("That was div index #" + index);
   });

  });
  </script>
  <style>
  div { background:yellow; margin:5px; }
  span { color:red; }
  </style>
</head>
<body>
  <span>Click a div!</span>
  <div>First div</div>
  <div>Second div</div>
  <div>Third div</div>
</body>
</html>



10. jQuery.fn.extend( object )  Returns: jQuery
jQuery.fn.extend( 객체), 실행후 jQuery객체를 반환

Extends the jQuery element set to provide new methods (used to make a typical jQuery plugin).
제이쿼리에 새로운 함수를 확장한다.(플러그인으로 만들어 사용한다.)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  jQuery.fn.extend({
   check: function() {
     return this.each(function() { this.checked = true; });
   },
   uncheck: function() {
     return this.each(function() { this.checked = false; });
   }
  });

  $(function(){

   $("#button1").click(function(){

     $('input').check();
   });

   $("#button2").click(function(){

     $('input').uncheck();
   });
  });
  </script>
  <style>
  div { background:yellow; margin:5px; }
  span { color:red; }
  </style>
</head>
<body>
<form>
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
</form>
<input type='button' id='button1' value='전체선택'>
<input type='button' id='button2' value='전체해제'>
</body>
</html>



11. jQuery.extend( object )  Returns: jQuery
jQuery.fn.extend( 객체), 실행후 jQuery객체를 반환

Extends the jQuery object itself.
제이쿼리 자체를 확장
아직은 잘 모르겟음



14. jQuery.noConflict( )  Returns: jQuery
jQuery.noConflict( ),  실행후 jQuery객체를 반환

Run this function to give control of the $ variable back to whichever library first implemented it.
아직은 잘 모르겠음


15. jQuery.noConflict( extreme )  Returns: jQuery
jQuery.noConflict( extreme ), 실행후 jQuery객체를 반환

Revert control of both the $ and jQuery variables to their original owners. Use with discretion.
아직은 잘 모르겠음
'Developement/Web' Related Articles more