jQ 3 - method() 의 종류 1

1. 요소에 클래스를 추가 제가하는 메서드

addClass() : 추가할 클래스의 이름을 ()안에 작성한다. 

removeClass() : 제거할 클래스의 이름을 () 안에 작성한다. 

toggleClass() : 추가|제거를 반복적으로 사용할 수 있는 메소드로, ()안에 클래스의 이름을 작성한다. 

 

2. 이벤트 연결하기

on(), bind() 메소드로 이벤트를 연결하는데,

$(selector).on('click', function(){...}); 식으로 작성한다. 

 

3. 요소를 태그로, 텍스트로 추가하는 메소드 : html(), text()

4. 객체의 내부를 비우거나 제거하는 메소드 : empty(), remove()

5. 새 요소를 추가하는 메소드 : append(), appendTo(), prepend(), prependTo()

---

<h1>HEADER 1</h1>
    <h1>HEADER 2</h1>
    <h1>HEADER 3</h1>

    <a href="#" class="btn1">btn1</a>
    <a href="#" class="btn2">btn2</a>

    <p></p>
    <p></p>

    <img src="img/s3.jpg" alt="">
    
    <div></div>
    <div></div>
    <div></div>

---

.item{color:red;}
        .btn1, .btn2{
            display: inline-block;
            width: 100px; padding: 20px;
            background: #000;color: #fff;
            font-weight: bold;margin: 10px;
            text-align: center;
            text-decoration: none;
        }
        .on{
            background: #c77272;
            display: inline-block;
            width: 100px; padding: 20px;
            color: #fff;
            font-weight: bold;margin: 10px;
            text-align: center;
            text-decoration: none;
        }

---

$(function(){
            $('h1').addClass('item');
            $('.btn1').addClass('on');
            $('.btn2').addClass('on');
            $('.btn1').on('mouseenter', function(){
                $('.btn1').removeClass('on');
            });
            $('.btn1').on('mouseleave', function(){
                $('.btn1').addClass('on');
            });
            $('.btn2').on('mouseenter', function(){
                $('.btn2').removeClass('on');
            });
            $('.btn2').on('mouseleave', function(){
                $('.btn2').addClass('on');
            });
            
            let src = $('img').attr('src');
            $('img').bind('mouseenter click', function(){
                console.log(src);
            });
            $('img').on('mouseenter', function(){
                $('img').attr('width', 400);
            });
            $('img').on('mouseout', function(){
                $('img').attr('width', 600);
            });

            let color = ['#e63946','#1d3557','#2a9d8f'];
            $('h1').css('color',function(index){
                return color[index];
            });

            //getter
            let html = $('h1').html();
            alert('h1태그 안의 html 값 : '+html);
            let text = $('h1').text();
            console.log('h1태그 안의 text 값 : '+text);
            //setter
            $('div').html('<h1>$().html() 메서드 공부중</h1>');

            //객체 내부를 비우는 메서드
            $('div').empty();
            //객체 제거 메서드
            $('div').remove();

            //새 요소를 추가하는 메서드
            // $('body').append('<h3 class="on"></h3>').html('새요소 추가');
            $('<h3 class="on"></h3>').appendTo('body').html('새요소 추가');
            //prepend

        });