-
JavaScript
jQueryで出来る事とは？実際のコード例やプラグインも紹介
HTMLやCSSでWeb制作ができるようになった人にとっては、jQueryは必然的に学ぶようになるのではないでしょうか。今回は、jQueryでできることについて紹介します。
jQueryとは
jQueryとは、Web上でアニメーション等をつける事ができる、2006年に開発されたJavaScriptのライブラリの事です。
ライブラリというのは、汎用性があるまとまったプログラムのことをいいます。
jQueryの特徴
- ブラウザに依存しない
- コードを少なくかける
- プラグインがたくさんある
ブラウザに依存しない
jQueryはブラウザ間による差異がないのが特徴です。
ブラウザには、chrom、IE、safari、Firefoxといった様々なものがあります。
jQueryを使うことによって、ブラウザに依存しないWeb制作ができます。
コードを少なくかける
jQueryはたくさんのコードを書かずに使用することができます。
例えば、ボタンを押した際にアラートがでる動きをつけたいときには、下記のような書き方をします。
JavaScript
document.getElementById('text-button').onclick = function () {
alert('クリック');
};jQuery
$(function () {
$('.button').on('click', function () {
alert('クリック');
});
});このように、同じような動きをつけることができるJavaScriptとjQueryでも、書くコードの量が変わります。
プラグインがたくさんある
プラグインとは、拡張機能のことをいいます。
jQueryには他の誰かが作ってくれた便利な機能のまとまりが豊富にあります。
例えば、slickといわれるプラグインはスライドを簡単に実現することができます。
簡単なスライドで以下の1行でできます。
$('.slider').slick();jQueryとJavaScriptの違いとは
jQueryはJavaScriptでかかれたライブラリです。
JavaScriptをより簡単にしたものがjQueryと言れているため、似てはいますが構造がまったく異なります。
jQueryはライブラリですが、JavaScriptはプログラミング言語だからです。
jQueryはそもそもJavaScriptがなければ成り立つものではありませんので、比較対象にはならないのです。
jQueryでできること 3選
- マウスオーバー、マウスアウト
- スライドショー
- 非同期通信
マウスオーバー、マウスアウト
jQueryではマウスオーバー、マウスアウトを簡単に書くことができます。
マウスオーバーとは、マウスである要素を触ると何かが起こるようにする処理です。
マウスアウトはその逆である要素からマウスが離れた際に起こる処理のことを言います。
マウスオーバーの書き方は以下です。
$(function () {
$('div').hover(function () {
// 処理を書く
});
});スライドショー
先ほど紹介したslickというプラグインを使うことでスライドショーを簡単に実装することが可能です。
非同期通信
jQueryには非同期通信ができるAjaxというものがあります。
非同期通信の身近な例を挙げると、重い画像が含まれているWebページを開こうとするととりあえず文章は表示して、画像は読み込まれてから表示するようになっています。
同期通信であれば、そのページの情報が完璧に読み込まれてからでないと表示されません。
また、Ajaxはページを再読み込みせずにページを変えることができます。
例えば、GoogleMAPなどではスクロールするとその都度マップの読み込みが行われますがページは遷移しませんよね。
まとめ
jQueryのできることについて紹介しました。
jQueryを使用することで今まで難しくてできなったことが簡単にできるようになったり、つけたい機能をつけられるようになるのでぜひ活用してみてください。
