JSメモ

jquery

スムーススクロール

aタグでハッシュがついてるものになんでも効く

$(function () {
  $('a[href^="#"]').click(function () {
    var href = $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    var speed = 500;
    $("html, body").animate({
      scrollTop: position
    }, speed, "swing");
    return false;
  });
});

外部ファイルのテキスト読み込み

「str」にファイルの内容のテキストが入る

let request = new XMLHttpRequest();
request.open('GET', '/data.txt' , false);
request.send();
let str = request.responseText;

動的に追加した要素にイベントを効かせる

.onの中で指定した要素は$(this)で呼び出せる。

 $('body').on('click', '.add' , function() {
    $(this).remove();
});

JS

DOMContentLoaded

.DOMツリー構築完了直後、画像ファイルなどの外部リソースが読み込まれる前に発火するイベント

document.addEventListener('DOMContentLoaded', function() {
	var a = document.getElementById('a');
	console.log(a != null); // true
	var b = document.getElementById('b');
	console.log(b != null); // true
});

onload

ページ読み込み完了後、すなわちDOMツリー構築、タグによる画像ファイルの外部リソースのロードなどすべて完了した時点でスクリプトが実行

window.onload = function() {
	var a = document.getElementById('a');
	console.log(a != null); // true
	var b = document.getElementById('b');
	console.log(b != null); // true <- 注目
};