Jquery - 속성 변경(1) : 클래스, 태그

 

1. 클래스 속성 변경

addClass()	지정한 element에 클래스 추가하는 함수
removeClass()	지정한 element에 클래스 삭제하는 함수
toggleClass()	지정한 element에 클래스 있으면 삭제, 없으면 추가하는 함수

 

<div id="container">
    <h1 class="a">h1이야</h1>
    <p>p1</p>
    <p>p2</p>
    <span class="a">span</span>
    <h2>h2</h2>
</div>

<button class="btn btn-outline-primary" onclick="addClassTest();">addClass()</button>
<button class="btn btn-outline-warning" onclick="removeClassTest();">removeClass()</button>
<button class="btn btn-outline-danger" onclick="toggleClassTest();">toggleClass()</button>

    <style>
        .a0{
            color:red;
        }
        .a1{
            color:orange;
        }
        .a2{
            color:yellow;
        }
        .a3{
            color:blue;
        }
        .a4{
            color:green
        }
        .b0{
            background-color:purple;
        }
        .a{
            font-size:30px;
            font-weight:bolder;
        }
    </style>

 

<script>

const addClassTest=()=>{

            // $("div#container>*").addClass("a1");
            // $("div#container>*").addClass("a1 b0");
             $("div#container>*").each((i,v)=>{
                 $(v).addClass(`a${i} b0`);
              })

}

const removeClassTest=()=>{
         
            $("div#container>*").removeClass(function(index,val){
                return `a${index} b0`;
            });

}

const toggleClassTest=()=>{

             $("div#container>*").toggleClass("a");
            
}

</script>

 

 

 

2. 태그 속성 변경

attr("속성명")	매개변수명과 동일한 속성의 값을 출력해주는 함수
attr("속성명","속성값")	속성명에 속성값을 대입해주는 함수
attr({속성명:속성값,속성명:속성값....})	객체로 전달된 모든 속성에 속성값을 설정하는 함수
attr("속성명",function(i,v){ return 속성값 })	전달된 속성명에 함수의 반환값을 속성값으로 설정하는 함수

 

[기본]

 <div id="container2">
        <img src="https://item.kakaocdn.net/do/494ea37cf81a6a1efb5dfab1783ab487616b58f7bf017e58d417ccb3283deeb3" alt="" width="200" height="200">
        <input type="text" name="test">
</div>

<button onclick="getAttr();">속성값 가져오기</button>
<button onclick="setAttr();">속성값 설정하기</button>
<button onclick="setAttrObj();">속성값 다수 설정하기</button>
<button onclick="setAttrFunc();">속성값 함수로 설정하기</button>
<button onclick="removeAttrTest();">속성삭제하기</button>

 

<script>

        const getAttr=()=>{

            const src=$("div#container2>img").attr("src");
            console.log(src);
           
            const width=$("div#container2>img").attr("width");
            const height=$("div#container2>img").attr("height");
            console.log(width,height);

            const type=$("#container2>input").attr("type");
            console.log(type);

            //input태그의 value값은 attr()함수로 가져오지 않습니다.
            // const value=$("#container2>input").attr("value"); XXX
            //val()함수를 이용해야한다.
            const value=$("#container2>input").val();
            console.log(value);
        }

        const setAttr=()=>{

            const img=$("<img>").attr("src","https://item.kakaocdn.net/do/494ea37cf81a6a1efb5dfab1783ab487616b58f7bf017e58d417ccb3283deeb3");
            img.attr("width","400");
            img.attr("height","400");
            $("#container2").append(img);   
        }

        const setAttrObj=()=>{

            const div=$("<div>").addClass("container");
            const label=$("<label>").attr("for","userId");
            label.text("아이디")
            const input=$("<input>");
            input.attr({
    	 "type":"text",
                "name":"userId",
                "id":"userId"
            });
            div.append(label);
            div.append(input);
            $("#container2").append(div);
        }

        const setAttrFunc=()=>{

            const imgs=$("#container2>img");
            imgs.attr("width",function(i,v){
                console.log(i, v);
                return Number(v)+100;
           })
       }

        const removeAttrTest=()=>{
            $("#container2>img").removeAttr("src");
        }

</script>

 

 

[응용 - 체크박스]

<div id="checkcontainer">
    <input type="checkbox" name="lang" value="html">html
    <input type="checkbox" name="lang" value="css">css
    <input type="checkbox" name="lang" value="javascript">javascript
        <br>
    <input type="checkbox" name="lang" value="jquery">jqeury
    <input type="checkbox" name="lang" value="servlet">servlet
</div>
<button onclick="checkboxCheck();">빈박스 모두체크</button>

 

<script>
  const checkboxCheck=()=>{
     $("#checkcontainer>input").each((i,v)=>{
          const flag=$(v).prop("cheked");
          if(!flag) $(v).prop("checked",true);
          else $(v).prop("checked",false);
     })
  }
</script>