남다른 논리

프로그래밍/jQuery

[jQuery] 필터 4

필터 4번째 강좌 입니다. 이번에는 아래와 같은 필터를 추가해 보겠습니다. 각각을 설명해 보면 $("document").ready(function() { $("#example").children().css("border", "3px solid red");//아이디 example의 하위 DOM에 CSS적용 var element = $("#para1");//아이디 para1를 element라 정합니다. element.prev().css("border", "3px solid red");//emement와 같은레벨 즉, 위쪽 p에 css를 적용합니다. element.css("border", "3px solid yellow"); element.next().css("border", "3px solid blue");..

프로그래밍/jQuery

[jQuery] 필터 3

필터 3번째 강좌 입니다. 이번에 좀더 세밀한 필터를 보겠습니다. 스크립트를 주석처리 한 후 한줄씩 풀어서 브라우저에서 [html 코드]를 실행해봅니다. Child, Visibility, and Content Filters 사용해보기 p 적용 문단입니다. 하나만 있는 경우 입니다 This is paragraph 1 This is paragraph 2 This is paragraph 3 This is paragraph 4 This is paragraph 5

프로그래밍/jQuery

[jQuery] 셀렉터 사용하기 (Selectors)

제이쿼리에서 특정 html을 지정하는 것을 셀렉터라 한다 이미지 순서대로 설명하자면 없는 것은 태그네임# id로 표시된것.(점) 은 classtag.className : 태그 안의 클래스가 className인 것에만 적용tag#id.className : 태그 안의 아이디가 id이고, 클래스가 className인 것에만 적용* : 모든것에 적용 [예제] [전체 소스 예제]스크립트 내의 jQuery를 주석처리 한 후, 한줄씩 주석을 없애고 브라우저에 적용해 보시면 적용된 내용을 보실 수 있습니다. jQuery 셀렉터 Selectors examples: $("tag"): Select all of the elements $(".className"): Select all elements that hav..

프로그래밍/jQuery

[jQuery] 애니메이션 구현하기

위와 같은 상자를 움직이는 애니메이션을 구현하고자 합니다.$("document").ready(function() { $("#go").click(function() {jQuery 에 아이디 go를 클릭했을때 펑션이라는 것을 말합니다. $("#testDiv").animate({width: 400}, 300) 아이디 testDiv를 .animate 애니메잇 하는 것입니다. 넓이는 400픽셀로, 3초간 넓힌다는 의미입니다. .animate({height: 300}, 400)높이를 300픽셀, 4초간 늘립니다. .animate({left: 200}, 500)왼쪽을 200만큼, 5초간 넓힙니다. .animate({top: "+=100", borderWidth: 10}, "slow") 위쪽을 100픽셀 증가시키므로,..

프로그래밍/jQuery

[jQuery] 제이쿼리 환경설정

제이쿼리는 자바스크립트의 라이브러리 이므로, 별도의 프로그램이 필요치는 않습니다.단, 제이쿼리의 function을 이용하기 위해HTML이 에 제이쿼리를 포함시켜 줘야합니다. jQuery의 위치에 따라,이렇게 넣어줍니다.jQuery는 웹에서 다운받는데, 개발시에는 uncompressed를 사용하는것이 편합니다. 또한 웹의 환경에서 쓰이므로웹 (CDN)에서 불러서 쓸 수 있습니다. 위의 코드는 구글에서 불러다 적용한 것입니다. 이렇게 jQuery를 연결해야만, HTML이 jQuery 코드를 인식합니다. jQuery는 아무 에디터를 사용해도 되지만, 젯브레인의 webStorm 에 연결하는 것은 다른 포스트를 참조하시면 됩니다. jQuery를 WebStorm(웹스톰)에 설정하기

프로그래밍/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] 기본기 갖추기 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로 선택 합니다.(이후의 다른 프로젝트에서도 사용하기 위한것입니다...