A 23/24-履歴書にJSを追加します.

8127 ワード
キーワード
  • loadingアニメーション
  • sticky navbar(ナビゲーションバーが付いています.可変)
  • at hight light navbar
  • at scroll smothly(自動平滑スクロール)
  • menu(メニュー)
  • aut hide aside(自動的にサイドバーを隠す)
  • gapless sides
  • アニメイト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')
  }
}
    aut hight light navbar
  • は、特定の要素セット
    • を取得する.
  • は、視口の上から最も近い要素
    • を取得する.
  • はID
    • を獲得しました.
  • は、対応するaタグ
    • を取得する.
  • は、対応するliタグ
    • を取得する.
  • は、そのすべての兄弟要素
    • を得る.
  • すべての兄弟要素のハイライトをキャンセルしました.
  • ハイライト距離が一番近い
    • です.
    aut scroll smothly
  • は、ラベル配列
    • を取得する.
  • エルゴード
  • デフォルト動作を阻止する
  • は、ユーザがクリックした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ノード.nextSiblingはリードオンリー属性であり、親ノードのchild Nodesリストの中にその後ろに続くノードに戻り、指定されたノードが最後のノードである場合、nullに戻る.構文:nextNode = node.nextSiblingは、テキストノードである可能性があるということに注意してください.node.nextSibling while(node.nodeType === 3) {または様々な状況を考慮したものを書いて、関数としてカプセル化して
    • を使用してもよい.
  • node = node.nextSibling }ノードタイプ-MDN読み取り専用属性Node.nodeTypeは、ノードのタイプを表しています.構文:nodeTypeは、ノードタイプを表す整数を返します.よく使われているのは1と3です.
    定数値記述Node.EEMENT_NODE 1要素ノード、例えば和.ノード.TEXT_NODE 3 ElementまたはAttrの実際の文字
  • var type = node.nodeType;の戻り値は、大文字
    

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.querySelectorAll
    • である.
  • tagName−MDNは、指定されたセレクタグループに合致する最初の要素(深さ優先順位を使用してドキュメントのノード124を巡回し、ドキュメントマークの最初の要素を通して、サブノード数の順序でノードを反復する)をドキュメントに返す.構文:document.querySelector() elementはelementオブジェクト(DOM要素)です.selectorsは1つの文字列で、1つまたは複数のCSSセレクタを含み、複数はコンマで区切られます.
  • element = document.querySelector(selectors);-MDNキャンセルデフォルトイベントシンタックス:event.preventDefault()例:
    

a.onclick = function(e) {
  e.preventDefault()
}

//    a
  • event.preventDefault();−MDNは要素上で指定された属性値を返します.指定された属性が存在しない場合は、nullまたは"(空の文字列)を返します.構文:getAttribute() atributeは、atributeName属性値を含む文字列です.atributeNameはあなたが取得したい属性値の属性名です.例:
    

a.getAttribute('href') // '#about'

a.href  // 'http://127.0.0.1:1800/#about'
//     href           
//   getAttribute
  • let attribute = element.getAttribute(attributeName);-MDN debuggar文は、ブレークポイントの設定など、任意の利用可能なデバッグ機能を起動する.デバッグ機能がないと、この文は機能しません.文法:debugger
  • debugger−MDNこの戻り値の大きさおよび視認口に対する位置文法:element.getBoundingClientRect()はMDNを詳細に参照してください.
  • rectObject = object.getBoundingClientRect();−MDN HTMLEMEnt.offset Topはリードオンリー属性であり、現在の要素はそのオフセット・パーティ要素の上部からの距離を返す.構文:HTMLElement.offsetTop topPosは、リターンされたピクセル数である.例:
    var d = document.getElementById("div1");
var topPos = d.offsetTop;
 
if (topPos > 10) {
  // div1      offsetParent            10 px
}
  • topPos = element.offsetTop;-MDNはドキュメント内のある座標にスクロールします.構文:Window.scrollTo() x-coordは、ドキュメント内の横軸座標です.y-coordはドキュメント内の縦軸座標です.例:window.scrollTo(x-coord,y-coord )
  • window.scrollTo( 0, 1000 );-MDN WindowOrWork Global Scope混合のsetTimeout()方法は、タイマーが満了した後に関数または指定されたコードを実行するタイマーを設定する.
  • window.setTimeout()-MDN WindowOrWork Global ScopeのsetInterval()方法は、関数を繰り返して呼び出したり、コードセグメントを実行したりして、呼び出しごとに固定された時間遅延を持つ.interval IDを返します.構文:window.setInterval() let intervalID = window.setInterval(func, delay[, param1, param2, ...]);パラメータ:
  • let intervalID = window.setInterval(code, delay);は、この繰り返し動作の一意の識別子であり、パラメータとしてclear Interval()に渡すことができる.
  • intervalIDは、繰り返し起動したい関数です.
  • funcは別の文法の応用であり、繰り返し実行したい文字列からなるコードを指します.
  • codeは、遅延毎のミリ秒数(一秒は1000ミリ秒に等しい)であり、関数のコールは、この遅延の後に発生する.setTimeoutと同様に、実際の遅延時間は少し長いかもしれません.なお、IEは、第1の構文で遅延関数に追加のパラメータを伝達する機能をサポートしていない.
  • delay−MDNは、set Intervalで設定された重複したタイミングタスクをキャンセルする.文法:window.clearInterval() intervalIDはキャンセルしたいタイマーのIDです.このIDは整数で、set Intervalによって返されます.
  • 緩動関数-MDN緩動関数は、アニメーション効果の実行時の速度を指定して、よりリアルに見えるようにします.いくつかの一般的なもの:
  • window.clearInterval(intervalID)リニア
  • linearフェード
  • easeInSineフェード
  • easeOutSineフェードアウト
  • waseInOutSine
  • easeInElasticはTween.jsを使ってcdnjs.comに行ってスクリプトを探すことができます.
  • easeOutBounce−MDN Math.abs(x)関数は、指定された数字「x」の絶対値を返します.
  • Nath.abs(x)−MDNは、現在のノードの親要素ノードに戻り、この要素が親ノードでない場合、または親ノードが要素ノードでない場合、nullに戻ります.
  • Node.parentElement−MDNは、指定されたノードのDOMツリー内の親ノードを返します.
  • Node.parentNode-MDNはNodeの子element s
    • を返します.
  • ParentNode.children−MDNは、指定されたノードを含むサブノードのセット
    • に戻る.
  • Node.childNodesとchildrenの違いchildNodesが戻ってくるのは、要素ノードだけではなく、ここでノード(IEはテキストノードに返さない)もあるかもしれないが、childNodesは、要素ノードだけに戻る(IEに注釈ノードを含むことに注意する).また、両方は即時更新の集合であり、つまり、jsで1つの要素を動的に追加すると、すぐにセットのchildren属性に反映される.
    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
    参考:阮一峰-命令リスト
    • 面接のJS編-プロトタイプとプロトタイプの鎖