======jQuery - Set Content and Atrributes======
<WRAP left notice 70%>
  * description : jQuery HTML - jQuery Set Content and Attributes
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-16
</WRAP>
<WRAP clear></WRAP>
\\

=====Set Content - text(), html(), and val()=====

이전 페이지와 동일한 세 가지 메서드를 사용하여 콘텐츠를 설정합니다.\\

  * ''%%text()%%'' - 선택한 요소의 텍스트 콘텐츠를 설정하거나 반환합니다.
  * ''%%html()%%'' - 선택한 요소 (HTML 마크업 포함)의 콘텐츠를 설정하거나 반환합니다.
  * ''%%val()%%'' - 폼 필드의 값을 설정하거나 반환합니다.

다음 예제는 %%jQuery%% ''%%text()%%'', ''%%html()%%'' 및 ''%%val()%%'' 메서드를 사용하여 콘텐츠를 설정하는 방법을 보여줍니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("#btn1").click(function () {
        $("#test1").text("Hello World!!!");
      });
      $("#btn2").click(function () {
        $("#test2").html("<b>Hello World!!<b>");
      });
      $("#btn3").click(function () {
        $("#test3").val("Holy God!!!");
      });
    });
</code>
\\
=====A Callback Function for text(), html(), and val()=====
위의 세 가지 %%jQuery%% 메서드인 ''%%text()%%'', ''%%html()%%'' 및 ''%%val()%%''도 모두 콜백 함수와 함께 제공됩니다.\\
콜백 함수에는 두 개의 매개 변수 - 선택한 요소 목록에 있는 현재 요소의 인덱스(index)와 원래(이전) 값 - 가 있습니다:\\  
그런 다음 함수에서 새 값으로 사용할 문자열을 반환합니다.\\
\\
다음 예제는 콜백 함수가 있는 ''%%text()%%'' 및 ''%%html()%%''을 보여줍니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("#btn1").click(function () {
        $("#test1").text(function (i, origText) {
          return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
        });
      });

      $("#btn2").click(function () {
        $("#test2").html(function (i, origText) {
          return "Old html: " + origText + " New html: Hello <b>world</b> (index: " + i + ")";
        });
      });
    });
</code>
\\
=====Set Attributes - attr()=====
%%jQuery%% ''%%attr()%%'' 메서드는 속성 값을 설정/변경하는 데도 사용됩니다.\\
\\
다음 예제는 링크에서 %%href%% 속성 값을 변경(설정)하는 방법을 보여줍니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#w3s").attr("href", "https://www.w3schools.com/jquery/");
      });
    });
</code>
\\
''%%attr()%%'' 메서드를 사용하면 동시에 다수의 속성들을 설정할 수도 있습니다.\\
\\
다음 예제는 %%href%% 및 %%title%% 속성을 동시에 설정하는 방법을 보여줍니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#w3s").attr({
          "href": "https://www.w3schools.com/jquery/",
          "title": "W3Schools jQuery Tutorial"
        });
      });
    });
</code>
\\
=====A Callback Function for attr()=====
%%jQuery%% 메서드 ''%%attr()%%''도 콜백 함수와 함께 제공됩니다.\\ 
콜백 함수에는 두 개의 매개 변수가 있습니다.\\
선택한 요소 목록에서 현재 요소의 인덱스와 원래(이전) 속성 값입니다.\\ 
그런 다음 함수에서 새 속성 값으로 사용할 문자열을 반환합니다.\\
\\
다음 예제는 콜백 함수가 있는 ''%%attr()%%''을 보여줍니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#w3s").attr("href", function (i, origValue) {
          return origValue + "/jquery/";
        });
      });
    });
</code>































=====jQuery HTML Reference=====
모든 %%jQuery%% %%HTML%% 메서드에 대한 전체 개요를 보려면, [[https://www.w3schools.com/jquery/jquery_ref_html.asp|jQuery HTML/CSS Reference]]로 이동하십시오.



{{tag>오션 jQuery HTML Set Content and Attributes}}