簡単にwebサイトに動きを与えるjQueryの基本。導入方法と基本文法を紹介

web制作

複雑なJavaScriptをより単純なコードで実装できるのがjQueryです。

今回は自分のサイトにjQueryを組み込むための基本を紹介します。

スポンサーリンク

jQueryとは?

jQueryはJavaScriptのライブラリです。

簡単に言うと、JavaScriptの複雑な動き(コード)を、簡単に作成するためのものです。

CSSに近い記述方法で簡潔にまとめられるので、JavaScript初心者にも扱いやすいと思います。

jQueryの導入方法

jQueryを使用するためには下準備が必要です。

何もない状態で利用することは出来ないので、jQueryを利用するためのデータを準備必要があります。

このデータを導入する方法が2つあるので紹介します。

1.コンテンツデリバリネットワーク(CDN)を利用

これはjQueryのデータが置いてあるサーバーに、ネットワーク経由でアクセスし取得する方法です。

下記コードをヘッダーに記述することでjQueryのコードを利用できるようになります。

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

2.ライブラリをダウンロード

こちらはjQueryのデータを公式サイトよりダウンロードして、各々が利用しているサーバーにアップロードして使う方法です。

<script src="jQueryデータのパス"></script>
スポンサーリンク

jQueryの基本文法

jQueryの基本的な文法がこちらです。

$('セレクタ').メソッド({パラメーター});

セレクタはHTMLの要素です。

タグ名、クラス名、ID名を使って対称の要素を指定します。

実際の動きはメソッド、パラメーターの部分で指定します。

簡単なメソッドを見てみましょう。

メソッド意味
.css()セレクタのCSSを設定
.addClass() セレクタのクラスを付ける
.removeClass() セレクタ のクラスを削除する
.attr()セレクタの属性を指定
.html()セレクタのHTMLを設定
.text() セレクタのテキストを設定
.before() セレクタの前に挿入
.after() セレクタの後ろに挿入
.prepend() セレクタ内の最初に挿入
.append() セレクタ内の最後に挿入
.animate() 指定した時間をかけてcssを変化
.width() セレクタの幅をピクセル指定
 .height() セレクタの高さをピクセル指定

メソッドは他にもたくさんあるので調べてみてください。

自分が組み込みたい動きからの逆検索をしてみると、jQueryを使ったコードがたくさん出てくると思います。

最後に

jQueryにはかなりのメソッドが用意されています。

スライドショーやSNSとの連携など広い動きに対応しているので、JavaScriptが苦手な方はこっちを使ってみるのもありかもしれません。