[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기
Posted at 2018. 9. 17. 11:07 | Posted in JavaScript & jQuery/jQuery참고① http://dolgo.net/php/questions/113
참고② http://www.nextree.co.kr/p10155
■ data() 메서드를 통해 엘리먼트를 변수처럼 사용하기
PHP의 경우 | <input type="hidden" name="print" value="<?=$변수명?>"/> |
JSP의 경우 | <input type="hidden" name="print" value="<%=변수명%>"/> |
<html> |
# 출력결과
하지만 최근 jQuery의 data( ) 메소드에대해 알게 되어서 이렇게 정리하게 되었다.
#01. data() 메서드를 통한 데이터 읽어오기
# 소스코드
<html> |
# 출력결과
위와 같이 data-* 로 선언한 값들을 손쉽게 가져올 수 있는 것을 확인 할 수 있다.
사실 어떻게 쓰든 사용자에게만 보여주지 않을뿐으로,
사용하는 목적은 type="hidden"과 data-*의 방식은 크게 다를 것이 없겠지만.
type="hidden" form 태그를 통해 데이터를 submit 하는 방식으로 전송할때 hidden으로 선언한 데이터를 전송할 수 있다는 것에서
이점이 있을 것이고,
data-*는 클라이언트 페이지에서 스크립트와 AJAX를 통해 다룰 데이터를 삽입하면 유용할 것이고,
반복문등을 통한 다수의 게시글 리스트등을 뿌려주는곳에서 데이터의 삽입이 조금더 편하게 제작이 가능할 것으로 보이기 때문에
위에 적은 각각의 장점을 용도에 맞게 사용하려 한다.
#02. data() 메서드를 통한 데이터 변경하기
# 소스코드
<html> |
# 출력결과
'JavaScript & jQuery > jQuery' 카테고리의 다른 글
[jQuery] 퍼센트 게이지를 나타내는 Progress Bar (0) | 2018.10.25 |
---|---|
[jQuery] jQuery Ajax 전송 (0) | 2018.09.28 |
[jQuery] jQuery 셀렉터 정리 (0) | 2018.09.10 |
[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기 (1) | 2018.08.20 |
[jQuery] 커스텀 팝업창 오픈하기 (0) | 2018.08.14 |
[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation
Posted at 2018. 9. 13. 13:10 | Posted in JavaScript & jQuery/JavaScript ※ Position 객체의 구조 |
객체 | 설명 |
:: 1단계 객체 :: |
|
position |
· timestamp, coords 프로퍼티를 가지는 자바스크립트 객체이다. |
:: 2단계 객체 :: |
|
timestamp |
· 위치를 수집한 시간을 표현하는 숫자 |
coords |
· 현재의 위치를 정의하는 객체 |
:: 3단계 객체 :: |
|
heading |
· 장치가 움직이는 방향을 나타내는 숫자. · 이 값은 정북(똑바른 북쪽)에서 벗어난 각을 나타낸다. · 0도는 정북향을 나타내며 방향은 시계방향(동쪽은 90도이고, 서쪽은 270도)이다. · speed 값이 0이면 heading 값은 NaN이 된다. · 장치에서 haeading 정보를 제공할 수 없을 때 이 값은 null 이된다. |
altitude |
· 고도, 해수면을 기준으로 미터 단위 · null일 수도 있다. |
latitude |
· 위도, 소수점을 포함하는 숫자. (X) |
accuracy |
· 미터로 위도와 경도의 정확도를 나타내는 숫자 |
longitude | · 경도, 소수점을 포함하는 숫자 (Y) |
speed | · 장치의 속도를 나타내며, 초당 미처 값을 숫자로 나타낸다. · 이 값은 null 일 수 도 있다. |
altitudeAccuracy | · 미터로 고도의 정확도를 나태내는 숫자 · null일 수도 있다. |
# 소스코드
<html> |
# 출력결과
■ 지오로케이션 + 다음 지도 API 연동하기
# 소스코드
<html> |
# 출력결과
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
[JavaScript] email 형식 검사하기 (0) | 2018.09.27 |
---|---|
[JavaScript] Audio 객체를 이용한 음악 재생 (0) | 2018.09.27 |
[JavaScript] 저장소 사용하기 (0) | 2018.09.07 |
[JavaScript] Session 데이터 읽고, 쓰기 (0) | 2018.09.04 |
[JavaScript] Cookie 생성, 삭제 및 읽어오기 (4) | 2018.09.03 |
[jQuery] jQuery 셀렉터 정리[jQuery] jQuery 셀렉터 정리
Posted at 2018. 9. 10. 13:21 | Posted in JavaScript & jQuery/jQuery■ jQuery 셀렉터 정리
#01. CSS 셀렉터
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
태그 셀렉터 |
jQuery("태그명") |
· 특정 태그 |
아이디(id) 셀렉터 |
jQuery("#ID명") |
· 특정 ID를 속성으로 갖는 태그 |
네임(name) 셀렉터 | jQuery("태그속성[name=Name명]") | · 특정 Name을 속성으로 갖는 태그 |
클래스(class) 셀렉터 |
jQuery(".Class명") |
· 특정 클래스를 속성으로 갖는 태그 |
자손 셀렉터 |
jQuery("태그1 태그2") |
· 특정 태그의 안쪽에 있는 태그 |
유니버셜 셀렉터 |
jQuery("*") |
· 전체 태그 |
그룹 셀렉터 |
jQuery("셀렉터1, 셀렉터2") |
· 복수의 셀렉터 |
#02. jQuery 독자 필터
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
first 필터 |
jQuery("태그").first() |
· 지정한 태그의 첫태그 |
last 필터 |
jQuery("태그").last() |
· 지정한 태그의 마지막 태그 |
even 필터 |
jQuery("태그:even") |
· 지정한 태그의 짝수 번째 태그 |
odd 필터 |
jQuery("태그:odd") |
· 지정한 태그의 홀수 번째 태그 |
eq 필터 |
jQuery("태그").eq(번호), |
· 지정한 번호의 태그(번호는 0부터 시작) |
gt 필터 |
jQuery("태그").gt(번호) |
· 지정한 태그보다 뒤의 태그(index + 1번째 요소) |
lt 필터 | jQuery("태그").lt(번호) | · 지정한 태그보다 앞의 태그(index 미만의 요소) |
header 필터 | jQuery("태그:header") | · h1 ~ h6까지의 heading 태그 |
contatin 필터 | jQuery("태그:contatin(문자열)") | · 특정 문자열을 포함하고 있는 태그 |
has 필터 | jQuery("태그:has(태그2)") | · 특정 태그를 호함하고 있는 태그 |
parent 필터 | jQuery("태그").parent() | · 자식 태그 혹은 문자열을 포함하고 있는 태그 |
animated 필터 | jQuery("태그:animated") | · 애니메이션 중의 모든 요소를 취득 |
contains 필터 | jQuery("태그:contains(문자열)") | · 특정문자열을 포함한 요소를 취득 |
empty 필터 | jQuery("태그").empty() | · 특정 태그의 문자열을 삭제 |
#03. CSS2에서 추가된 셀렉터
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
자손 셀렉터 | jQuery("부모 태그명 자손 태그명") | · 부모 태그의 모든 자손 요소의 자손 태그명을 취득 |
자식 셀렉터 |
jQuery("부모 태그명 > 자식 태그명") |
· 부모 태그의 바로 밑에 자식 태그 |
인접 셀렉터 |
jQuery("태그1 + 태그2") |
· 특정 태그의 다음 태그 |
형제 셀렉터 | jQuery("태그1 ~ 태그2") | · 특정 태그의 형제 요소 태그2를 취득 |
first-child 유사클래스 |
jQuery("태그:first-child") |
· 동일 태그 안의 첫 태그 |
#04. CSS3에서 추가된 셀렉터
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
간접 셀렉터 |
jQuery("태그1 ~ 태그2") |
· 특정 태그의 뒤에 나타나는 태그 |
부정유사 클래스 |
jQuery("태그1").not(태그2) |
· 특정 태그 안에서 태그2를 제외한 태그 |
empty 클래스 |
jQuery("태그:empty") |
· 자식태그 혹은 문자열을 포함하지 않는 태그 |
nth-child 유사 클래스 |
jQuery("태그:nth-child(번호)") |
· 특정 태그 안에서 지정한 번호의 태그 |
last-child 유사 클래스 |
jQuery("태그:last-child") |
· 동일 태그안의 가장 마지막 태그 |
only-child 유사 클래스 |
jQuery("태그:only-child") |
· 특정 태그가 하나만 포함된 태그 |
#05. CSS의 속성 셀렉터
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
[attribute] |
jQuery("[속성명]") |
· 특정 속성을 가진 태그 |
[attribute = 'value'] |
jQuery("[속성명 = '값']") |
· 특정 속성이 지정한 값을 가진 태그 |
[attribute != 'value'] |
jQuery("태그명[속성명 != '값']") |
· 특정 속성이 지정한 값을 갖지 않는 태그 |
[attribute ^= 'value'] |
jQuery("태그명[속성명 ^= '값']") |
· 특정 속성이 지정한 값으로 시작되는 태그 |
[attribute $= 'value'] |
jQuery("[속성명 $= '값']") |
· 특정 속성이 지정한 값으로 끝나는 태그 |
[attribute *= 'value'] |
jQuery("[속성명 *= '값']") |
· 특정 속성이 지정한 값을 포함하고 있는 태그 |
[attributeFilter1] [attributeFilter2] | jQuery("[태그셀렉터1][태그셀렉터2") | · 복수 속성 셀렉터에 해당하는 태그 |
#06. 요소의 조작
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
append(c) 내부 |
jQuery("태그").append(c) |
· 요소 c를 현재 요소의 자식 요소 뒤에 추가 |
append(함수) 내부 |
jQuery("태그").append(함수) |
· 함수의 결과를 현재 요소의 자식 요소 뒤에 추가 ※ 함수는 인수로서 인덱스 번호, 현재의 자식 요소를 나타내는 HTML 문자열을 받아 추가해야 할 HTML 문자열을 돌려준다. |
prepend(c) 내부 |
jQuery("태그").prepend(c) |
· 요소 c를 현재 요소의 자식 요소 선두에 추가 |
prepend(함수) 내부 |
jQuery("태그").prepend(함수) |
· 함수의 결과를 현재 요소의 자식 요소 선두에 추가 ※ 함수는 인수로서 인덱스 번호, 현재의 자식 요소를 나타내는 HTML 문자열을 받아 추가해야 할 HTML 문자열을 돌려준다. |
appendTo(c) 내부 |
jQuery("태그").appendTo(c) |
· 현재 요소를 요소 c의 자식 요소 뒤에 추가(append의 역) |
prependTo(c) 내부 |
jQuery("태그").prependTo(c) |
· 특정 속성이 지정한 값을 포함하고 있는 태그 |
after(c) 외부 | jQuery("태그").after(c) | · 요소 c를 현재 요소의 뒤에 추가 |
after(함수) 외부 | jQuery("태그").after(함수) | · 함수 결과를 현재 요소의 뒤에 추가 ※ 함수는 인수로서 인덱스 번호를 받아 추가해야할 HTML 문자열을 돌려준다. |
before(c) 외부 | jQuery("태그").after(c) | · 요소 c를 현재 요소의 앞에 추가 |
before(함수) 외부 | jQuery("태그").after(함수) | · 함수 결과를 현재 요소의 앞에 추가 ※ 함수는 인수로서 인덱스 번호를 받아 추가해야할 HTML 문자열을 돌려준다. |
insertAfter(c) 랩 | jQuery("태그").insertAfter(c) | · 현재 요소를 c의 뒤에 추가(after의 역) |
insertBefore(c) 랩 | jQuery("태그").insertBefore(c) | · 현재 요소를 c의 앞에 추가(before의 역) |
wrap(html | elem) 랩 | · 현재 요소를 지정한 HTML 문자열 / 요소를 둘러싼다. | |
wrap(함수) 랩 | · 현재 요소를 함수의 결과로 둘러 싼다. | |
wrapAll(html | elem) 랩 | · 현재 요소 전체를 지정한 HTML 문자열 / 요소로 둘러싼다. | |
wraplnner(html | elem) 랩 | · 현재 요소의 내용을 함수의 결과로 둘러싼다. | |
unwrap() 랩 | · 현재 요소를 둘러싸고 있는 요소를 제거 | |
replaceWith(c) 치환외부 | · 현재 요소를 요소 c로 치환 | |
replaceWith(함수) 치환외부 | · 현재 요소를 함수의 결과로 치환 | |
replaceAll(c) | · 현재 요소로 요소 c를 치환 | |
empty() 삭제 | · 현재 요소의 안에 있는 모든 요소를 삭제 | |
remove([exp]) | · 현재 요소를 삭제(인수 exp로 필터링 가능) | |
detach([exp]) | · 현재 요소를 이벤트 리스너를 유지한 채로 파기 (인수 exp로 필터링 가능) | |
clone([flag]) | · 현재 요소를 카피 (인수 flag가 true의 경우는 이벤트 리스너도 정리해 카피) |
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
add() |
|
|
andSelf(0 |
|
|
children() |
|
|
filter() |
|
|
find() |
|
|
map() |
|
|
next() |
| |
nextAll() | ||
not() | ||
parent() | ||
parents() | ||
prev() | ||
prevAll() | ||
siblings | ||
slice | ||
clone |
'JavaScript & jQuery > jQuery' 카테고리의 다른 글
[jQuery] jQuery Ajax 전송 (0) | 2018.09.28 |
---|---|
[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기 (0) | 2018.09.17 |
[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기 (1) | 2018.08.20 |
[jQuery] 커스텀 팝업창 오픈하기 (0) | 2018.08.14 |
[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기 (0) | 2018.08.09 |
[JavaScript] 저장소 사용하기[JavaScript] 저장소 사용하기
Posted at 2018. 9. 7. 15:51 | Posted in JavaScript & jQuery/JavaScript■ localStorage를 사용한 저장소 기능 사용하기
-. 기존의 자바스크립트는 쿠키를 사용하는 방법 이외에도 수많은 방법을 사용해 데이터를 저장하고자 노력했다.
-. 이전에는 플래시 저장소를 사용하거나 각각의 브라우저에 존재하는 특수한 저장소를 사용했다.
-. 데이터를 오래 지속하는 것은 애플리케이션을 만들 때 꼭 필요한 기능이므로 HTML5부터는 저장소 기능을 기본으로 제공한다.
-. 저장소는 웹 브라우저를 삭제하지 않는이상 데이터를 영구적으로 저장한다.
:: 저장소 기능을 지원하는 브라우저 :: |
|
인터넷 익스플러(Internet Explorer) |
8 이상 |
파이어 폭스(Fire Fox) |
3.5 이상 |
사파리(Safari) |
4.0 이상 |
크롬(Chrome) |
4.0 이상 |
오페라(Opera) |
10.5 이상 |
# 소스코드
<html> // getItem( ) 메서드를 이용하여 key 값의 value 값을 찾는다. |
# 출력결과
※ localStorage 객체의 메서드
메서드 이름 |
설명 |
setItem(key, value) |
· 로컬 저장소에 데이터를 생성한다. |
getItem(key) |
· 로컬 저장소의 데이터를 읽어온다. |
removeItem(key) |
· 로컬 저장소의 지정한 key 값의 데이터를 삭제한다. |
clear() |
· 로컬 저장소의 데이터를 전부 삭제한다. |
key(number) |
· 로컬 저장소의 특정 순서의 데이터를 읽어온다. |
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
[JavaScript] Audio 객체를 이용한 음악 재생 (0) | 2018.09.27 |
---|---|
[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation (0) | 2018.09.13 |
[JavaScript] Session 데이터 읽고, 쓰기 (0) | 2018.09.04 |
[JavaScript] Cookie 생성, 삭제 및 읽어오기 (4) | 2018.09.03 |
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입 (7) | 2018.08.21 |