Where The Streets Have No Name

jQuery 기본 예제 모음(5) : Manipulation 본문

Developement/Web

jQuery 기본 예제 모음(5) : Manipulation

highheat 2008. 4. 10. 19:34
출처 : http://apmusers.com/tt/dbckdghk/59

<Manipulation>

1. html( )  Returns: String
html( ), 실행후 문자열 반환

Get the html contents (innerHTML) of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).
매치되어진 첫번째 원소의 html을 가져와서 반환

<!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(){
   
   $("p").click(function () {
     var htmlStr = $(this).html();
     $(this).text(htmlStr);
   });

  });
  </script>
  <style>
  p { margin:8px; font-size:20px; color:blue;
     cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }
  </style>
</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>
</body>
</html>




2. html( val )  Returns: jQuery
html( val ), 실행후 jQuery 객체 반환

Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).

매치되는 모든 원소들에게 주어진 html을 삽입하고 객체를 반환한다.

<!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").html("<span class='red'>Hello <b>Again</b></span>");
  });
  </script>
  <style>
  .red { color:red; }
  </style>
</head>
<body>
  <span>Hello</span>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>



3. text( )  Returns: String
text( ), 실행후 문자열 반환

Get the text contents of all matched 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(){
   
   var str = $("p:first").text();
   $("p:last").html(str);

  });
  </script>
  <style>
  p { color:blue; margin:8px; }
  b { color:red; }
  </style>
</head>
<body>
  <p><b>Test</b> Paragraph.</p>
  <p></p>
</body>
</html>



4. text( val )  Returns: jQuery
text( val ), 실행후 jQuery 객체 반환

Set the text contents of all matched 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(){
   $("p").text("<b>Some</b> new text.");
  });
  </script>
  <style>
  p { color:blue; margin:8px; }
  </style>
</head>
<body>
  <p>Test Paragraph.</p>
</body>
</html>



5. append( content )  Returns: jQuery
append( content ) , 실행후 jQuery 객체 반환

Append content to the inside 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(){
   $("p").append("<b>Hello</b>");
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>


6. appendTo( content )  Returns: jQuery
appendTo( content ), 실행후 jQuery 객체 반환

Append all of the matched elements to another, specified, set of 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(){
   $("span").appendTo("#foo"); // check append() examples
  });
  </script>
  <style>#foo { background:yellow; }</style>
</head>
<body>
  <span>I have nothing more to say... </span>
  <div id="foo">FOO! </div>
</body>
</html>



7. prepend( content )  Returns: jQuery
prepend( content ), 실행후 jQuery 객체 반환

Prepend content to the inside 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(){
   $("p").prepend("<b>Hello </b>");
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>there friend!</p>
  <p>amigo!</p>
</body>
</html>



8. prependTo( content )  Returns: jQuery
prependTo( content )  실행후 jQuery 객체 반환

Prepend all of the matched elements to another, specified, set of 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(){
   $("span").prependTo("#foo"); // check prepend() examples
  });
  </script>
  <style>div { background:yellow; }</style>
</head>
<body>
  <div id="foo">FOO!</div>
  <span>I have something to say... </span>
</body>
</html>



9. after( content )  Returns: jQuery
after( content ), 실행후 jQuery 객체를 반환

Insert content after each of the matched 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(){
   $("p").after("<b>Hello</b>");
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>



10. before( content )  Returns: jQuery
before( content )  실행후 jQuery 객체를 반환

Insert content before each of the matched 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(){
   $("p").before("<b>Hello</b>");
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p> is what I said...</p>
</body>
</html>



11. insertAfter( content )  Returns: jQuery
insertAfter( content ), 실행후 jQuery 객체 반환

Insert all of the matched elements after another, specified, set of 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(){
   $("p").insertAfter("#foo"); // check after() examples
  });
  </script>
  <style>#foo { background:yellow; }</style>
</head>
<body>
  <p> is what I said... </p><div id="foo">FOO!</div>
</body>
</html>



12. insertBefore( content )  Returns: jQuery
insertBefore( content ), 실행후 jQuery 객체 반환

Insert all of the matched elements before another, specified, set of 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(){
   $("p").insertBefore("#foo"); // check before() examples
  });
  </script>
  <style>#foo { background:yellow; }</style>
</head>
<body>
  <div id="foo">FOO!</div><p>I would like to say: </p>
</body>
</html>



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

Wrap all matched elements with a structure of other elements.
매치되어진 원소를 주어진 html로서 감싼후 객체를 반환

<!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(){
   $("span").wrap("<div><div><p><em><b></b></em></p></div></div>");
  });
  </script>
  <style>
  div { border:2px blue solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  </style>
</head>
<body>
  <span>Span Text</span>
  <span>Another One</span>
</body>
</html>



14. wrap( elem )  Returns: jQuery
wrap( elem ), 실행후 jQuery 객체 반환

Wrap all matched elements with a structure of other 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(){
   $("p").wrap(document.getElementById('content'));
  });
  </script>
  <style>#content { background:#9f9; }</style>
</head>
<body>
  <p>Test Paragraph.</p><div id="content"></div>
</body>
</html>



15. wrapAll( html )  Returns: jQuery
wrapAll( html )  실행후 jQuery 객체 반환

Wrap all the elements in the matched set into a single wrapper element.
매치되는 원소들을 주어진 html로 모두 하나로 감싼다.

<!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(){
   $("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");
  });
  </script>
  <style>
  div { border:2px blue solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  strong { color:red; }
  </style>
</head>
<body>
  <span>Span Text</span>
  <strong>What about me?</strong>
  <span>Another One</span>
</body>
</html>



16. wrapAll( elem )  Returns: jQuery
wrapAll( elem ), 실행후 jQuery 객체 반환

Wrap all the elements in the matched set into a single wrapper 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(){
   $("p").wrapAll(document.createElement("div"));
  });
  </script>
  <style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>




17. wrapInner( html )  Returns: jQuery
wrapInner( html ), 실행후 jQuery 객체 반환

Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
매치되어진 원소 속의 내용을 주어진 것으로 감싼다

<!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(){
   $("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");
  });
  </script>
  <style>
  div { border:2px green solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  </style>
</head>
<body>
  Plain old text, or is it?
</body>
</html>



18. wrapInner( elem )  Returns: jQuery
wrapInner( elem ), 실행후 jQuery 객체를 반환

Wrap the inner child contents of each matched element (including text nodes) with a DOM 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(){
   $("p").wrapInner(document.createElement("b"));
  });
  </script>
  <style>p { background:#9f9; }</style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>



19. replaceWith( content )  Returns: jQuery
replaceWith( content ), 실행후 jQuery 객체 반환

Replaces all matched elements with the specified HTML or 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(){
   
   $("button").click(function () {
     $(this).replaceWith("<div>" + $(this).text() + "</div>");
   });

  });
  </script>
  <style>
  button { display:block; margin:3px; color:red; width:200px; }
  div { color:red; border:2px solid blue; width:200px;
       margin:3px; text-align:center; }
  </style>
</head>
<body>
  <button>First</button>
  <button>Second</button>
  <button>Third</button>
</body>
</html>



20. replaceAll( selector )  Returns: jQuery
replaceAll( selector ), 실행후 jQuery 객체 반환

Replaces the elements matched by the specified selector with the matched 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(){
   $("<b>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples
  });
  </script>
 
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>



21. empty( )  Returns: jQuery
empty( )  실행후 jQuery 객체 반환

Remove all child nodes from the set of matched 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(){
   
   $("button").click(function () {
     $("p").empty();
   });

  });
  </script>
  <style>
  p { background:yellow; }
  </style>
</head>
<body>
  <p>
   Hello, <span>Person</span> <a href=";">and person</a>
  </p>
  <button>Call empty() on above paragraph</button>
</body>
</html>



22. remove( expr )  Returns: jQuery
remove( expr ), 실행후 jQuery 객체를 반환

Removes all matched elements from the DOM.
매치되는 모든 원소를 옮기다.

<!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(){
   
   $("button").click(function () {
     $("p").remove();
   });

  });
  </script>
  <style>p { background:yellow; margin:6px 0; }</style>
</head>
<body>
  <p>Hello</p>
  how are
  <p>you?</p>
  <button>Call remove() on paragraphs
</body>
</html>



23. clone( )  Returns: jQuery
clone( )  실행후 jQuery 객체 반환

Clone matched DOM Elements and select the clones.
선택되어진 원소를 복사

<!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(){
   $("b").clone().prependTo("p");
  });
  </script>
 
</head>
<body>
  <b>Hello</b><p>, how are you?</p>
</body>
</html>



24. clone( true )  Returns: jQuery
clone( true )  실행후 jQuery 객체 반환

Clone matched DOM Elements, and all their event handlers, and select the clones.
완벽한 복사

<!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(){
   
   $("button").click(function(){
     $(this).clone(true).insertAfter(this);
   });

  });
  </script>
 
</head>
<body>
  <button>Clone Me!</button>
</body>
</html>
'Developement/Web' Related Articles more