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()..

제이쿼리 선택자 제이쿼리 선택자는 CSS 선택자와 유사한 구조를 가지고 있음. $("태그이름") $("#아이디 속성값") $(".클래스 속성값") - CSS 선택자 h1 // 태그에 접근할 때 #title // id에 접근할 때 .article // class에 접근할 때 - jQuery 선택자 $("h1") // 태그에 접근할 때 $("#title") // id에 접근할 때 $(".article") // class에 접근할 때 만약, 디자인을 입히고 싶다. 즉, CSS와 관련된 기능을 사용하고 싶다고 한다면, jQuery에서 제공하는 css메소드를 활용하면 됨. 디자인은 .css('css 속성', 'css 속성값') 형태로 입력. $("h1").css("color", "blue"); 연습문제 funct..

jQuery 간단한 명령어로 주요 기능을 쉽게 구현할 수 있도록 도와주는 자바스크립트 언어로 구성된 라이브러리. JavaScript와 jQuery 비교 // html문서에 접근할 때 // 자바스크립트 var str1 = document.getElementById("title"); // 제이쿼리 $("#title") 자바스크립트보다 제이쿼리를 쓸 때 코드 작성이 아주 간단해짐.

this this는 어느 특정 영역에 이벤트를 적용할 때, 실제 이벤트가 발생되는 선택된 영역을 의미. this를 잘 못 쓰면 코드 길이가 엄청나게 늘어날 수 있기 때문에 굉장히 중요해. 그림과 같이 3개의 박스가 주어짐. 이때 "맨 위에 있는 첫 번째 박스를 클릭하면, 첫 번째 박스만 색깔이 바뀌었으면 좋겠다" 라고 할 때 this를 사용. 즉, 특정 이벤트 영역을 지정할 때 사용하는 게 this. // 3개의 박스에 favorites_icon이라고 하는 클래스 이름을 지어줌 // 그리고, 3개의 박스들은 $favorites_icon 이라고 하는 변수 안에 넣어줌. var $favorites_icon = $(".favorites_icon"); // 내가 지정한 박스만 색상을 바꾸고 싶을 때 $favor..