https://takeu.tistory.com/25

저작자표시 비영리 동일조건

'개발 > JavaScript' 카테고리의 다른 글

JS알고리즘 문제 풀이시 자주 사용되는 테크닉  (2) 2019.11.13
자바스크립트로 디데이 출력하기  (0) 2017.04.16
2017.01.03 jQuery 정리  (0) 2017.01.03
2016.12.28 스프레드 연산자  (0) 2016.12.28
2016.12.01 JavaScript 정리  (0) 2016.12.01

https://takeu.tistory.com/31

저작자표시 비영리 동일조건

'개발 > JavaScript' 카테고리의 다른 글

[JS] 자바스크립트 배열 메소드  (5) 2019.11.13
자바스크립트로 디데이 출력하기  (0) 2017.04.16
2017.01.03 jQuery 정리  (0) 2017.01.03
2016.12.28 스프레드 연산자  (0) 2016.12.28
2016.12.01 JavaScript 정리  (0) 2016.12.01

자바스크립트로 디데이 출력하기

단기 프로젝트에서 디데이를 출력하는 자바스크립트 코드를 짜게되어서 사용한김에 포스팅 하려함

코드

HTML

<div id="d-day"></div>

JavaScript

//디데이 종료 일자 설정
var countDownDate = new Date("May 9, 2017 06:00:00").getTime();

//1초마다 갱신되도록 함수 생성,실행
var x = setInterval(function() {
    // 오늘 날짜 등록
    var now = new Date().getTime();

    // 종료일자에서 현재일자를 뺀 시간
    var distance = countDownDate - now;

    // 각 변수에 일, 시, 분, 초를 등록
    var d = Math.floor(distance / (1000 * 60 * 60 * 24));
    var h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var s = Math.floor((distance % (1000 * 60)) / 1000);

    //id가 d-day인 HTML코드에 내용 삽입
    document.getElementById("d-day").innerHTML = "디데이까지 " + d +"일 " + h + "시간 " + m + "분 " + s + "초 남았습니다.";
});
저작자표시 비영리 동일조건

'개발 > JavaScript' 카테고리의 다른 글

[JS] 자바스크립트 배열 메소드  (5) 2019.11.13
JS알고리즘 문제 풀이시 자주 사용되는 테크닉  (2) 2019.11.13
2017.01.03 jQuery 정리  (0) 2017.01.03
2016.12.28 스프레드 연산자  (0) 2016.12.28
2016.12.01 JavaScript 정리  (0) 2016.12.01

jQuery 효과


작성방법 $("선택자").click(function(){ $("선택자").메소드;});

콜백함수는 앞의 함수가 끝나면 실행


jQuery 효과(effects)


숨기기 hide(speed, callback)

보여주기 show(speed, callback)

토글 toggle()


페이드인 fadeIn(speed,callback)

페이드아웃 fadeOut(speed,callback)

페이드토글 fadeToggle(speed,callback)

페이드투 fadeTo("slow", 0.7) 0.7은 투명도를 나타냄

속도는 "slow","1000" 등으로 표현


슬라이드다운 slideDown(speed,callback)

슬라이드업 slideUp(speed,callback)

슬라이드토글 slideToggle(speed,callback)


애니메이션 animate{( left: '250px', opacity:'0.5' height:'150px' width: '150px'}) 절대값

height: '+=150px' width: '+=150px'  상대값

height: 'toggle' 지정된 값 사용

애니메이션을 연속적으로 처리하는 큐기능


정지 stop(stopAll, goToEnd) 삭제여부지정

stopAll,goToEnd 둘다 기본값은 false


메소드 체인

연속으로 메소드를 쓰는

줄바꿈 가능


jQuery HTML


DOM = Document Object Model

HTML 및 XML 문서에 엑세스하기위한 표준 정의

text() html() val() 로 표현가능

attr(속성값, 변경)  속성값 가져올 때 사용


Element추가

append() html 끝부분에 내용 삽입

prepend() html  앞부분에 내용 삽입

after() 요소 뒤에 내용 삽입

before() 요소 전에 내용 삽입


remove() 선택된 요소 전체 삭제

empty() 선택된 요소의 자식요소 삭제


jQuery CSS

addClass() 다른 요소에 클래스 속성 추가 ex).addClass("important blue")

removeClass() 다른 요소에 클래스 속성 제거 ex).removeClass("blue important")

toggleClass() 클래스 속성 추가/제거 전환


css("background-color") 배경 색 반환

css("propertyname", "value") css속성 설정

css({"propertyname": "value", "propertyname": "value"}) 여러개의 css속성 설정

width() 폭 반환 / height() 높이 반환, 변경은 ()안에 변경값 입력

innerWidth() 패딩 포함 폭 반환 / innerHeight() 패딩 포함 높이 반환

outerWidth() 패딩,테두리 포함 폭 반환 / outerHeight() 패딩,테두리 포함 높이 반환(true)입력해야함


jQuery Traversing


parent() 선택 요소의 직접적인 부모 요소 반환 ex)$("span").parent

parents() 루트 요소까지 선택된 요소의 모든 상위 요소 반환 ex)$("span").parents("ul") span의 부모요소중 ul 반환

parentsUntil() 주어진 두 인자 사이의 모든 상위 요소 반환 ex)$("span").parentsUntil("div")


children() 선택 요소의 자식 요소 반환

find() find안의 요소 반환 ( "*" 입력시 모든 자식 요소 반환)


siblings() 형제 요소 반환 ex)$("h2").siblings("p") h2의 형제 요소중 <p>반환

next() 선택 요소 다음 형제 요소 반환 (<=>prev())

nextAll() 선택 요소 다음 형제 모두 반환 (<=>prevAll())

nextUntil() 선택요소 사이의 요소 모두 반환 (<=>prevUntil())


first() 첫 번째 요소 선택

last() 마지막 요소 선택

eq(1) 인덱스 번호 선택

not(".intro") intro 제외하고 선택


jQuery AJAX 

load() 

syntax: $(selector).load(URL,data,callback);


다른 프레임워크와 혼용시 $대신 jQuery작성

$.noConflict() 작성 뒤 사용

변수에 담을 수 있음 ex)var jq= $.noConflict()





저작자표시 동일조건

'개발 > JavaScript' 카테고리의 다른 글

[JS] 자바스크립트 배열 메소드  (5) 2019.11.13
JS알고리즘 문제 풀이시 자주 사용되는 테크닉  (2) 2019.11.13
자바스크립트로 디데이 출력하기  (0) 2017.04.16
2016.12.28 스프레드 연산자  (0) 2016.12.28
2016.12.01 JavaScript 정리  (0) 2016.12.01

https://takeu.tistory.com/28

저작자표시 동일조건

'개발 > JavaScript' 카테고리의 다른 글

[JS] 자바스크립트 배열 메소드  (5) 2019.11.13
JS알고리즘 문제 풀이시 자주 사용되는 테크닉  (2) 2019.11.13
자바스크립트로 디데이 출력하기  (0) 2017.04.16
2017.01.03 jQuery 정리  (0) 2017.01.03
2016.12.01 JavaScript 정리  (0) 2016.12.01

https://takeu.tistory.com/32

저작자표시 동일조건

'개발 > JavaScript' 카테고리의 다른 글

[JS] 자바스크립트 배열 메소드  (5) 2019.11.13
JS알고리즘 문제 풀이시 자주 사용되는 테크닉  (2) 2019.11.13
자바스크립트로 디데이 출력하기  (0) 2017.04.16
2017.01.03 jQuery 정리  (0) 2017.01.03
2016.12.28 스프레드 연산자  (0) 2016.12.28

+ Recent posts

티스토리툴바