了解してくれ

15899 ワード
ajax hash テキストリンク
html内で特定のタグの位置に到達する場合は、タグのidを指定し、リンクのhref値としてaをクリックしてその位置に到達します.
その時にアドレスウィンドウを見ると~~#のIDはこんな感じで、これはhash(ページ内のブックマーク感覚)です.
<!DOCTYPE html>
<body>
  <a href="#three">#three</a>
  <p>
    Lorem ipsum ..........
  </p>
  <p>
    Lorem ipsum .......
  </p>
  <p id="three">
    123123Lorem ipsum ............
  </p>
  <script>
    if(location.hash){
      console.log(location.hash);
    }
    else{
      console.log("hash없어")
    }
  </script>
</body>
</html>
結果 aリンクをクリックする前に aリンクをクリックしてリフレッシュして関数を再呼び出す

ハッシュを書くときhref=「#!行くところ」
習慣上#はブックマークです!区別するために用いられ、

結果


トップページの設定

<!doctype html>
<html>
<head>
  <title>WEB1 - Welcome</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="colors.js"></script>
</head>
<body>
  <h1><a href="#welcome">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
    <li>
      <a href="#!html" onclick="getText('html')">HTML</a>
    </li>
    <li>
      <a href="#!css" onclick="getText('css')">css</a>
    </li>
    <li>
      <a hret="#!JavaScript" onclick="getText('JavaScript')">JavaScript</a>
    </li>
    
  </ol>
  <article>

  </article>
  <script>
    function getText(page){
      fetch(page).then(function(response) {
          response.text().then(function(text) {
              document.querySelector('article').innerHTML = text
          })
        })
    }
    if(location.hash){
      getText(location.hash.substr(2));
    }
    else{
      getText('welcome')
    }
  </script>
</body>
</html>
結果 hashのない最初のロードページ #!htmlハッシュを移動する場合

短所


検索エンジンは最適化できません.検索エンジンはWebページをダウンロードして分析する必要がありますが、実際のWebページにはコンテンツがなく、ダイナミックにバックグラウンドからインポートされるため、ナビゲーション時にコンテンツは変更されません.
最近はpjax(欠点を補う、改善する)が使われています
OOPの3つの特性:カプセル化
Leetcode 5 -最長の回分の部分文字列