A23 / 24 - 이력서 에 JS 추가
// 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
.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 은 지정 장치 (보통 마우스) 가 원 소 를 옮 길 때 촉발 되 며 거품 이 일어나 지 않 습 니 다 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 () 에서 되 돌 아 옵 니 다. 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 은 지정 한 노드 를 포함 한 하위 노드 의 집합 을 되 돌려 줍 니 다 children
와 childNodes
의 차이 점 childNodes
은 요소 노드 뿐만 아니 라 본 고 노드 (IE 는 텍스트 노드 로 돌아 가지 않 음) 도 있 을 수 있 으 며 children
는 요소 노드 만 돌아 갈 수 있 습 니 다. (children 은 IE 에 주석 노드 를 포함 하고 있 음 을 주의 하 십시오.)또한 둘 다 실시 간 으로 업 데 이 트 된 집합 이다. 즉, js 동적 으로 요 소 를 추가 하면 집합 length
속성 에 바로 반영 된다. # 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
참고: 완 일 봉 - 명령 목록
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.