prop(), attr(), map방식

allrouvel 2024. 3. 6. 13:15

2024. 3. 6. 13:15

728x90

attr()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <style>
        .imgBorder {border: 2px solid #000;}
    </style>
    <script>
        /*
        attr() : HTML의 속성(arribute)을 핸들링함. 정적인 속성을 제어
        attr("속성명") - HTML Element에 있는 속성정보를 string로 가져온다.
        attr("속성명", "속성값") - 해당 요소의 속성 정보를 속성값으로 설정(변경)한다.
        removeAttr("속성명") - 해당 요소의 속성을 제거한다.
        */

        function gbb(){
            // srcVal="../img/math_img_1.jpg";
            var srcVal = $("#sec_1 img").attr("src");
            console.log(srcVal);
            // replace("기존 값","변경할 값")
            $("#sec_1 img").attr({
                "width" : 200,
                "src": srcVal.replace("1.jpg","2.jpg"),
                "alt":"바위",
                "title":"바위"
            });

            $("#sec_1 img").removeClass("imgBorder");

            $("#sec_1 img").attr({
                "width":200,
                "src": srcVal.replace("1.jpg","2.jpg"),
                "alt":"바위",
                "title":"바위"
            }).removeAttr("class");

            let imgs = document.getElementById("sec_1").getElementsByTagName("img")[0];
            imgs.setAttribute("width","200px");
            imgs.setAttribute("src",srcVal.replace("1.jpg","2.jpg"));
            imgs.setAttribute("alt","바위");
            imgs.setAttribute("title","바위");
            //1개씩만 가능 .으로 연결불가

            $("button").hide();
        }
    </script>
</head>
<body>
    <section id="sec_1">
        <h2>이미지 속성</h2>
        <p><img src="C:\hwork\img\math_img_1.jpg" alt="가위" title="가위" class="imgBorder"></p>
        <button onclick="gbb()">클릭</button>
    </section>
    <h1><strong>객체 조작 및 생성</strong></h1>
</body>
</html>

prop()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
      /*
        prop() : JavaScript의 프로퍼티(property)를 핸들링 함. 동적인 속성을 제어.
        prop("속성명") - 프로퍼티는 JavaScript에서 사용하는 속성 정보를 가져오므로
        HTML의 정보와 일치하기도 하고 일치하지 않을 수 있다.
        prop("속성명", "속성값") - 해당 요소의 속성 정보를 속성값으로 설정(변경)한다.

        prop() 동적인 속성 제어
        attr() 정적인 속성 제어
        */
      function bFnc() {
        // prop("checked"): 체크된 상태인지 여부를 true, false로 반환
        var result_1 = $("#chk1").prop("checked");
        console.log(result_1);

        var result_2 = $("#chk2").prop("checked");
        console.log(result_2);

        var result_3 = $("#chk3").prop("checked");

        // prop("checked", true): 해당 요소 상태를 checked(true)하도록 처리함.
        var result_3 = $("#chk3").prop("checked", true);

        // prop("selectedIndex"): 해당 요소의 선택된 option요소인 인덱스를 반환함
        var result_3 = $("#se_1").prop("selectedIndex");
        console.log(result_3);
        $("button").hide();
      }

      $(function () { //즉시실행함수, body후에
        document.getElementById("se_1").onchange = bFnc;
        // document.getElementById('se_1').onchange = function(e){
        //     console.log(e);
        // };
      });
    </script>
  </head>
  <body>
    <h1><strong>prop() 함수</strong></h1>
    <form id="form_1">
      <p>
        <input type="checkbox" name="chk1" id="chk1" />
        <label for="chk1">chk1</label>
        <input type="checkbox" name="chk2" id="chk2" checked />
        <label for="chk2">chk2</label>
        <input type="checkbox" name="chk3" id="chk3" />
        <label for="chk3">chk3</label>
      </p>
      <p>
        <select name="se_1" id="se_1">
          <option value="opt1">option1</option>
          <option value="opt2">option2</option>
          <option value="opt3" selected>option3</option>
        </select>
      </p>
    </form>
    <button onclick="bFnc()">적용하기</button>
  </body>
</html>

attr()
prop()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
        function bFnc(){
            var $goLink = $('#link');
            //변수명 특수기호 $, _ 가능
            console.log($goLink.attr('href'));
            console.log($goLink.prop('href'));
            
            var $goLink = $('.link');
            console.log($goLink.attr('href'));
            console.log($goLink.prop('href'));

            var $goLink = $('#amove');
            $goLink.attr('href',"https://www.google.com/");
            
            var $goLink = $('.amove');
            $goLink.prop('href',"#none");
        }
        //naver.com - 도메인 ip, port번호
    </script>
</head>
<body>
    <p>
        <a href="#none" id="link">버튼1</a>
        <a href="https://www.naver.com" class="link">버튼2</a>
        
        <a href="#none" id="amove">이동1</a>
        <a href="https://www.naver.com" class="amove">이동2</a>
        <br><br><button onclick="bFnc()">적용하기</button>
    </p>

    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>

    <p id="none">id가 none인 태그위치</p>

    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
</body>
</html>

map방식

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ex04_03.html</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
        function btn(){
            /*
            map방식, json(=JavaScript ObjectNotation)방식 :
            - 자바스크립트의 오브젝트를 표기하기 위한 표기법으로 {}(중괄호) 안에
            key: value형식으로 나열하는 방법이다.
            자바스크립트의 오브젝트를 표현하는 표기법임.
            ""문자열 큰 따로 안 묶어도 자동 인식함
            형식 : {key : value, key : value, ...} =>자료형 : object, 표기방식 :json
            */
           $("img").attr({width:"100px", height:"100px"});
           
           $("img").attr("src", function(){
                return "C:/hwork/img/" + this.alt + ".jpg";
           });
           // let arr = document.getElementByTagName('img');
           // $("img").attr("src","C:/hwork/img/img_girl.jpg");

           $("img").attr("title",function(index){
                return index + "번 img 엘리먼트 타이틀은 " + this.alt;
           });
        }
    </script>
</head>
<body>
    <img title="img_girl" alt="img_girl"><img title="cute_dog" alt="cute_dog">
    <img title="pic_trulli" alt="pic_trulli">
    <br><br><button onclick="btn()">클릭</button>
</body>
</html>

728x90

저작자표시 비영리 변경금지

'[JS]' 카테고리의 다른 글

on (0)	2024.03.07
search (0)	2024.03.07
[jQuery] slice(), find(), filter(), remove(), replace(), empty() (0)	2024.03.06
[JS] jQuery ㅇㅇㅇ (0)	2024.03.06
[JS] jQuery (0)	2024.03.05

allrouvel

prop(), attr(), map방식

'[JS]' 카테고리의 다른 글

+ Recent posts

티스토리툴바