ホームページ >ウェブフロントエンド >htmlチュートリアル >Anchors_html/css_WEB-ITnose の謎
Anchors_html/css_WEB-ITnose の謎
- WBOYオリジナル
- 2016-06-24 11:18:351194ブラウズ
アンカーとは何ですか?
私は以前、次のように考えていました: アンカーとは、href="#id" や "#name" などのタグで、主にページ内の要素を素早く見つけ、ブックマークやディレクトリの機能を実装するために使用されます。 。
その後、私はアンカーに対する見方を変え、廬山の本当の顔を認識しました。
今、私はそれを新たに理解しました: アンカーはアンカータグ、つまり 3499910bf9dac5ae3c52d5ede7383485 です。アンカーは、href 属性を通じて他のページにリンクすることも、現在のページの特定の場所にリンクすることもできます。
私たちが普段話しているアンカーポイントやアンカーリンクは、実は名前は違いますが、本質は同じで、「トマト」と「トマト」が同じ名前であるだけです。インターネット上にはアンカー ポイントやアンカー リンクに関するさまざまな説明もあります。曖昧な質問がある場合は、MDN や W3C などの公式 Web サイトにアクセスして回答を見つけるのが最善です (FQ 版、中国語版は更新が遅いです)。正確ではないかもしれません）答えを見つけてください。
アンカーは MDN で次のように説明されます。「
HTML アンカー要素 (3499910bf9dac5ae3c52d5ede7383485) は、同じページまたは Web 上の他のページ上の場所へのハイパーリンクを定義します。また、(時代遅れの方法) アンカー ポイント (ページのコンテンツ内にハイパーリンクの宛先) を作成して、リンクがページの上部への接続に限定されないようにします。
私の英語は上手ではありませんが、まだできます。この文の意味は、馬鹿にされるのを恐れてここでは翻訳しません
もちろん、ページ上のすべての 3499910bf9dac5ae3c52d5ede7383485 を作成することもできます。 1 つは document.createElement("A") です。アンカー オブジェクトの詳細については、HTML DOM アンカー オブジェクトをご覧ください。 アンカーは document.anchors[] 配列を通じて取得するか、document を使用します。 .getElementById() またはその他のメソッドを使用して dom オブジェクトを取得します
注: document.anchors[] はその属性を持つアンカーのみを取得できます。アンカーに name 属性がない場合は、 document.getElementById() を通じてアクセスできます。
hashMDN は次のように説明しています: 「
HTMLHyperlinkElementUtils.hash.」プロパティは、URL のフラグメント識別子が後に続く DOMString を返します。「フラグメントはパーセントデコードされていません。」 おそらくurl#番号以降のフラグメント（#を含む）のことを指します、このフラグメントは圧縮されていません はい（以下の文をどう訳せばいいのかわかりません…）
ハッシュは読み書き可能な属性です。ハッシュを取得するには、window.location.hash または window.location.href を使用する 2 つの方法があり、最初の #を通じてインターセプトされます。ハッシュはドメイン間で使用でき、js クロスドメインは iframe とlocation.hash を使用して、Angular ルーティングなどの Ajax の前後方向または単一ページの切り替え試行を実装することもできます
onhashchange
MDN は次のように導入しました:
フラグメント識別子が指定されたときに hashchange イベントが発生します。 URL が変更されました (# 記号に続く URL の部分 (# 記号を含む))。onhashchange イベントは、# 記号を含む URL # 記号の後の文字が変更されるとトリガーされます。
では、# の後の内容を変更するにはどうすればよいでしょうか?
主に4つの方法があります:
1. ブラウザのアドレスバーにあるURLのハッシュ値を手動で変更する、つまり、url#番号以降の部分を変更します2. コードを通じてハッシュ値を変更します。 window.location.href = "url#hash"、または window.location.hash = "yourhash" のように。
3. アンカー、href="#+id" または href="#+name" を使用してハッシュ値を変更します。
4. Onhashchange は、ブラウザの組み込みの順方向および逆方向の関数によってもトリガーされる場合があります。これは、ハッシュの変更によってページがリロードされることはありませんが、ハッシュが変更された URL が履歴に書き込まれるためです。たとえば、アンカー リンクの場合です。をクリックすると、ページが特定の位置までスクロールします。この位置で、「戻る」ボタンをクリックすると、ハッシュ変更がトリガーされます。
たとえば、ハッシュ原理を使用して、Ajax の順方向関数と逆方向関数を実装します
Ajax リクエストがブラウザーに履歴レコードを生成しないことは誰もが知っています。前のリクエストのデータを表示したい場合は、はい、クエリ条件を再入力してクエリを実行することによってのみ、望ましい結果を得ることができます。これはシナリオによっては不合理です。上記の問題を解決するには、hashchange を使用します。例:
ajax リクエストは、58 都市の検索ボックスのデータです。「Apple」->「検索」と入力し、「Orange」->「検索」と入力して、「戻る」ボタンをクリックして Apple リストに戻ります。ページ。以下はそれを達成するための 1 つの方法です。興味があれば、自分で試してみることもできます。
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>hashchange</title> <style> p{ font-size: 24px; } </style> </head> <script type="text/javascript" src = "jquery.js"></script> <script type = "text/javascript"> $(function(){ $("button").click(function(){ var queryText = $("#search").val(); query(queryText); }) }); //注册hashchange事件，为了兼容低版本IE，用了两种方式进行注册 window.addEventListener("hashchange",hashCallBack); window.attachEvent("onhashchange",hashCallBack); //hash改变的监听函数 function hashCallBack(e){ var queryText = window.location.hash.split("#")[1]; //获取hash值 if(queryText == $("#search").val()) return if(queryText){ $("#search").val(queryText); }else{ $("#search").val(""); } query(queryText); } //查询按钮 function query(queryText){ $("#content").empty(); $.ajax({ url:"http://suggest.58.com.cn/searchsuggest_14.do?inputbox="+queryText+"&cityid=1&catid=0&callback=callback1538", type:"get", dataType:"jsonP", success:function(e){ console.log("成功"); } }); } function callback1538(data){ window.location.hash = $("#search").val(); var arr = data.w; for( var i = 0;i<arr.length;i++){ var p = document.createElement("p"); var textnode=document.createTextNode(arr[i].k); p.appendChild(textnode); document.getElementById("content").appendChild(p); } } </script><body> <input type = "text" id = "search"><button>搜索</button> <div id = "content"></div></body></html> この章は終了しました。内容は大したことはありませんが、多くのエネルギーを費やしました。つまり、収穫はまだたくさんあります。
実際、私の記事では、アンカリングが単なるポジショニングではないという点について詳しく説明しました。
私の言ったことが間違っていると思われる場合は、修正してください。