[J] JavaScript & jQuery 공부하기 #26

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

 

31. 문자 조작 방법
  * text()와 html() 메소드
    - 선택 연산자로 선택한 요소에 대해서 text() 메소드를 이용해 문자를
      변경하거나 html() 메소드를 이용해 선택된 요소의 HTML 요소를 변경함

      기본상태 : < p>hello world!</ p>
      메소드사용: $("p").text("Thank you!");
                  $("h1").html("< h2>Thank you!</ h2>");
      결과 : < p>Thank you!< /p>
             < h1>< h2>"Thank you!"< /h2>< /h1>

  * val()와 attr() 메소드
    - 선택 연산자로 선택한 요소의 value 값을 val() 메소드를 사용하여
      얻어오거나 변경할 수 있고, attr() 메소드를 사용하여 속성값을
      얻어오거나 변경할 수 있다.

      기본상태 : < a href="http://www.google.com">< /a>
                 < input type="text" value="hello">
      메소드 사용 : alert($("a").attr("href"));
                    alert($("input").val());
      결과 : "http://www.google.com"
             "hello"

  * text()와 html() 이용 문자 조각
    - 각 메소드를 적용할 < p>요소와 < input>요소, 버튼을 만드는데,
      이 때 각각의 id 값을 지정하여 서로 구분할 수 있게 정의함
    - btn1 버튼을 누르면 각 id 값을 이용하여 test1의 텍스트 test2의 요소를 변경하는 메소드.
      btn2 번째 버튼을 누르면 test3 input 박스의 값을 변경하는 메소드
      btn3 번째 버튼을 누르면 input 박스의 값을 띄워주는 메소드를 정의함

      < script type="text/javascript">
        $(document).ready(function(){
          $("#btn1").click(function(){
            $("#test1").text("hello world"),
            $("#test2").html("< b>hello world!</ b>");
          });
          $("#btn2").click(function(){
            $("#test3").val("hello world!");
          });
          $("#btn3").click(function(){
            alert("값 : " + $("#test3").val());
          });
        });
      < /script>

  * val()와 attr()이용 문자 조작
    - 메소드를 적용할 네이버로 링크를 연결하는 < a>요소와
      이벤트를 발생시킬 버튼을 생성한다
    - 버튼을 클릭하는 이벤트가 발생하면 링크에 연결된 주소를 attr()
      메소드를 이용해서 얻어온 후 경고창에 출력한다.
      < script type="text/javascript">
        $(document).ready(function(){
          $("button").click(function(){
            alert("링크주소: " + $("#link").attr("href"));
          });
        })
      </ script>

  * 예제
  < script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("#link").attr({
          "href" : "http://www.naver.com"
        });
      });
      $("button").click(function(){
        $("#link").text("네이버로 이동하기")
      })
    })
  </ script>
  < body>
    < p>< a href="http://www.google.com" id="link">google로 이동하기</ a>< /p>
    < button>링크를 naver로 변경하기</ button>
  </ body>