남다른 논리

프로그래밍/jQuery

[jQuery] 제이쿼리 체이닝(Chain)

(그림) - 업로더가 오류로 업로드를 가끔씩 못합니다. 에러가 나서 나중에 업뎃하는데요, 다음(카카오)에서 아직 이런 오류를 갖는게 한심합니다. ㅎㅎ 본론으로 들어가서... 제이쿼리 체이닝은 여러개의 메소드를 연결해서 쓰는 것을 말합니다. $("#p1").css("color", "red").slideUp(2000).slideDown(2000); 위의 코드 처럼 아이디 p1에 색을 red로하고, 2초간 올리고, 다시 2초간 내리는 연결된(chain) 작업을 가능케 합니다. .slideUp( [duration ] [, complete ] )Description: 2초간 슬라이딩 모션으로 숨김을 합니다. 예제] jQuery is fun!! Click me 예제2]$("#divTest1").text("안녕!")..

프로그래밍/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] 제이쿼리 필터 2

제이쿼리 필터 두번째 강좌 입니다. 위의 내용으로 제이쿼리 필터를 적용할 수 있습니다. HTML은 아래를 넣고 설명(주석)을 본뒤 한줄씩 적용해 보시면 됩니다. This is paragraph 1 This is paragraph 2 This is paragraph 3 This is paragraph 4 This is paragraph 5 다음은 맨 아래 p[id^=para][lang*=en-]" 부분을 적용한 예의 결과화면 입니다.

프로그래밍/jQuery

[jQuery] 셀렉터의 필터링

셀렉터 내의 특정 부분을 필터라고 합니다. 필터의 용어는 = 첫번째, 마지막 = 짝수, 홀수 = 큰것, 작은것, 같은것 = 애니메이션이 동작중인 것 = 포커스를 주는것. 그쪽으로 이동이라 할수 있음. = 제외하라는 의미 [ 예제] 헤더 안에 아래 내용을 넣고 내용을 보고, 한줄씩 주석을 풀어 확인합니다. 첫번째 p HTML은 아래를 이용하세요 This is paragraph 1 This is paragraph 2 This is paragraph 3 This is paragraph 4 This is paragraph 5 [진화된 필더링의 예] >, ~, + 의 사용 예 입니다. jQuery Hierarchy Selectors To select elements based on their position in..

프로그래밍/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(웹스톰)에 설정하기