-
Javascript, jQuery 2013‧03‧29
jQuery - 속성 또는 속성 값으로 선택자 지정하기
본문에서 alt 값이 "이미지 설명"을 가진 이미지를 선택하여 지우거나 이동하거나 등등 처리를 할 때가 있을 것이다. 이럴 때 이 alt에 대한 값을 찾아서 선택자(selector)로 지정할 수 있다. 사용법은 간단하다. $('img[alt=이미지 설명]'); 위 코드는 <img src = "test.jpg" alt="이미지 설명" /> 와 같은 이미지를 선택하여 처리할 때 쓰인다. 또는 이미지들 중에 alt값을 가진 것만 찾을 […]
-
Javascript, jQuery 2013‧03‧22
jQuery - 선택자 삭제 .remove
div라든가 p, span 등과 같은 선택자를 삭제할 때 사용한다. 입력 방식은 두가지 정도이다. $("선택자").remove( ); 또 하나는 아래와 같다. $('div와 같은 요소').remove("선택자"); 필자는 간단하게 주로 아래와 같이 쓴다. $("#id").remove(); 만약 위와 같이 쓰는 경우 클래스일 경우 .class 로 선택자를 넣어도 된다. 이렇게 되면 해당 클레스가 있는 div가 삭제가 된다.
-
Javascript, jQuery 2012‧11‧08
jQuery-$.cookie 플러그인 사용법 (쿠키 활용편)
사용자의 쿠키를 이용해서 유동적으로 사이트를 운영할 때가 많다. 자바스크립트로 쿠키를 만드는 방법은 생략한다. (이미 검색하면 많이 나온다.) 제이쿼리는 플러그인 사용으로 간단하다. 일단 플러그인을 페이지내에 삽입해야한다. 해당 파일은 https://github.com/carhartl/jquery-cookie 이 곳에서 최신버전을 받아서 사용하거나 지금 필자가 쓰는 버전을 첨부파일로 넣을테니 다운받아 써도 상관없다. (다운받아 사용할 경우 차후에 새로 업데이트 된 버전이 아니라는 점은 염두해두길 바란다.) <head>와 </head>사이 아래 […]
-
Javascript, jQuery 2012‧11‧08
JS-setTimeout() , clearTimeout()
setTimeout() : 시간을 지정하고 지정된 시간에 함수를 실행하게 만든다. clearTimeout() : 위에서 실행한 그 함수를 취소할 때 사용한다. setTimeout() 사용법은 아래와 같다. timer = window.setTimeout(function(){ //실행할 코드 },3000); timer라고 지정한 이유는 clearTimeout() 을 할 때 대상을 찾기 위함이다. window.setTimeout 라고 써도 되고 setTimeout 써도 된다. (이유는 window 객체를 사용하는 메소드이기 때문이다.) 3000은 3초다. 1초면 1000으로 적어 넣으면 된다. […]
-
Javascript, jQuery 2012‧10‧18
jQuery-브라우저 창 사이즈 조절에 따른 이벤트 만들기
브라우저를 크기 조절에 의한 이벤트를 받아 명령을 내릴 때 주로 사용한다.기본 적으로 아래처럼 사용한다. 그런데 이렇게 사용하게 되면 브라우저를 조절하는 동안에 계속해서 작동하게 되어 오히려 브라우저 성능을 저하 시켜서 느려지게 된다.그래서 보통 실무에서는 아래처럼 사용했다. 이렇게 되면 사이즈를 조절이 끝난 0.5초 후에 작동되기에 마우스로 브라우저를 조절이 멈춘 0.5초 후에 작동되게 만든 것이다.
-
Javascript, jQuery 2012‧10‧18
jQuery-마우스가 브라우저 밖으로 나갔을 때 이벤트
마우스가 브라우저를 나가는 이벤트를 받아서 활용하는 두가지 방법이 있다. 하나는 (창이 전환되었을 경우, 혹은 마우스가 다른 창을 클릭하여 화면이 바뀐 경우), $(window).blur(function() { //코드 넣는 곳 }); 다른 방법은(순전히 화면에서 마우스가 나갔을 경우), $(document).bind("mouseleave", function(){ //코드 넣는 곳 }) 두 방법은 엄연히 다르다. 자세한 설명은 .bind() 와 .blur()에 대해서 jQuery 도움말을 보면 된다.
-
Javascript, jQuery 2012‧10‧17
jQuery-마우스 움직임을 이용, 좌표값 가져오기
마우스의 좌표를 이용해서 div들을 움직이게 하고 싶은 경우가 있다. 마우스의 움직임에 대한 값을 얻어낸다면 나머지는 응용하면 된다. 마우스의 움직임. 즉, 좌표값을 얻어내는 방법은 아래와 같다. <script type="text/javascript"> jQuery(document).ready(function(){ $(document).mousemove(function(e){ $('#status').html(e.pageX +', '+ e.pageY); }); }) </script> 코드를 설명하자면 document. 즉, 브라우져 내부에서 마우스를 움직이게 되면 x값인 e.pageX와 y값인 e.pageY를 가져와서 status라는 id를 가진 곳에 노출하라라는 말이다.
-
Javascript, jQuery 2012‧10‧15
jQuery-div 높이를 창의 100%로 조절할 때 (창 사이즈 유동 적응)
div로 코딩할때 가끔 필요한 것이 height 100%가 안된다는 점이다. 제이쿼리와 자바스크립트를 이용해서 간단히 만들어 본다. function funLoad(){ var Cheight = $(window).height(); $('#container').css({'height':Cheight+'px'}); } window.onload = funLoad; window.onresize = funLoad; 윈도우가 로딩된 후 funLoad를 실행하였고, 창을 조절하면 다시 funLoad를 실행한다. funLoad는 container라는 id를 가진 div의 height값을 조절하라고 명령한다.
-
Javascript, jQuery 2012‧10‧15
jQuery-마우스 이벤트시 부모 div의 id 값 가져오기
마우스 오버의 경우를 예로 든다. $Btn.mouseover(function(){ console.log($(this).closest('div').attr('id')); } $ Btn에 마우스를 올리면 그 상위 div 중에 id 값을 얻을 수 있다.