본문 바로가기

Develop/JavaScript & JQuery12

jQuery 이벤트 이벤트 연결 1. 간단한 이벤트 1) $('선택자').bind(이벤트이름, 함수) $('h1').bind('click',function(){ $(this).html(function(index, html){ return html + '+'; }); }); 2) $('선택자').bind(객체) $('h1').bind({ mouseenter: function() { $(this).addClass('reverse'); }, mouseleave: function(){ $(this).removeClass('reverse'); } }); 3) hover({mouseenter},{mouseleave}) $('h1').hover( { $(this).addClass('reverse'); } .{ $(this).remove.. 2018. 6. 10.
JQuery JQuery모든 브라우저에서 동작하는 자바스크립트 라이브러리 1. $('선택자').메서드 1) 태그 선택자(하나) $('태그').메서드('속성','값'); $('h1').css('color','Red'); 태그 선택자(하나↑) : 콤마 구분 $('태그1, 태그2').메서드('속성','값'); $('h1,p').css('color','Red'); 2) 아이디 선택자 $('#아이디').메서드('속성','값'); $('#target').css('color','Red'); 3) 클래스 선택자 $('.클래스').메서드('속성','값'); $('.item).css('color',Green'); $('.클래스.클래스').메서드('속성','값'); $('.item1.item2').css('color','Yellow').. 2018. 6. 10.
jQuery로 이벤트 다루기(1) jQuery로 이벤트 다루기(1) 1. 이벤트 연결 bind() 예시 $(selector).bind(eventName, function(event) { }) $(selector).bind(object) 설명 $(선택자).bind(이벤트 이름, 이벤트 핸들러) 이벤트 핸들러 안 this : 발생한 객체 $(선택자).bind(object) 속성 이름 = 이벤트 이름 속성 값 = 이벤트 핸들러 2. 이벤트 제거1) 2) 기본 이벤트 제거3) 이벤트 전달 막3. 간단한 이벤트4. 매개변수 context5. 이벤트 객체6. 이벤트 강제 발생7. 이벤트 연결 종류8. 이벤트 통합 메서드9. 마우스 이벤트10. 키보드 이벤트11. 윈도우 이벤트12. 입력 양식 이벤트 2018. 6. 7.
카드게임(수정) 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166 Documen.. 2018. 6. 4.
selector HTML문서의 요소가 어떻게 표시되는가 1. 기본 문법 [selector] {[ property_name1 ] : [ value1 ];[ property_name2 ] : [ value2 ]; } 2. selector 3. property_name 4. value 1. tag 이름 seletor의 속성 seletor의 값 2. id 3. class 4. 적용 방법 5. 적용 순위 1. 2. 3. ... 2018. 6. 3.
카드게임 카드게임 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 Document 보이기 뒤집기 감추기 섞기 window.onload = function() { var btns = document.querySe.. 2018. 6. 3.

티스토리툴바