DevSSOM

Class 이벤트 HTML 문서에서 특정 태그가 어떤 클래스를 가지고 있는지, 특정 클래스를 가지고 있다면 그 클래스를 제거하거나, 특정 클래스를 가지고 있지 않다면, 새로운 클래스를 붙이거나 할 때 다음의 제이쿼리 이벤트들을 활용함. $("h1").addClass(); // 대상에 괄호 안 클래스 추가 $("h1").removeClass(); // 대상에 괄호 안 클래스 제거 $("h1").toggleClass(); // addClass와 removeClass 둘 다 $("h1").hasClass(); // 대상에 괄호 안 클래스 있는지 확인 실습문제 Blue Font Red Font Add Class Remove Class Has Class css 파일엔 이미 blue와 important를 만들어뒀음..

Fade 이벤트 영화에서 보여지는 Fade 효과는 다음 제이쿼리 이벤트로 쉽게 구현할 수 있음. $("h1").fadeOut(); // 서서히 사라지게 $("h1").fadeIn(); // 서서히 나타나게 $("h1").fadeToggle(); // fadeOut과 fadeIn 둘 다 실습문제 Hello jQuery Fade Out Fade In Fade Toggle 이제 저 버튼들에 fade 이벤트 기능들을 넣기 위해서 제이쿼리로 index.js 파일을 작성해주기. 가장 먼저, fade-out 버튼. $(function() { $("#fade-out").click(function() { $("h1").fadeOut() }); }); 나머지 버튼들도 코드를 작성해주면 $(function() { $("#f..

Hide, Show, Toggle 이벤트 다음 제이쿼리 이벤트를 사용하여 특정 HTML 영역을 보이거나 감출 수 있음. $("h1").hide(); // 특정 영역을 감추기 $("h1").show(); // 특정 영역을 보여줄 때 $("h1").toggle(); // hide와 show 두 기능을 전부 가지고 있는 형태 실습문제 Hello jQuery hide show toggle 이런 HTML 문서가 있을 때, 제이쿼리로 index.js라는 파일을 만들어서 코드를 작성. 가장 먼저, hide 버튼을 클릭해서 h1인 'Hello jQuery'가 사라지게 만들면, $(function() { $("#hide").click(function() { $("h1").hide(); }); }); 이때, hide() ..

jQuery 제이쿼리에서 제공하는 다양한 기능들을 이벤트라고 함. $("h1").click(function() {...}); $("h1").fadeIn(function() {...}); $("h1").slideDown(function() {...}); 위에서 click, fadeIn, slideDown 같은 것들이 이벤트. 자바스크립트의 객체.메소드 형태랑 유사해. click 같은 경우는 h1 태그를 클릭했을 때, function 안에 있는 코드를 실행시키겠다는 거고, fadeIn은 말 그대로 h1 태그에 fadeIn 효과를 주겠다는 거, slideDown도 이벤트 효과를 적용시키겠다는 거. Mouse 이벤트 제이쿼리에는 다양한 마우스 이벤트가 있음. $("h1").mouseenter(function()..