ディレクトリの記述方法
../ いっこ上の階層
./ カレントディレクトリ(今いる階層)
JQuaryのファイルはどこで読み込んでも当たり障りない。
一般的には<head>の最後の部分に記述する。
$ JQuaryを表す特別な記号。
$(document).ready
.ready
準備が整ったら実行せよというメソッド
(修正が可能なメソッドなので覚える必要はない)
--->ここまで
<!DOCTYPE html>
<html lang="ja" hoge="foo">
<head>
<meta charset="UTF-8">
<title>JQuery</title>
<link rel="stylesheet" href="test2.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<script src="test2.js"></script>
</body>
</html>
--->test2.js
$(document).ready(function(){
$('body').html('<p>jQuaryの動作チェック</p>');
});
これがjQuaryの記述だが、もっとシンプルな記述があるので
普通こういう書き方はしないらしい。
なおリファレンスエラーが出て、
「$が未定義だ」とか言われたら、
読み込みが違っているのを疑う。
(パスが違うとか、ファイル名が違うとか。なにかしらjQuaryが読み込めてないとこのエラーが起こる)
$(document).readyは普通省略するらしい。
「document自体が全部読み込まれたときに、以下のことをやってください。」という意味。
というわけで省略できる。
$(document).ready(function(){
↓
$(function(){
})
例外なくjQuaryを書くときは、この、ダラーファンクションから始める。
これは読み込まれ切ってないことでエラーが出るのを回避するために入れるらしい。
先頭行はかならずこの、
$(function(){
最終行は必ずこの、
})
になり、
Jクエリーの記述はその中に書かれる。
Jクエリーでは、名前のついたfunctionを使うことは非常にまれ。
名前のない関数を定義するということがちょいちょい行われる。
これを無名関数(むめいかんすう)という。
名前をつけるのは「どこかから呼び出すため」。
しかしjsはイベント駆動型のプログラムであるため、特に名前がなくてもいいことになる。
Jクエリーは無名関数をつかう。
さらにプロパティがない。
指示命令は全部メソッド。
イコール値という記述がない。
この青い部分がgetElementByIdを兼ねているらしい。
htmlに以下のものを追加↓
<p></p>
<p class="hoge"></p>
<p id="foo"></p>
jsに追加
$(function(){
$('#foo').html('<h1>jQuary</h1>');
});
idがfooとなっているもののなかに、<h1>jQuary</h1>というhtmlを入れてね。
という意味。
html(タグを伴うコンテンツ)を書きたいときはこのhtmlメソッドを使い、
特にテキストだけ書き出したいときはtextメソッドを使う。
この2つはよく使う。
テキストの例
$(function(){
$('#foo').text('<h1>jQuary</h1>');
});
じゃあ全部の<p>(idつきもclassもちも何も持ってないのも)に文字を入れようとなったら、
$(function(){
$('p').html('<h1>jQuary</h1>');
});
で済む。
ゲットエレメントしなくていい。
CSSのセレクタで書けばいい。
必ず$()
ダラーかっこ
で捕まえる。
これがJクエリーの書き方。
ちなみにゲットエレメントバイアイディーで取得したオブジェクトは、
jQuaryの想定しているオブジェクトじゃないので、
jQuaryでは操作できない。
jQuaryが捕まえたオブジェクト ← jQuaryで使える。
getElementByIdで捕まえたオブジェクト ← ネイティブなコードで使える。
両者に交流はないので、使おうとするとエラーになる。
10種類ぐらいJクエリーのメソッドが使えると
いろんなことができるらしい。
jQuaryのリファレンスのサイトもある。
もっと使いたかったらそのへんを見ればいい。