jQuery読み込み設定
読み込み
例.html（htmlにjQueryを読み込む）
<body>
<div id="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="例.js"></script>
</body>
例.js
$("#box").text("Hello jQuery!");
onloadイベントハンドラ使った例
例.html（htmlにjQueryを読み込む）
<head>
<meta charset="utf-8">
<title>Title Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="例.js"></script>
</head>
例.js（onloadイベントハンドラ）
window.onload = function() {
$("セレクタ").text("テキスト");
}
ready()
大量のデータが読み込まれる際にDOMの読み込みが終わった時点で操作できるようになる
例.js
$(document).ready(function() { // DOMの読み込みが完了したらここが実行される
$("セレクタ").text("テキスト");
});
ready()を省略して書ける ※こっちの方が一般的
例.js
$(function() { // DOMの読み込みが完了したらここが実行される
$("セレクタ").text("テキスト");
});
DOMの操作
$(セレクタ).操作();
操作を繋げることも可能
$(セレクタ).操作1().操作2();
子要素、子孫要素の指定
子要素だけ指定したい場合
$("#上の要素名 > div").上の要素("子要素");
子孫要素を指定したい場合
$("#上の要素名 div").上の要素("子孫要素");