jQueryとは
まずjQueryが何かと言うとjavascriptの豊富なライブラリの一つで現在もっとも使用されているライブラリになります。
ほとんどのWEBサイトの動きなどはQueryを使用していることが多いと思います。
jQueryは、本来javascriptで書くととても長くなってしまうソースを簡単に扱えるように作られています。
そのためjQueryを使用すると少ない記述で書くことができるのでとても便利です。書き方もシンプルなので覚えやすいと思います。
jQueryで何ができるのか？
jQueryを使用することでクリックした後の処理からアニメーションやスクロールなどによる処理などさまざまなことができるようになります。
他にもタグを移動したり追加したりクラスを追加するなど色々な処理が可能になります。
次は基本的な書き方を見ていきましょう。
jQueryの使い方
jQueryを使うには、jQueryの本体を直接、読み込ませるかダウンロードする必要があります。
ダウンロードページする場合は、公式サイトから直接ダウンロードします。
サーバーにあるものを使用する場合
jQueryをダウンロードしなくても本家のサーバーで配信しているjQueryを直接読み込ませる方法があります。
<-- headの中にjQueryを読み込ませる -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>ダウンロードして読み込ませる場合
公式サイトからダウンロードしたら任意の場所にjQueryを格納してそれを読み込むようにします。
<-- headの中にjQueryを読み込ませる -->
<script src="/js/jquery-3.3.1.min.js"></script>jQuery基本の書き方
一番シンプルな書き方
htmlなどの構造が読み込まれたあとに実行します。
$(function(){
//jsを記述
});document.readyを使った書き方
上記と同じ実行結果になります。
$(document).ready(function(){
//jsを記述
});window.loadを使った書き方
ページの読み込み時にhtml、css、画像などを読み込みこんだ後、一番最後に実行されます。
ページ読み込み時のみに実行される処理になります。
$(window).load(function() {
//jsを記述
});使い方の補足
以上の3点が主なjQueryの書き方になります。
書き方によって処理される順番が違うので処理を実行させるタイミングによって使い分ける必要があります。
「$(function(){};」と「$(document).ready(function(){};」はhtmlが書き出させてjsの操作が可能になった段階で処理する点では同じ意味になります。
「window.load」は、html、css、画像が読み込まれたあとに実行するので一番最後の処理になります。
これらの書き方を使いわけることによってさまざな順番で処理を実行することができます。
コメント