JQuery

06.02.2015

페이지 정보

작성자 Ryangkyung 작성일15-06-03 01:25 조회2,449회 댓글0건

본문

$(document).ready(function(){

    $("body").append("<p>I'm a paragraph</p>");

});// body에 <p> 넣기 

 

var $paragraph = $('<p>HAHAHAHA</p>');​
$(document).ready(function(){
    $('#one').after($paragraph);//id가 one인 태그 뒤에 <p> 넣기
    $('#two').after($paragraph);//id가 two인 태그 뒤에 <p> 넣기​: 복사하는 것이 아니라 그냥 이동

});

 

$('p').remove();//'<p>'가 아니라 'p'라고 써야 한다. 그 자체도 없앰 

.empty()-> 내용 비움

 

$(document).ready(function(){

    $('#text').click(function(){

        $(this).addClass('highlighted');

    });

});//클래스 더함 

 

$(this).toggleClass('highlighted'); // 클릭할 때 마다 켜졌다 꺼졌다 함 

 

$(document).ready(function(){

    $('div').height("200px").width("200px").css("border-radius","10px");

});//css 함수(바꿀 항목, 바꿀 값) 

 

$('p').html("JQuery magic in action!");//제일 처음 나오는 p 

​$('input:checkbox:checked').val();//가장 처음 나오는 체크된 체크박스 

 

$(document).ready(function(){

    $('#button').click(function(){

        var toAdd = $('input[name=checkListItem]').val();//name이 checkListItem 인 것 값

    });

}); 

 

$(document).ready(function(){

    $('#button').click(function(){

        var toAdd = $('input[name=checkListItem]').val();

        $('.list').append("<div class='item'>" + toAdd + "</div>");

    });

    $(document).on('click', '.item', function(){

        $(this).remove();

    });

}); 

 

 

$('div').hover(function(){

        $(this).addClass('red');

    }); 

 

('div').dblclick(function(){ 

 

$(document).ready(function(){

 

  $('div').hover(

    function(){

    $(this).addClass('active');

    },

    function(){

    $(this).removeClass('active');

    }

  );

});//처음은 마우스 위에 있을 때, 마우스 뗄 때 

 

$(document).ready(function(){

    $('input').focus(function(){

        $(this).css('outline-color', '#FF0000');

    });

});//focus 됐을 때 입력창 색 바꾸기 

 

$(document).ready(function(){

    $(this).keydown(function(){

        $('div').animate({left:'+=10px'});

    });

});// 키보드 눌렀을 때 움직이기 

 

 

$(document).ready(function() {

    $(this).keydown(function(key) {

        switch(parseInt(key.which,10)) {

// Left arrow key pressed

case 37:

$('img').animate({left: "-=10px"}, 'fast');//fast대신 숫자 넣으면 밀리초 된다!

break;

// Up Arrow Pressed

case 38:

$('img').animate({top: "-=10px"}, 'fast');

break;

// Right Arrow Pressed

case 39:

$('img').animate({left: "+=10px"}, 'fast');

break;

// Down Arrow Pressed

case 40:

$('img').animate({top: "+=10px"}, 'fast');

break;

}

});

}); 

 

​parseInt(string, radix); 

 

jQuery UI

 $(this).effect('explode'); 

$(this).effect('bounce', {times:3}, 500); 

$(this).effect('slide');//닦아내기 같은 효과 

$('#car').draggable();//드래그 가능해짐 

$('div').resizable(); 

$('ol').selectable();//클릭하면 색 변함(하나씩만) 

 $('ol').sortable();// 자리 바꿀 수 있게 

$('#menu').accordion();//스타일 적용 가능하다 

 

 

sprite:요정 도깨비 

parse: (문장을 문법적으로)분석하다

​lament: 애통하다 

nifty: 솜씨좋은, 훌륭한

댓글목록

등록된 댓글이 없습니다.