본문 바로가기
kosta/HTML,CSS,JavaScript,JQuery

[JQuery] 이벤트 실습

by 엑츄얼리 2022. 4. 4.

Chapter 01

 - highlight 추가

 

//팩토리 함수 $()
//jQuery 객체 생성 (jQuery 함수를 호출)
//var obj = {}

//window.onload = function(){} => HTML문서 로딩 후 함수를 호출 가능
//var obj = {} => 자바스크립트 객체

// 아래 2개의 차이점 인지
//widow.onload = function(){} = HTML 문서 로딩 후 함수를 호출 (외부 리소스 포함)
$(document).ready(function(){//외부 리소스 제외 : 문서 구조만 로딩
    $('.poem-stanza').addClass('highlight');
});

//위를 아래와 같이 간략하게 작성 가능
$(function(){
    $('.poem-stanza').addClass('highlight');
})

 

 

Chapter 02

 - table의 여러 엘리먼트들에 접근

$(document).ready(function () {
    $('ul#selected-plays > li').addClass("horizontal");

    //아래 2개 모두 같은 의미
    $('ul#selected-plays > li > ul > li').addClass("sub-level");
    $('li:not(.horizontal)').addClass('sub-level');

    $('a[href$=pdf]').addClass('pdflink');

    $('a[href^=mailto]').addClass('mailto');

    //아래 2개 모두 같은 의미
    $('a[href*=henry]:not(.mailto)').addClass('henrylink');
    $('a[href*=henry]').not('.mailto').addClass('henrylink');

    //$('td:contains(Henry)').addClass('highlight');
    //$('td:contains(Henry)').nextAll().andSelf().addClass('highlight');
    //$('td:contains(Henry)').parent().find('td').addClass('highlight');
    $('td:contains(Henry)').parent().find('td:eq(0)').addClass('highlight')
        .end().find('td:eq(1)').addClass('highlight');

    //each() 해당 요소들마다 각각의 작업을 수행
    // $('요소').each(function(index, item){
    //     //각 요소들의  작업 수행
    // })
    //$.each(배열,function(index,item){
        //배열의 각요소들의 작업을 수행
    //});


    //이벤트
    $(function(){
        $('#switcher-large').on('click', function(){
            $('body').addClass('large');
        })
    })

    //addClass('클래스명'), removeClass('클래스명')
    $(function(){
        $('#switcher-large').on('click', function(){
            $('body').removeClass('narrow').addClass('large');
        });
        $('#switcher-narrow').on('click', function(){
            $('body').removeClass('large').addClass('narrow');
        })
        $('#switcher-default').on('click', function(){
            $('body').removeClass('narrow').removeClass('large');
        })
    })
    })

 

 

Chapter 03

 - 여러가지 방법을 통해 우상단 스타일 변환기와 내부의 버튼을 조작

//이벤트

//1. id : switcher-large 인 button을 클릭 시 body에 large 추가
// $(function(){
//     $('#switcher-large').on('click', function(){
//         $('body').addClass('large');
//     })
// })


//addClass('클래스명'), removeClass('클래스명')
//2. button을 차레대로 click 시 버튼 이름(button value)에 맞는 방식으로 body를 정렬
// $(function(){
//     $('#switcher-large').on('click', function(){
//         $('body').removeClass('narrow').addClass('large');
//     });
//     $('#switcher-narrow').on('click', function(){
//         $('body').removeClass('large').addClass('narrow');
//     })
//     $('#switcher-default').on('click', function(){
//         $('body').removeClass('narrow').removeClass('large');
//     })
// })


//3. button을 click 시 해당 버튼에 selected(bold) 를 추가
// $(function() {
//     $('#switcher-large').on('click', function () {
//         $(this).addClass('selected');
//     });
//     $('#switcher-narrow').on('click', function () {
//         $(this).addClass('selected');
//     });
//     $('#switcher-default').on('click', function () {
//         $(this).addClass('selected');
//     });
// })


//4. (2. 3.)의 기능을 합치고 추가로 3.에 button 3개가 동시에 selected 속성을 가지지 못하도록 설정
// $(function() {
//     $('#switcher-large').on('click', function () {
//         $('body').removeClass('narrow').addClass('large');
//         $('.button').removeClass('selected');
//         $(this).addClass('selected');
//     });
//     $('#switcher-narrow').on('click', function () {
//         $('body').removeClass('narrow').addClass('large');
//         $('.button').removeClass('selected');
//         $(this).addClass('selected');
//     });
//     $('#switcher-default').on('click', function () {
//         $('body').removeClass('narrow').addClass('large');
//         $('.button').removeClass('selected');
//         $(this).addClass('selected');
//     });
// })


//5. button 3개가 동시에 selected를 갖지 못하도록 하는 코드 (간략화)
// $(function(){
//     $('#switcher .button').on('click', function(){
//         $('.button').removeClass('selected');
//         $(this).addClass('selected');
//     })
// })


//6. 4.을 간략화
// $(function () {
//     $('#switcher .button').on('click', function () {
//         $('.button').removeClass('selected');
//         $(this).addClass('selected');
//         $('body').removeClass();
//
//         if (this.id == 'switcher-large') {
//             $('body').addClass('large');
//         } else if (this.id == 'switcher-narrow') {
//             $('body').addClass('narrow');
//         }
//     })
// });


//7. button에 마우스를 올리면(hover) 88번째 줄을 실행하여 해당 button에 hover 속성을 추가 마우스를 때면 90번째 줄을 통해 hover 속성 삭제
// $(function(){
//    $('#switcher .button').hover(function(){
//       $(this).addClass('hover');
//    },function(){
//       $(this).removeClass('hover');
//    })
// });


//<h3>스타일 변환기</h3> 클릭했을 때 => 버튼 3개가 화면에서 사라지게 하자
//8. h3 영역을 클릭 시, button에 hidden 속성을 toggle한다.
//                                         *toggle : addClass와 removeClass가 교대로 적용(적용 가능한 것부터 적용)
// $(function(){
//     $('#switcher h3').click(function(){
//         $('#switcher .button').toggleClass('hidden');
//     });
//
//     $('#switcher .button').click(function(){
//         $('.button').removeClass('selected');
//         $(this).addClass('selected');
//         $('body').removeClass();
//
//         if(this.id == 'switcher-large'){
//             $('body').addClass('large');
//         }
//         else if(this.id == 'switcher-narrow'){
//             $('body').addClass('narrow');
//         }
//     });
// });

//bubbling 방지
//9. 8.에서 hidden 속성을 h3가 아닌 id switcher에 적용하면 button을 클릭해도 hidden속성이 바뀌게 된다.
//   .stopPropagation() 함수를 사용하여 버블링 방지를 통해, button을 클릭 시 hidden 속성이 적용되지 하자.
$(function(){
    $('#switcher').on('click.here', function(){
        $('#switcher .button').toggleClass('hidden');
    });

    $('#switcher .button').click(function(event){
        $('.button').removeClass('selected');
        $(this).addClass('selected');
        $('body').removeClass();

        if(this.id == 'switcher-large'){
            $('body').addClass('large');
        }
        else if(this.id == 'switcher-narrow'){
            $('body').addClass('narrow');
        }
        //event.stopPropagation();
    });

//10. 9에서 (136줄) event.stopPropagion()없이 구현 방법법
//large나 narrow switcher를 클릭할 경우 switcher를 off하여 toggleClass('hidden')을 비활성화

    $('#switcher-large, #switcher-narrow').click(function(){
        $('#switcher').off('click.here');
    })

     $('#switcher').trigger('click.here');
});

 

Chapter 04

 1. Text Size 박스를 누르면 박스가 이동하여 animation 실행

 

 2. default, bigger, smaller 버튼 클릭시 본문 글자 크기 변경

//크기를 조절하는 버튼을 누르면 본문 내용의 크기가 animate를 통해 변경
$(function () {
    var $speech = $('div.speech');
    var defaultSize = parseInt($speech.css('fontSize'));

    $('#switcher button').click(function () {
        var num = parseInt($speech.css('fontSize'));

        switch (this.id) {
            case 'switcher-large':
                num *= 1.2;
                break;
            case 'switcher-small':
                num /= 1.2;
                break;
            default:
                num = defaultSize;
                break;
        }
        $speech.animate({fontSize: num + 'px'}, 'slow');
    })
})

//TextSize label을 클릭 시 아래 입력된 함수의 순서대로 모양이 변경됨
$(function () {
    $('div.label').click(function () {
        var pWidth = $('div.speech p').outerWidth();
        var divWidth = $('#switcher').outerWidth();

        var num = parseInt(pWidth) - parseInt(divWidth);

        $('#switcher').fadeTo('fast', 0.5)//투명도 설정
            .animate({marginLeft: num}, 'slow')
            .slideUp('slow', function () {//위로 말려올라감
                $(this).css('background', 'red');
            })
            .slideDown('slow');//아래로 내려옴
    })
})

//
$(function(){
    $('div.speech p').eq(1).hide();

    $('a.more').click(function(){
        $('div.speech p').eq(1).slideToggle('slow');
        var $link = $(this);
        if($link.text() == 'read more'){
            $link.text('read less');
        }
        else{
            $link.text('read more');
        }
    })
})

​

<gettysburg.js>

jQuery_20_3_31.zip
0.29MB

 

 

 

Exam01.html을 통한 이벤트 실습

 

함수 방식을 통해 Click시 버튼 모양 변경

	
    <script>
		var $tabMenu = null;
		var $menuItems = null;
		var $selectedMenuItem = null;

		$(function(){
			init();
			initEvent();
		})
        
        //위 부분을 JavaScript를 통해 구현하려면
		window.onload = function(){
			tabMenu1.init();
			tabMenu1.initEvent();
		};

		//요소를 초기화
		function init(){
			$tabMenu = $('#tabMenu1');
			$menuItems = $tabMenu.find('li');
		}

		//이벤트 등록
		function initEvent(){
			$menuItems.on('click', function(){            
				selectedItem($(this));
                //$(this)에서 $의 경우 jQuery 객체로 변환해주는 것을 말함
                //이것이 왜 필요하냐면, addClass, removeClass등의 jQuery 함수를 사용하기 때문
			})
		}

		//이벤트 핸들러 함수
		function selectedItem($menuItem){
			if($selectedMenuItem){
				$selectedMenuItem.removeClass('select');
			}
			$selectedMenuItem = $menuItem;
			$selectedMenuItem.addClass('select');
		}
	</script>

 

리터럴 방식

//2. 함수 단위 코딩으로 만들어진 탭메뉴를 리터럴 방식으로 클래스를 만들어 주세요.
$(function(){
   tabMenu1.init();
   tabMenu1.initEvent();
})

var tabMenu1 = {
   $tabMenu : null,
   $menuItems : null,
   $selectedMenuItem : null,

   init : function(){
      this.$tabMenu = $('#tabMenu1');
      this.$menuItems = this.$tabMenu.find('li');
   },
   initEvent : function(){
      this.$menuItems.on('click', function(){
         tabMenu1.selectedItem($(this));
      })
   },
   selectedItem : function($menuItem){
      if(this.$selectedMenuItem)
         this.$selectedMenuItem.removeClass('select');
      this.$selectedMenuItem = $menuItem;
      this.$selectedMenuItem.addClass('select');
   }
}

 

생성자 방식

window.onload = function(){
    var tabmenu = new tabMenu();
    tabmenu.init();
    tabmenu.initEvent();
}
// $(function(){
//     var tabmenu = new tabMenu();
//     tabmenu.init();
//     tabmenu.initEvent();
// })

function tabMenu() {
    this.$tabMenu = null;
    this.$menuItems = null;
    this.$selectedMenuItem = null;

    this.init = function(){
        this.$tabMenu = $('#tabMenu1');
        this.$menuItems = this.$tabMenu.find('li');
    }

    this.initEvent = function(){
        var objthis = this
        this.$menuItems.on('click', function(){
            objthis.selectedItem($(this));
        })
    }

    this.selectedItem = function($menuItem){
        if(this.$selectedMenuItem)
            this.$selectedMenuItem.removeClass('select');
        this.$selectedMenuItem = $menuItem;
        this.$selectedMenuItem.addClass('select');
    }
}

 

프로토 타입 방식

$(function(){
    var tabmenu = new tabMenu();
    tabmenu.init();
    tabmenu.initEvent();
})

function tabMenu() {
    this.$tabMenu = null;
    this.$menuItems = null;
    this.$selectedMenuItem = null;
}

tabMenu.prototype.init = function () {
    this.$tabMenu = $('#tabMenu1');
    this.$menuItems = this.$tabMenu.find('li');
}

tabMenu.prototype.initEvent = function () {
    var objthis = this
    this.$menuItems.on('click', function () {
        objthis.selectedItem($(this));
    })
}

tabMenu.prototype.selectedItem = function ($menuItem) {
    if (this.$selectedMenuItem)
        this.$selectedMenuItem.removeClass('select');
    this.$selectedMenuItem = $menuItem;
    this.$selectedMenuItem.addClass('select');
}

 

콜백 함수

$(function () {
    tabMenu(onSelectItem);
})

function tabMenu(callback) {
    var $tabMenu = null;
    var $menuItems = null;
    var $selectedMenuItem = null;

    //요소를 초기화화
    function init() {
        $tabMenu = $('#tabMenu1');
        $menuItems = $tabMenu.find('li');
        $menuItems.on('click', function () {
            selectedItem($(this));
        })
    }

    //이벤트 등록
    function initEvent() {
        $menuItems.on('click', function () {
            selectedItem($(this));
        })
    }

    //이벤트 핸들러 함수
    function selectedItem($menuItem) {
        if ($selectedMenuItem) {
            $selectedMenuItem.removeClass('select');
        }
        $selectedMenuItem = $menuItem;
        $selectedMenuItem.addClass('select');

        if (callback != null) {
            callback($selectedMenuItem.index());
        }
    }
    init();
    initEvent();
}

function onSelectItem(index) {
    $('#info').html(index);
}

 

저작자표시

'kosta > HTML,CSS,JavaScript,JQuery' 카테고리의 다른 글

[JQuery] 이벤트, AJax  (0) 2022.04.07
[JQueery] 기초  (0) 2022.04.01
[AJAX] 맛보기  (0) 2022.03.30
[JavaScript] 웹 브라우저  (0) 2022.03.28
[JavaScript] 기초  (0) 2022.03.26

관련글

댓글

티스토리툴바