[jQuery] 05_속성관련 메소드

css(), text(), html()
prop(), attr() 요소의 속성 접근 함수
ajax() 웹서버와 문자단위 통신할때(비동기식) 사용하는 함수

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>05_속성관련메소드.html</title>
  <style></style>
  <!-- jQuery import -->
  <script src="jquery-3.6.4.min.js"></script>
</head>

<body>

    <h3>속성관련메소드</h3>
    <p>
        <button>title얻기</button>
        <button>src변경</button>
        <button>여러개의 속성을 변경</button>
    </p>

    <img src="../images/k7.png" alt="라이언" title="ryan">
    <!--
        <img> :           요소, element
        src, alt, title : 속성, property, attribute
    -->

  <script>

        $("button:eq(0)").click(function(){
            // alert();
            //<img>요소의 title속성값 가져오기 (getter개념)
            let title=$("img").attr("title");
            alert(title);
        });

        $("button:eq(1)").click(function(){
            //setter개념
            $("img").attr("src", "../images/k6.png");
        });

        $("button:eq(2)").click(function(){
            let obj={
                 "width":400
                ,"height":300
                ,"src":"../images/k5.png"
                ,"alt":"콘"
                ,"title":"CON"
            };
            $("img").attr(obj);
        });

        //jQuery Method Chaining
        //$().css().text().attr()

  </script>

</body>
</html>

저작자표시 비영리 변경금지 (새창열림)

'Frontend > jQuery' 카테고리의 다른 글

[jQuery] 04_css메소드 : Get, Set (0)	2023.03.29
[jQuery] 03_text(), html() 함수 (0)	2023.03.29
[jQuery] 02_이벤트 (0)	2023.03.29
[jQuery] 01_jquery시작 (0)	2023.03.29