'js' 카테고리 - 9 페이지. 웹개발 커뮤니티 블로그

js [제이쿼리] 요소를 보이기, 숨기기, show(), hide() 특정 요소를 보이게 하거나 숨기게 하는 기능으로 show(), hide() 메소드를 사용할 수 있습니다.# display, visibility 속성을 사용하는 것과의 차이점은?hide() 메소드는 display를 none으로 바꾸는 것과 기능적으로 동일하지만 기존의 display 속성이 무엇이었는지... 예를들어 diplay:block; display: inline; display: inline-block; 등의 정보를 기억해 show() 메소드 실행시 이전의 속성을 불러오는 특징이 있습니다.

View : 4086 / Created : 2015-04-24

js [제이쿼리] eq(), get() 이용한 요소 선택 방법 및 차이점 제이쿼리의 선택자 메소드 eq()와 get()은 둘 다 인덱스 값을 사용해 원하는 위치의 요소를 선택해 가져올 수 있는 선택자 메소드입니다. 예를들면...<script>$('.icon').eq(2);$('.icon').get(2);</script>클래스명이 icon인 모든 요소들중 두번째 요소만 반환합니다. 또한 아래처럼 음수의 사용이 가능합니다.<span style="font-s

View : 15259 / Created : 2015-04-24

js [제이쿼리] 태그 및 요소 삭제, remove() 제이쿼리에서 html의 특정요소, 노드를 삭제하려면 어떻게 해야할까요? 이때 제이쿼리는 remove() 메소드를 사용할 수 있습니다. remove() 메소드는 선택된 요소를 간편하게 제거하여줍니다. 어떻게 하는지 아래에서 알아봅니다.# j

View : 40662 / Created : 2015-04-23

js [제이쿼리] 선택자 api, 특정 텍스트 포함 요소찾기 :contains() 제이쿼리에서 특정 텍스트 문구가 포함된 요소를 찾을경우 아래의 :contains() 셀렉터를 사용합니다. 이 셀렉터를 사용하면 매우 쉽게 원하는 요소를 선택이 가능합니다. 아래는 사용방법입니다.선택할 요소:contains("찾을 텍스트 또는 문자열");! :contains() 예제보기아래 예제는 p태그에 'best'라는 문구가 있는지 확인하여 포함된 태그를 선택 후

View : 6041 / Created : 2015-03-17

js [제이쿼리] 자식 요소 선택방법 및 찾기, children() 제이쿼리를 사용하여 간단하게 자식요소를 선택하는 방법을 알아보려고 합니다. 자식요소를 선택하는 방법에는 children() 함수가 많이 사용됩니다. 이 외에도 find() 함수가 존재하는데 오늘은 children()에 대하여 자세히 알아봅니다.

View : 57518 / Created : 2015-03-17

js [제이쿼리] live()는 되지만 on() 이벤트 핸들러가 안될 경우 이벤트를 실행하기 위해 on() 메소드를 사용하였으나 live()메소드가 deprecated되면서 on() 메소드와의 사용방법 때문에 함수의 실행이 되는 경우와 안되는 경우가 있습니다. 이때 해결할 수 있는 방법은 아래처럼 코드를 수정하면 가능합니다.# 기존$('gallery'

View : 2002 / Created : 2015-03-13

js [제이쿼리] 이벤트 핸들러 live() 알아보기 제이쿼리의 이벤트 핸들러로는 bind(), delegate(), live(), on() 등등이 있습니다. 그 중에서 live() 이벤트 핸들러가 있는데 이에 대하여 알아봅니다. 이 이벤트 역시 bind()함수처럼 클릭이나 그 외의 이벤트를 연결해주는 핸들러로서 사용됩니다. 사용방법은 간단하며 아래와 같습니다. $(선택요소).liv

View : 1326 / Created : 2015-03-12

js [제이쿼리] 모든 애니메이션 및 큐 중지하기, finish() finish() 함수는 현재 실행되는 모든 애니메이션 효과를 중지시킬 수 있습니다. 이는 stop() 함수의 stop(true, true)와 거의 비슷하나 finish()의 경우 CSS 속성에서 사용되는 애니메이션 역시 멈추게 할 수 있어 좀 더 효과적이고 폭 넓게 사용할 수 있는 장점이 있죠.* 이 함수는 제이쿼리(jQuery) 1.9 버전에 추가되었습니다.$(선택요소

View : 3858 / Created : 2015-03-12

js [HTML] select 태그(박스) 사용방법 오늘은 셀렉트박스(Selectbox UI)는 웹사이트에서 굉장히 많이 사용되는 인터페이스 UI 중 하나입니다. 간단하게 선택하여 사용하는 select 태그를 사용한 방식과 콤보박스라 불리는 좀 더 기능적 특징을 가진 UI로 구분할 수 있습니다. 오늘은 select 태그를 사용한 방법에 대하여 예제와 함께 알아보도록 하겠습니다.<span da

View : 64315 / Created : 2015-03-06

js [jQuery] 이전 또는 다음 요소 선택하기, prev(), next() 제이쿼리의 선택자 요소에서 인접한 다른 요소를 선택하는 방법은 매우 다양합니다. 그렇기 때문에 이를 활용해 다른 요소를 쉽게 선택이 가능하죠. 대표적인 선택자 방법으로 부모나 자식요소를 선택하는 parent(), children()

View : 41750 / Created : 2015-02-17

js [자바스크립트] Math() 함수를 사용해 음수를 양수로 변환하기 자바스크립트에서 음(-)의 값을 가진 숫자를 양(+)의 값으로 변환하기 위한 방법을 알아보겠습니다. Math 객체의 abs() 함수를 사용하면 간단하게 음의 값을 양수로 전환 가능합니다. 그럼 간단한 문법 및 방법은 아래와 같습니다.

View : 27804 / Created : 2015-02-09

js [자바스크립트] 숫자타입을 문자타입으로 변환, toString() 데이터를 서버에서 받아오는 경우에 필요한 타입은 문자이나 데이터가 숫자 타입으로 저장되어 있어 자바스크립트에서 다시 문자 타입으로 바꾸어주어야하는 경우가 있을 수 있습니다. 이때 어떻게 하면 숫자를 문자로 바꿀 수 있을까요?이 경우 비교, 연산등의 작업을 하기 위해 타입변경이 불가피한데 아래는 숫자타입을 문자로 변경하는 방법입니다. 먼저 숫자타입을 문자 타입으로 변경할 경우 사용방법은 아래와 같습니다. test.toString(

View : 5466 / Created : 2015-02-06

js 자바스크립트로 반복문 만들기 아래는 자바스크립트 또는 제이쿼리를 사용하여 반복문을 만드는 방법을 알아보려고합니다. 어떻게 반복문을 만들 수 있고 어떤 차이가 있는지 알아보세요.# 자바스크립트 제이쿼리 반복문 만들기자바스크립트에서 반복문(루

View : 8634 / Created : 2015-02-05

js [자바스크립트] 쿠키(cookie) 저장 및 삭제 예제보기 브라우저의 쿠키(cookie) 데이터저장소를 이용하면 최근에 본 페이지나 키워드등을 저장할 수 있습니다. 온라인쇼핑몰이라면 관심상품으로 등록할 수도 있을테고... 온라인 사전 사이트라면 기존에 검색했던 내용들을 저장할 수 있을 것입니다.<span data-custom-style="c

View : 49348 / Created : 2015-02-04

js [제이쿼리] 마우스 오버(엔터)와 아웃(리브), 호버 이펙트 구현 방법 알아보기 jquery 또는 자바스크립트를 사용해 마우스가 특정 엘리먼트에 들어왔을때 이벤트를 발생하게 하는 방법에 대하여 알아보고자 합니다. 우선 아래와 같이 두 가지 방법이 존재합니다.#1 마우스오버(마우스엔터), 마우스 올렸을때.mouseenter()// mouseover() 메소드를 사용한 방법.on('mouseenter',

View : 20441 / Created : 2015-02-03

js [jQuery] 사용자 속성 선택자로 접근하는 방법, 사용자 속성 선택자 제이쿼리(jquery)를 사용해 사용자 속성에 접근해 값을 불러오려면 어떻게 해야할까요? 예를 들어 아래와 같은 속성이 있다고 할 경우...<body><img data-picnum="1" class="pic" src="/test1.jpg" /><img data-picnum="2" class="pic" src="/test2.jpg" /><img data-picnum

View : 5727 / Created : 2015-01-23

js [자바스크립트, jQuery] 스크롤 안 움직이게 막기, 스크롤 고정 웹브라우저 안에서 키보드나 마우스 등을 사용하여 다른 영역으로 이동하는 방법은 무엇이 있을까요? 여러가지 방법이 있을 것입니다. 오늘은 사용자가 임의로 스크롤을 이동하는 것을 막기 위한 스크립트 방법을 알아보려합니다.우선 사용자가 페이지 안에서 스크롤을 사용해 이동하는 경우 어떤 방법을 사용할까요?<ul class="p

View : 58319 / Created : 2015-01-13

js [자바스크립트] 크로스도메인 서브도메인 접근방법, document.domain 동일 출처 정책에 따라 외부 URL 및 도메인을 통한 DOM객체의 접근에 제한을 가지게 됩니다. 하지만 서브도메인을 사용해 중요한 소스를 서로 공유 할 필요가 있다면 아래 방법을 사용하여 이 문제를 해결할 수 있습니다.# 서

View : 32852 / Created : 2015-01-08

js [자바스크립트] 북마크(bookmark) 추가하기, addPanel() 현재 페이지를 북마크, 즐겨찾기에 추가(등록)하기 위한 방법은 아래와 같습니다. 만약 북마크 버튼의 id값이 bookmark_bt라고 한다면...$("#bookmark_bt").click(function (event) {event.preventDefault();var curr_url = this.href;var curr_title = this.title;if (window.sidebar) {<

View : 6881 / Created : 2015-01-08

js [jQuery] 요소를 앞 또는 뒤에 삽입하기, after(), before() 제이쿼리의 after(), before() 메소드를 사용하면 원하는 문서를 쉽게 이동할 수 있습니다. 자바스크립트의 append() 또는 appendTo()를 생각하시면 좀 더 쉽게 이해하실 수 있으실겁니다.$('기준이 되는 요소').after('이동할 요소');$('기준이 되는 요소').before('이동할 요소');사용방법은 위와 같으며 기준이 되는 요소의 앞 또는 뒤에 이동할 요소가 옮겨지게 됩니다. 그럼 좀 더 자세히 알아보기 위해 아래 예

View : 10365 / Created : 2014-12-01

js [자바스크립트] 동일한 단어를 문자열에서 찾기, match() 함수 자바스크립트의 match() 함수에 대하여 알아보려합니다. match() 함수는 특정 텍스트 안에 검색할 단어, 찾고 싶은 단어가 있는경우 해당 텍스트가 문구에 포함되어 있는지 확인할 수 있습니다. 또한 단어뿐만 아니라 <span data-custom-style="ct

View : 84253 / Created : 2014-11-28

js [jQuery] 무한 스크롤 구현하기, 스크롤 이벤트 scroll() 자바스크립트를 사용하여 웹사이트 구축시 무한스크롤(infinite scroll)이란 용어를 들을 수 있습니다. 아래에서는 무한스크롤이란 무엇이고 자바스크립트 라이브러리 제이쿼리(jQuery)를 사용하여 무한스크롤을 구현하는

View : 30981 / Created : 2014-11-25

js [자바스크립트] try catch 구문 및 디버깅 관련 알아보기 try catch 구문은 오류를 발견하고 핸들링하기 위하여 사용됩니다. 이 안에 사용된 함수는 이미 개발자에 의해서 수정이 되었다고 보고 자체 에러를 발생시키지 않기 때문에 오류가 발생하여도 무시할 필요가 있는 경우만 사용되죠. 그렇다면 언제 try catch 구문을 사용할까요?# try catch 구문은 언제 필요한가아래의 경우에 try catch

View : 16032 / Created : 2014-11-17

js [자바스크립트] 선택자API, DOM요소, 노드의 선택방법 메서드 자바스크립트를 이용해 웹페이지안의 모든 요소들을 (DOM요소) 선택하는 방법에 대하여 알아보려합니다. 먼저 가능한 방법으로 아래의 방법들이 있습니다.하나, DOM(문서객체모델) API 방법document.getElementById();document.getElementsByClassName();document.getElementsByTagName();둘, 선택자 API를 이용한 방법<sp

View : 10742 / Created : 2014-11-10

js [자바스크립트] 일정 시간마다 반복 실행하는 함수, setInterval() {} 자바스크립트를 사용하면서 많이 사용되는 함수 중 하나로 setInterval()이 있다. 많이 사용된다는 것은 그만큼 중요하기 때문일 것이다. 아래는 setInterval()을 무엇인지 알아보고 어떻게 구현하는지 예제를 통해 알아보려한다.# se

View : 126677 / Created : 2014-10-23

js [jQuery] 제이쿼리를 이용해 요소를 상대 또는 절대좌표 서서히 이동, animate() 제이쿼리(jQuery)를 이용해 원하는 엘리먼트를 간단하게 상대좌표 또는 절대좌표로 서서히 또는 빠르게 이동시킬 수 있습니다. 이 때 사용하는 메서드는 animate()입니다. # animate()를 이용한 이동의 특징- 단순히 문서객체 또는 요소를 이동시키기 위해서라면 아래 방법들도 있습니다.i. offset() 메소

View : 15505 / Created : 2014-09-23

js 아이폰 및 아이패드에만 자바스크립트적용 방법 일반적이지는 않겠지만 아이폰 또는아이패드에만 스크립트를 적용할 경우가 있을 수 있습니다. 이 경우 아래와 같이 자바스크립트 코드를 추가하면 가능합니다.# 코드 예제보기if (((navigator.userAgent.match(/iPhone/i)) || (navigator.us

View : 2905 / Created : 2014-09-17

js [JQuery] 절대좌표 및 상대좌표 확인 및 이동하기, offset(), position() 자바스크립트를 사용하여 특정 엘리먼트의 위치를 알려고합니다. 어떻게 해야할까요? jQuery를 사용하면 간단하게 요소의 절대좌표와 상대좌표를 구하거나 이를 이동할 수 있습니다. 그럼 아래에서 그 방법에 대하여 알아보고자 합니다... 우선 요소들의 위치 값들이 언제... 왜 필요할

View : 82328 / Created : 2014-09-07

js [jQuery] 점점 투명하게 만들기, animate(), opacity 제이쿼리(jQuery)는 animte() 객체를 사용한 다양한 동적 기능을 제공합니다. 그 중에서도 특히 opacity 속성이 많이 사용되는데 이를 이용해 원하는 문서 요소를 쉽고 간단하게 투명하게 만들 수 있습니다.<span data-cu

View : 21173 / Created : 2014-08-30

js [JavaScript] 공백(빈공간) 문자 제거하기, 없애기, 정규표현식 사용 공백제거를 위한 방법으로 PHP 또는 다른 많은 언어가 지원하는 trim() 내장함수가 자바스크립트에는 존재하지 않아 공백제거를 위한 다른 방법을 사용해야 합니다. 그런 이유로 정규표현식을 사용하거나 아니면 jQuery에서 지원하는 trim() 메소드등을 사용해야하죠.아래에는 문자

View : 125753 / Created : 2014-08-29

CATEGORIES

LATEST POSTs 최근 등록된 포스팅 목록