[구디아카데미] jQuery 객체 속성 설정

[구디아카데미]

✅ 클래스 속성 다루기

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

    <script>
		// 위에 이미 버튼들을 이미 만들었다고 가정
      
        const addClassTest =()=>{ // 클래스를 추가하는 함수
            // $("#container>*").addClass("a");  // 다수의 태그객체들이 for문필요없이 다 적용됨 
            $("#container>*").addClass("a b0"); // a클래스와  b0 클래스 둘다 적용
        }

        const removeClassTest=()=>{ // 클래스를 삭제하는 함수
            // $("#container>*").removeClass("a"); // a클래스 제거
            $("#container>*").removeClass("a b0"); // a클래스와 b클래스 동시에 제거
        }

        const toggleClassTest=()=>{ // 지정한 element에 클래스를 있으면 삭제, 없으면 추가하는 함수
            //$("#container>*").toggleClass("a"); // a 클래스가 있으면 a클래스 삭제하고 a클래스가 없으면 생성 
            $("#container>*").toggleClass("a b0"); //
        }

        const rainbow=()=>{
            setInterval(() => {
                $("#container>*").each((i,e)=>{
                // console.log(i,e); // 인덱스번호와 태그가 출ㄹ력됨
                //$(e).addClass(`a${i}`); // $로 감싸면 jquery 함수를 사용할 수 있음
                $(e).toggleClass(`a${i}`); // $로 감싸면 jquery 함수를 사용할 수 있음
            });
            }, 500);
            // $("#container>h1").addClass("a0");
            // $("#container>p").addClass("a1");
            // $("#container p:last").addClass("a2");
            // $("#container>span").addClass("a3");
            // $("#container>h2").addClass("a4");
        }
    </script>

✅ 클래스 속성 변경

    attr("속성명") : 속성값을 확인하는 함수
    attr("속성명","속성값") : 속성값을 변경하는 함수
    attr("속성명",function(index,value){return value}) : 속성값을 변경할 때 특정로직이 필요한 경우 사용
    attr({"속성명":"속성값","속성명":"속성값","속성명":"속성값",....}) : 한번에 다수의 속성값을 수정할 때 사용

	<script>
        const attrTest4=()=>{
            $("#container2>img").attr("width",function(index,value){  // 특정 로직으로 속성값 변경
                return value*2;  // 반환되는값이 width의 속성으로 들어감 (누를때마다 2배씩 커짐)
            });

            $("#container2>img").attr("height",function(index,value){ // 특정 로직으로 속성값 변경
                return value*2;  // 반환되는값이 height의 속성으로 들어감 (누를때마다 2배씩 커짐)
            });
        }


        const attrTest3=()=>{
            const $input=$("<input>");
            $input.attr({   // 속성값 다수 설정
                "type":"text",
                "name":"userId",
                "id":"userId"
            });
            $("#container2").append($input);
        }

        const attrTest2=()=>{
            const img=$("#container2>img"); // 해당 태그의 이미지 객체 가져와서
            img.attr("height",200); // 이미지의 height 속성값을 200으로 설정   
            img.attr("width",200); // 속성값 설정
        }

        const attrTest=()=>{
            const src = $("#container2>img").attr("src");  // 속성값 가져오기
            console.log(src);
            const height = $("#container2>img").attr("height");  // 속성값 가져오기
            const width = $("#container2>img").attr("width");  // 속성값 가져오기
            console.log(height,width);

            const type = $("#container2>input").attr("type");  // 속성값 가져오기
            console.log(type); 
        }
      
      	    <script>
        const checkedCheck=()=>{ // 체크박스는 prop으로 가져와야함
            // $("#checkboxcontainer>input").attr("checked",(i,value)=>{
                $("#checkboxcontainer>input").prop("checked",(i,value)=>{ 
                console.log(i,value);
                return !value;
            });
        }
    </script>

      
     </script>

✅ 클래스 속성 삭제

• removeAttr

    <script>
        const removeTest=()=>{
            $("#removeAttr>img").removeAttr("src");  // 속성지우는 함수 -> removeAttr
        }
    </script>

✅ jQuery로 스타일 적용

• 위 클래소 속성 변경에 대한 내용과 비슷하다

    <script>
        const changeStyle=()=>{
            const fontSize = $("#csschange>p").css("fontSize");  // 속성값 가져오기
            console.log(fontSize);
            $("#csschange>p").css("fontStyle","italic"); // 속성값 설정
            $("#csschange>p").css("fontSize",(index,value)=>{  // 로직으로 속성값 설정
                // value는 16px -> 16px + 10은 연산이안되므로 분리해서 더해주고 더한 후 단위까지 합쳐줌
                return (parseInt(value)+10)+"px";   
            });
            
            $("#csschange>p").css({  // 다수의 속성 값 설정
                "border":"1px solid red",
                "textShadow":"2px 2px 5px yellow",
                "fontWeight":"bolder"
            });
        }
    </script>

✅ textNode를 수정

• html([출력할값]) : 자바스크립트에서 innerHTML에 값을 대입하는것과 동일
• text([출력할값]) : 자바스크립트에서 innerText에 값을 대입하는것과 동일

    <script>
        const textTest=()=>{
            const text=$("#textNodeTest").text();
            console.log(text);
            $("#textNodeTest").text(text+"<h3>이것도 추가하자</h3>");  // text는 태그인식을 못함      +연산이 없으면 덮어쓰기됨
        }

        const htmlTest=()=>{
            const text = $("#textNodeTest").html();
            console.log(text);
            $("#textNodeTest").html(text+"<h3>이건추가하자</h3>"); // html는 태그인식 가능         +연산이 없으면 덮어쓰기됨
        }
    </script>

✅ input태그의 value값을 가져오기

• val()함수를 이용해서 데이터를 가져온다.

    <script>
        const inputValue = ()=>{
            const data = $("#inputValue>input").each((i,v)=>{  // v는 HTMLEelement가 대입되기때문에 자바스크립트 방식임
                console.log($(v).val());  // val은 jQuery 방식으로 할때 사용할 수 있는 속성이기때문에 jQuery 방식으로 바꿔줘야한다
                console.log(v.value);   // value는 javascript방식임 
            })
        }
    </script>

• 예제문제

    <div id="test">
        <input type="text" name="imgSrc">
        <button onclick="addImg();">이미지추가</button>
        <div id="imgContainer"></div>
    </div>
    <!-- 이미지추가버튼을 클릭하면 imgSrc에 작성한 이미지를 200X200 크기로 테두리 magenta 색 있고, 동그랗게 imgContainer에 출력하기 -->
    
    <script>
        const addImg=()=>{

            const src = $("#test>input").val();
            
            // const $img = $("<img>"); // img 태그 생성
            // $img.attr({    // img 속성 변경
            //     "src":src,
            // })

            // $img.css({   // img 스타일 변경
                // "border":"1px solid magenta",
                // "border-radius":"100px",
                // "width":"200px",
                // "height":"200px",
            // })
            
            // $("#test").append($img[0]);


            // 체이닝 탐색 방식으로 해결
            const $img = $("<img>"); 
            $img.attr({    
                "src":src,
            }).css({
                "border":"1px solid magenta",
                "border-radius":"100px",
                "width":"200px",
                "height":"200px",
            }).appendTo($("#imgContainer"));
        }
    </script>