JQuery 선택자(Selector) 2021. 7. 17. JQuery 선택자(Selector) JQuery 선택자입니다. 돔(DOM) 구조에서 여러가지 조건에 따라 선택할 수 있는 선택자입니다. 전체를 선택하거나, 특정 ID를 선택하거나 태그 또는 클래스를 선택할 수 있는 조건과 계층에 따라 선택할 수 있는 선택자로 구분되어 있습니다. 계층구조의 선택자는 특정 요소를 지정하는 것이 아니라, 자식(child) 요소를 선택하거나 다음에 오는 요소를 선택해 지정할 수 있습니다. $('*') [모든 요소를 선택합니다.] $('body > *') [body 하위의 모든 요소를 선택합니다.] $('#userinput') [id속성값이 userinput인 요소를 선택합니다. $('table') [문서 내 table 요소들을 선택합니다.] $('.section') [clas..

JavaScript event keycode 목록 2021. 7. 17. Key Codes This document is written by Helge Willum Larsen It contains a list of all "onkeypress", "onkeydown" and "onkeyup" KeyCodes in JavaScript, that can be typed with a DANISH KEYBOARD !!! Other keyboards probably have other KeyCodes. The first section is tested with the Microsoft Internet Explore 5.0 and the Netscape Communicator 4.51. At this time, Netscape didn't support "onkeydown" and "..

[JavaScript] 부드러운 스크롤 2021. 7. 17. easeScroll Jquery plugin to make mouse wheel smooth scroll This plugin make the html element scrollable with smooth. Install and init Basic initialization: $("html").easeScroll(); Custom options: $("html").easeScroll({ frameRate: 60, animationTime: 1000, stepSize: 120, pulseAlgorithm: !0, pulseScale: 8, pulseNormalize: 1, accelerationDelta: 20, accelerationMax: 1, keyboardSupport: !0, arrowScrol..

jQuery를 사용하여 페이지로드시 자동 클릭 단추 요소 2021. 7. 17. 버튼 형태의 모달창(data-modal)을 Pageload가 될 때, 자동으로 클릭하게 하는 방법은 매우 간단하다. HTML 기능은 3가지 방식으로 구현할 수 있다. Javascript JQuery .trigger( ) JQuery .click( )

매우 심플한 슬라이더(Very Simple Slider) 2021. 7. 17. 정말 간단한 슬라이더(Very Simple Slider) 3(3000)초 마다 전환되는 매우 간단한 슬라이더입니다. 별도의 애니메이션 전환 효과나 페이지네이션 기능이 없고 심지어 이전/다음 버튼도 없습니다. 전환 효과는 Javascript 코드에 기능을 추가하면 쉽게 만들 수 있습니다. (예: .animate()) 이미지의 갯수는 상관없이 계속해서 추가할 수 있으며, 매우 간단하게 수정할 수 있습니다. 아주 간단한 전환되는 광고배너 등을 만들 때 사용하면 좋습니다.

자바스크립트로 버튼 클릭시 순서대로 숫자 호출방법 2021. 7. 17. 자바스크립트로 버튼 클릭시 순서대로 숫자 호출방법 숫자 1부터 작성한다. count=0; 첫번째 버튼은 시작버튼으로 구현한다. button1.onclick=start; 두번째 버튼은 정지버튼으로 구현한다 button2.onclick=stop; 작성될 블럭을 구성한다. div1 div1 내에 html로 작성한다. div1.innerHTML = div1. innerHTML + count(숫자카운트 더하기) count=0; window.onload=function(){ button1=document.getElementById("button1"); //첫 번째 버튼 button2=document.getElementById("button2"); //두 번째 버튼 div1=document.getElementById..

JQuery 학습사이트 - 제이쿼리를 공부할 때 유용한 사이트 2021. 7. 17. JQuery 공부하기 JQuery를 공부할 때 유용한 사이트는 아래와 같다. https://www.w3schools.com/jquery/default.asp https://api.jquery.com/trigger/ http://www.devkuma.com/books/3 영어가 어렵게 느껴진다면 국내 개발자가 정리한 데브 쿠마 사이트를 추천한다. JQuery는 자바스크립트 라이브러리이므로, 자바스크립트를 먼저 배운 뒤에 JQuery를 접하는 것이 좋다. JQuery를 제대로 활용하기 위해서는 HTML과 CSS, JavaScript 지식을 쌓은 뒤에 JQuery를 학습하는 것을 추천한다. jQuery를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있다. 현재 많이 사용되고 있는..

JavaScript(JQuery) 선별선택자·복수선택자 2021. 7. 17. 자바스크립트 내에서 제이쿼리(JQuery) 선택자를 사용할 때, 단일로 사용할 때는 아래와 같이 사용한다. $(.class) : 클래스 선택자 $(#ID) : ID 선택자 $(input:[name='name 값']) 그렇다면 복수의 경우에는 어떻게 사용할까? element[속성~=값] : 해당 값이 특정 단어로 시작 element[속성^=값] : 특정 값으로 시작하는 객체 element[속성$=값] : 특정 값으로 끝나는 객체 element[속성*=값] : 특정 값을 포함하는 문서 객체 특수문자 형식을 잘 살펴보면 이해하기 쉽다. class~는 특정 단어 설정 class^는 특정 값의 시작, class$는 특정 값이 끝나는 부분에, *는 포함 요소를 나타내는데, JQuery로 특정 부분을 선택자로 표현할..

Onclick Event(온클릭 이벤트) 2021. 7. 17. 온클릭 이벤트 사용법도 매우 쉽고 의외로 많이 사용하는 온클릭 이벤트(HTML DOM)다. DOM Events 중에서 Click 버튼으로 팝업창을 열거나 모달 창으로 안내하는 방식 등 일반 쇼핑몰에서 아주 많이 사용되는 형식이다. 예시의 경우는 워낙 많아서 그중에 개인적으로 귀여운 버튼을 한번 만들어봤다. What is the time? What is the time? 1. HTML 에서 사용법 2. JavaScript 에서 사용법 object.onclick = function(){myScript}; 3. addEventListener() 를 사용했을 때 object.addEventListener("click", myScript); 참고로 드랍다운 버튼도 onclick으로 구현할 수 있다. 스타일을 지정..