A23 / 24 - 이력서 에 JS 추가

9331 단어
키워드
  • loading animation (애니메이션 불 러 오기)
  • sticky navbar (내 비게 이 션 표시 줄 접착 가 변)
  • auto hightlight navbar (자동 하 이 라이트 네 비게 이 션 옵션, 어디 에 가면 하 이 라이트)
  • auto scroll smoothly (자동 으로 부 드 럽 게 스크롤)
  • menu (메뉴)
  • auto hide aside (사 이 드 바 자동 숨 기기)
  • gapless slides (이음매 없 는 윤 방)
  • animate when scroll (스크롤 할 때 만 나타 나 는 애니메이션)
  • loading animation
    // html
    
    // css .loading { width: 200px; height: 200px; border: 1px solid red; position: relative; } .loading::before, .loading::after { content:''; background: black; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; animation: s 1.75s linear infinite; opacity: 0; } .loading::after{ animation-delay: 0.75s; } @keyframes s { 0%{ width: 0; height: 0; opacity: 1; } 100%{ width: 100px; height: 100px; opacity: 0; } }

    sticky navbar

    //         siteTopNavBar    sticky   
    window.onscroll = function(){
      if(window.scrollY !== 0){
        siteTopNavBar.classList.add('sticky')
      } else {
        siteTopNavBar.classList.remove('sticky')
      }
    }
    

    auto hightlight navbar
  • 특정 원소 집합 획득 (navbar 내 비게 이 션 에 대응 하 는 블록)
  • 시야 상단 에서 가장 가 까 운 요 소 를 얻 기
  • 획득 id
  • 대응 하 는 a 태그 획득
  • 대응 하 는 li 태그 획득
  • 모든 형제 요 소 를 획득
  • 모든 형제 요소 의 하 이 라이트 취소
  • 하 이 라이트 상단 에서 가장 가 까 운 것
  • auto scroll smoothly
  • 태그 배열 획득
  • 옮 겨 다 니 기
  • 기본 동작 막 기
  • 사용자 가 클릭 한 a 태그 획득
  • 라벨 속성 href
  • 획득
  • href 속성 에 따라 목표 요 소 를 획득
  • offset Top 에 따라 문서 상단 의 거 리 를 얻 습 니 다
  • 현재 top 과 목표 top 의 차 이 를 계산 합 니 다
  • 움 직 이 는 횟수 설정
  • 매번 얼마나 움 직 이 는 거 리 를 계산한다
  • 얼마나 많은 시간 을 한 번 움 직 이 는 지 계산한다
  • 타이머 설정
  • window 를 지정 한 좌표 로 미 끄 러 뜨 립 니 다
  • API & 팁
  • 절대 포 지 셔 닝 요소 가 완전히 중간
    .out{
      position:reletive;
    }
    .in{
      position: absolute;
      top: 0;
      left: 0;
      right : 0;
      bottom: 0;
      margin: auto;
    }
    
  • 절대적 인 포 지 셔 닝 요소 와 유동 요소 의 너 비 는 모두 작 을 수 있 는 만큼 작다
  • .
  • 줄 바 꾸 지 않 음
    .className {
      white-space: no-warp;
    }
    
  • window.onscroll 이벤트 - MDN 현재 페이지 스크롤 이벤트
  • window.scrollY 속성 - MDN 은 문서 가 수직 방향 으로 굴 러 간 픽 셀 값 을 되 돌려 줍 니 다
  • onmouseenter 이벤트 - MDN 은 지정 장치 (보통 마우스) 가 원소 로 이동 할 때 촉발 되 며 거품 이 일어나 지 않 습 니 다
  • onmouseleave 이벤트 - MDN 은 지정 장치 (보통 마우스) 가 원 소 를 옮 길 때 촉발 되 며 거품 이 일어나 지 않 습 니 다
  • target 과 currentTarget
    test
    div.onclick = function(e){ // click console.log(e.target) // test console.log(e.currentTarget) //
    test
    }
    target 은 당신 이 조작 하 는 요소 입 니 다. currentTarget 은 당신 이 감청 하 는 요소 입 니 다
  • node.nextSibling - MDN Node. nextSibling 은 읽 기 전용 속성 으로 부모 노드 의 childNodes 목록 에서 그 뒤에 있 는 노드 를 되 돌려 줍 니 다. 지정 한 노드 가 마지막 노드 라면 null 로 돌아 갑 니 다.문법: nextNode = node.nextSibling 주의: node.nextSibling 텍스트 노드 를 얻 을 수 있 습 니 다.재 귀적 으로 판단 할 수 있 습 니 다. while(node.nodeType === 3) { node = node.nextSibling } 또는 여러 가지 상황 을 고려 한 함수 로 포장 하여 사용 할 수 있 습 니 다
  • nodeType 노드 유형 - MDN 은 속성 만 읽 습 니 다. Node. node Type 은 이 노드 의 유형 을 표시 합 니 다.문법: var type = node.nodeType; 정 수 를 되 돌려 주 고 노드 유형 을 대표 합 니 다.자주 사용 하 는 것 은 1 과 3 이다.
    상수 값 설명 Node. ELEMENTNODE 1 요소 노드, 예 를 들 어.Node.TEXT_NODE 3 Element 또는 Attr 의 실제 텍스트
  • tagName 의 반환 값 은 대문자
    ele.tagName // DIV
  • element.tagName -MDN
    返回当前元素的标签名
    语法:elementName = element.tagName
    elementName 是一个字符串,包含了element元素的标签名.

  • document.querySelectorAll() -MDN
    返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
    语法:elementList = document.querySelectorAll(selectors);
    elementList 是一个静态的 NodeList 类型的对象.
    selectors 是一个由逗号连接的包含一个或多个CSS选择器的字符串.
    如果 selectors参数中包含 CSS伪元素,则返回一个空的elementList.

    //   :
    var matches = document.querySelectorAll("div.note, div.alert");
    
    var liTags = document.querySelectorAll('nav.menu > ul > li')
    
    와 관련 이 있 습 니 다. element. query Selector All
  • document.querySelector() - MDN 은 문서 에 지 정 된 선택 기 그룹 과 일치 하 는 첫 번 째 요 소 를 되 돌려 줍 니 다.문법: element = document.querySelector(selectors); element 는 element 대상 (DOM 요소) 입 니 다.selectors 는 하나의 문자열 로 하나 이상 의 CSS 선택 기 를 포함 하고 여러 개 는 쉼표 로 구 분 됩 니 다.
  • event.preventDefault() - MDN 기본 이벤트 문법 취소: event.preventDefault(); 예:
    
    
    a.onclick = function(e) {
      e.preventDefault()
    }
    
    //    a         
    
  • getAttribute() - MDN 은 원소 에서 지정 한 속성 값 을 되 돌려 줍 니 다.지정 한 속성 이 존재 하지 않 으 면 null 또는 "(빈 문자열) 을 되 돌려 줍 니 다.문법: let attribute = element.getAttribute(attributeName); attribute 는 attributeName 속성 값 을 포함 하 는 문자열 입 니 다.attributeName 은 가 져 오 려 는 속성 값 의 속성 이름 입 니 다.예:
    
    
    a.getAttribute('href') // '#about'
    
    a.href  // 'http://127.0.0.1:1800/#about'
    //     href           
    //   getAttribute               
    
  • debugger - MDN debugger 문 구 는 정지점 을 설정 하 는 등 사용 가능 한 디 버 깅 기능 을 호출 합 니 다.디 버 깅 기능 이 없 으 면 이 문 구 는 작 동 하지 않 습 니 다.문법: debugger
  • element.getBoundingClientRect() - MDN 이 반환 요소 의 크기 와 시각 에 대한 위치 문법: rectObject = object.getBoundingClientRect(); 상세 한 것 은 MDN 을 참조 합 니 다.
  • HTMLElement.offsetTop - MDN HTML Element. offsetTop 은 읽 기 전용 속성 으로 현재 요소 가 offsetParent 요소 의 맨 위 에 있 는 거 리 를 되 돌려 줍 니 다.문법: topPos = element.offsetTop; topPos 는 되 돌아 오 는 픽 셀 수 입 니 다.예:
    var d = document.getElementById("div1");
    var topPos = d.offsetTop;
     
    if (topPos > 10) {
      // div1      offsetParent            10 px
    }
    
  • Window.scrollTo() - MDN 은 문서 의 한 좌표 로 스크롤 합 니 다.문법: window.scrollTo(x-coord,y-coord ) x - coord 는 문서 의 횡축 좌표 입 니 다.y - coord 는 문서 의 세로 축 좌표 입 니 다.예: window.scrollTo( 0, 1000 );
  • window.setTimeout() - MDN WindowOrWorker Global Scope 가 혼 합 된 setTimeout () 방법 은 타이머 가 만 료 된 후에 함수 나 지정 한 코드 를 실행 하 는 타 이 머 를 설정 합 니 다.
  • window.setInterval() - MDN WindowOrWorker Global Scope 의 setInterval () 방법 은 함수 하 나 를 중복 호출 하거나 코드 세그먼트 를 실행 하 며 매번 호출 사이 에 일정한 시간 지연 이 있 습 니 다.interval ID 를 되 돌려 줍 니 다.문법: let intervalID = window.setInterval(func, delay[, param1, param2, ...]); let intervalID = window.setInterval(code, delay); 매개 변수:
  • intervalID 은 이 반복 작업 의 유일한 식별 자 이 며, 매개 변수 로 clearInterval () 에 전달 할 수 있 습 니 다.
  • func 중복 호출 하고 싶 은 함수 입 니 다.
  • code 은 다른 문법 응용 으로 반복 적 으로 실행 하고 자 하 는 문자열 로 구 성 된 코드 (이 문법 을 사용 하 는 것 은 추천 하지 않 고 추천 하지 않 는 이 유 는 eval () 과 같다) 를 말한다.
  • delay 은 매번 지연 되 는 밀리초 수 (1 초 는 1000 밀리초) 이 고 함수 의 매번 호출 은 이 지연 후에 발생 합 니 다.setTimeout 과 마찬가지 로 실제 지연 시간 이 조금 길 어 질 수 있 습 니 다.주의해 야 할 것 은 IE 는 첫 번 째 문법 에서 지연 함수 에 추가 매개 변 수 를 전달 하 는 기능 을 지원 하지 않 습 니 다.
  • window.clearInterval() - MDN 은 setInterval 로 설 정 된 중복 정시 작업 을 취소 합 니 다.문법: window.clearInterval(intervalID) interval ID 는 취소 하고 자 하 는 타이머 의 ID 입 니 다. 이 ID 는 정수 이 고 setInterval () 에서 되 돌 아 옵 니 다.
  • 완 동 함수 - MDN 완 동 함 수 는 애니메이션 효과 가 실 행 될 때의 속 도 를 지정 하여 더욱 진실 하 게 보이 도록 합 니 다.몇 가지 흔히 볼 수 있 는 것:
  • linear 선형
  • easeInSine 페 이 드 인
  • easeOutSine 페 이 드 아웃
  • waseInOutSine 페 이 드 아웃
  • easeInElastic
  • easeOutBounce Tween. js 를 통 해 사용 할 수 있 습 니 다. cdnjs. com 에서 스 크 립 트 를 찾 을 수 있 습 니 다
  • Nath.abs(x) - MDN Math. abs (x) 함수 가 지정 한 숫자 'x' 의 절대 값 을 되 돌려 줍 니 다.
  • Node.parentElement - MDN 은 현재 노드 의 부모 요소 노드 를 되 돌려 줍 니 다. 만약 에 이 요소 가 부모 노드 가 없 거나 부모 노드 가 하나의 요소 노드 가 아니라면 null 을 되 돌려 줍 니 다.
  • Node.parentNode - MDN 은 지정 한 노드 가 DOM 트 리 에 있 는 부모 노드 를 되 돌려 줍 니 다.
  • ParentNode.children - MDN 은 노드 의 하위 elements
  • 를 되 돌려 줍 니 다.
  • Node.childNodes - MDN 은 지정 한 노드 를 포함 한 하위 노드 의 집합 을 되 돌려 줍 니 다
  • childrenchildNodes 의 차이 점 childNodes 은 요소 노드 뿐만 아니 라 본 고 노드 (IE 는 텍스트 노드 로 돌아 가지 않 음) 도 있 을 수 있 으 며 children 는 요소 노드 만 돌아 갈 수 있 습 니 다. (children 은 IE 에 주석 노드 를 포함 하고 있 음 을 주의 하 십시오.)또한 둘 다 실시 간 으로 업 데 이 트 된 집합 이다. 즉, js 동적 으로 요 소 를 추가 하면 집합 length 속성 에 바로 반영 된다.
  • Git 관련
    #       commit,       
    #            ,        commit     
    $ git commit --amend -m [message]
    
    #      commit,           
    $ git commit --amend [file1] [file2] ...
    [git   commit](http://blog.csdn.net/tangkegagalikaiwu/article/details/8542827)
    
    #             
    $ git diff
    
    

    참고: 완 일 봉 - 명령 목록

    좋은 웹페이지 즐겨찾기