본문 바로가기
728x90

jQuery 제이쿼리15

[이벤트] .hover() = mouseenter & mouseleave black $('a').on({ mouseenter : function () { $(this).addClass('reverse'); }, mouseleave : function () { $(this).removeClass('reverse'); } }); $(function(){ $('a').hover(function(){ // mouseenter 기능 $(this).addClass('bgc').html('yellow'); }, function(){ // mouseleave 기능 $(this).removeClass('bgc').html('black'); }); }); 2021. 5. 13.
[이벤트] 변수에 함수 지정하여 사용 Bright Clever Wit Awesome Brilliant // 변수에 함수 담아 사용 var handler = function () { $('') .html('Fortune') .appendTo('h2') .click(handler) }; $('h2').on('click', handler); // 자주 사용되는 것을 위와 같이 // 따로 따로 관리하면 복잡하므로 // body에 이벤트를 연결하는 방식도 있다 $('body').on('click','h2', function(){ // body 태그를 클릭했을 때, 클릭한 것이 h2 태그라면, // 아래 이벤트 핸들러를 실행한다. $(this).css({'background-color':'orange', 'border':'green 5px dotted.. 2021. 5. 12.
[이벤트 연결] on() - 문자열 또는 객체로 지정 // 문자열로 지정 $('h2').on('click', 100, function (event){ $(this).html('clicked'); }); // 객체로 지정 $('h2').on({ dblclick : function(){ $(this).html('dbclicked') }, mouseenter : function (){ $(this).html('mouseentered') // mouseenter : 마우스가 태그 내로 들어왔을 때 } }); 2021. 5. 12.
[이벤트 연결] this = event.currentTarget $('h2').click(function(event) { // this = event.currentTarget $(event.currentTarget).html('clicked'); $(this).css('color','red'); }); 2021. 5. 12.
728x90