jQueryで「Hello World!」初めての方向けjQueryの始め方

2018年3月13日2018年6月28日

ホームページの内容を動的に変更したり、表示を動かしたりが手軽にできる「jQuery」の始め方
javascriptはハードルが高いと感じた方や、Web初心者の方でも簡単に始められる！

先ずはjQueryを手にいれる

何はともあれ、まずはjQueryを手にいれよう
下記のjQuery公式サイトよりダウンロードします
今回コレ↓をダウンロード
Download the compressed, production jQuery 3.3.1

http://jquery.com/download/

jQueryを読み込む

ダウンロードしたら次はサーバにアップロード
任意のディレクトリに入れたら呼び出します

HTML

<script src="/js/jquery-3.3.1.min.js"></script>

上記をhead内に記述したら準備完了！

jQueryで「Hello World!」を表示してみる

サクッと表示する

CSS

</body>
<script>
$(function(){
$('body').html('Hell World!');
});
</script>
</html>

jQueryを記述する場所はhtmlタグの中ならどこでもいいです
が、理由はいろいろありますがページ下部に記述するか、
外部ファイルに記述するのが一般的なので、それにならいましょう。

jQueryはjavascriptのライブラリなのでscriptタグの中に記述します。
$(function(){ ここに実行したい内容を書く });
↑ここに書くと、実行したい内容に必要なタグなどが読み込まれた後に実行される
外に書くと必要な要素が読み込まれる前に実行されてしまい
希望した結果は得られない。

$('body')
↑はセレクタと言っていろいろな処理の対象を指定するのに使用します。
jQueryにおけるセレクタとは、トラバースとは

.html()
対象の子要素を書き換えます。
今回は文字列のみですが、HTMLのタグも入れられます。
ページを丸ごと書き換えることもできちゃいます。