남다른 논리

프로그래밍/jQuery

[jquery] 이벤트 핸들링

다음과 같은 이벤트를 실행하려 합니다. 1. 상자안에 마우스 위치 나오게 하기 2. 마우스 클릭시 위치 표시 3. 마우스가 상자 밖에 나갔을때 'mouseleave'라고 표기하기 $("document").ready(function() { $("#example").on("mousemove", onMouseOver); $("#example").on("click", onMouseClick); $("#example").on("mouseleave", onMouseLeave); });example 아이디에 on() 메소드를 실행하라는 것입니다.사용법: $(selector).on(event,childSelector,data,function,map)여기서 event 와 function은 필수 입니다. "mouseove..

프로그래밍/jQuery

[jquery] 컨텐츠 내용 생성 및 수정

이번 내용은 다음과 같습니다.주석 처리한 부분을 하나씩 설명합니다. var newP = $(""); newP.append("Hello There"); $("#example").html(newP); paragraph tag 를 newP 라는 변수로 지정하고 2번째줄 : newP에 append뒤의 태그를 붙입니다.아이디 example에 html 로 newP의 내용을 붙이는 것입니다. $("#creation").prepend("Watch This! ");아이디 creation에 다음 문장을 prepend이므로, 앞쪽에 붙입니다.$("#example").html("This is a new H2");아이디 example에 다음 html문을 html 문으로 붙인다는 것입니다.브라우저를 실행하면 아래와 같습니다.맨아..

프로그래밍/jQuery

[jQuery] 기본기 갖추기 1

jQuery의 기본기능을 설명하고자 한다. 각 라인 뒤의 //(주석) 뒤의 번호라인을 설명을 위한 숫자이다. 0라인 $("document").ready(function() 은 jQuery를 시작하는 문장이다. 이 문장의 아래 적용내용에서 각 라인을 제외하고, 나머지를 주석처리하면 적용내용을 볼 수 있다. 먼저 $(" ") 에서 #을 쓰면 특정 id이고 .(점)을 쓰면 특정 클래스를 지정하는 것이다. $("p").css("border", "3px solid red");은 html의 부분을 전체 3픽셀의 빨간줄로 테둘이 하는 것이다. $(".selectors").css("border", "3px solid red");id 가 셀렉터인 부분의 css를 빨간 테둘이로... $("#intro").css("bord..

프로그래밍/jQuery

jQuery를 WebStorm(웹스톰)에 설정하기

jQuery를 공부하기 시작하면서, 최고의 에디터라고 하는 WebStorm을 쓰려하니 jQuery를 인식하지 못하는 문제가 생겼습니다. (PhpStorm을 써도 됩니다) jQuery 별도의 에디터가 아니다보니, 자동으로 생성되지 않아 jQuery 함수를 그냥 문자로만 인식하는 문제가 생깁니다. 이에 대해 웹스톰의 환경을 설정해야 합니다.(맥 기준으로) 아래처럼 상단 메뉴의 WebStorm > Preferance 메뉴를 엽니다. 처음 열면 위 이미지 처럼 jQuery가 보이지 않습니다. 이제 jQuery를 설정해야 겠죠? 오른쪽의 Add버튼을 누르면, 아래와 같은 창이 뜹니다. 이름을 jQuery라고 정하고,Visibility를 Global로 선택 합니다.(이후의 다른 프로젝트에서도 사용하기 위한것입니다...