jQuery: Method - 속성조작 메서드

 

속성조작 메서드

1. html() : html태그값을 얻어오거나, html태그 안에 내용을 변경시킬때 사용

$("선택자").html();
$("선택자").html("수정할내용");

 

 

2. text() : html 태그의 내용물을 얻어오거나, 변경할때

$("선택자").text();
$("선택자").text("변경할 내용");

 

        $(function(){
            //h1의 html값을 얻어서 콘솔에 출력하기
            console.log($("h1").html());
            //h1의 내용을 <em>를 넣어서 변경하기
            $("h1").html("<em> 속성</em>");
  
            //h2중에서 첫번째 h2의  내용물 text
            console.log($("h2:eq(0)").text());
            //h2중에서 두번째 h2의 내용물 text 변경
            $("h2:eq(1)").text("두번째 문장");
        })

 

 

3. attr() : 선택자 속성을 얻어오거나, 변경할때

1. $("선택자").attr("속성명");
2. $("선택자").attr("속성명","값");
3. $("선택자").attr({
   "속성":"값",
   "속성":"값",
   "속성":"값"
});

        $(function(){
            //js : 선택자.on이벤트종류=function(){}
            //jquery : 선택자.이벤트종류(function(){})
            $("button").click(function(){
                $("h1").text("키세스");
//                $(".event>img").attr("src","images/eventBanner8.jpg"); 속성 1개만 바꿀때
                //속성 여러가지 바꿀때
                $(".event>img").attr({
                    "src":"images/eventBanner8.jpg",
                    "alt":"이벤트8" // ; 찍지 않음
                })
            })
        })

 

 

4. removeAttr() 

$("선택자").removeAttr("속성명");

        $(function(){
            $("button").click(function(){
                $("a").removeAttr("target");
            })
        })

 

 

5. css() : 스타일변경하기

- $("선택자").css("속성","값");
- $("선택자").css({
   "속성":"값",
   "속성":"값",
   "속성":"값
})

* "background-color" , backgroundColor 두가지 사용가능

        $(document).ready(function() {
            $("h1").css({
                "background-color":"pink",
                color:"white",
                fontSize:"50px"
            })
        })

 

 

 

6. addClass() 

$("선택자").addClass("클래스명");

 

7. removeClass() 

$("선택자").removeClass("클래스명")

        $(document).ready(function(){
            $("#nav>li").click(function(){
//                $(this).addClass("active");
//                $(this).siblings("li").removeClass("active");
                $(this).addClass("active")
                    .siblings("li").removeClass("active");
            })
        })

응용

    $(".tabBtn>li").click(function(){
        var sNum =$(this).index();
        console.log(sNum);
        
        $(this).addClass("active")
            .siblings("li").removeClass("active");
        
        $(".tabList>div").eq(sNum).css("display","block")
            .siblings().css("display","none");
    })

 

 

8. toggleClass() : 클래스 속성을 추가/제거를 번갈아가면서 실행

$("선택자").toggleClass("클래스명")

        $(function() {
            var count = 0;
            $(".hamBtn1>a").click(function() {
                count++;
                if (count % 2 != 0) {
                    $(this).children("img").attr("src", "images/close1.png");
                } else {
                    $(this).children("img").attr("src","images/ham1.png");
                }
            })

            $(".hamBtn2>a").click(function() {
                $(this).toggleClass("active");
            })
        })

 

 

9. hasClass() : 클래스 속성을 가지고 있는지의 여부(true/false)

$("선택자").hasClass("클래스명")

        $(function() {
            $("button").click(function(){
                $(".tClass").toggleClass("bg");
            })
            $("a").click(function(){
                if($(".hClass").hasClass("bg")){
                    $(".hClass").removeClass("bg");
                } else {
                    $(".hClass").addClass("bg");
                }
            })
        })

 

 

10. val() :  폼의 초기값을 얻어오거나 변경할때

$("선택자").val("변경할 내용");

        $(function(){
            console.log($("#uName").val());
            $("#uId").val("hong");
        })

 

 

11. prop() :속성이 적용되었는지의 여부(true/false)

checked,enabled,disabled,selected

- $("선택자").prop("속성");
- $("선택자").prop("속성",true/false);
- $("선택자").prop("속성","속성");

        $(function(){
//            $("#hobby").prop("checked","true");
            $("#hobby").prop("checked","checked");
            $("#minor").prop("disabled",true);
//            $("#minor").prop("disabled","disabled");
        })