イレヴンナイン

ネット初心者・不慣れなキミにパソコンライフやアフィリエイト

ウェブデザイナーの定番のjQuey事始め

      2016/02/21

Facebook Twitter はてブ

ウェブデザイナーの定番のjQuey。代表的なJavascriptのライブラリです。ライブラリっていうのは使いやすくするためにいろいろなプログラムを追加で仕込んであるもの、ですね。

jQuey(ジェイクエリー)の特徴

一番の特徴としてはCSS知識があればゴリゴリいじれる、っていうところがJavascriptの難しいプロパティを知らなくても使いやすい所以になっています。「お役立ちプログラムの塊」というイメージです。

jQuey(ジェイクエリー)の使い方

基本的に使い方は2種類。ダウンロードして使うか、公共リソースとして好きに使っていいよーって提供されているところにリンクして使うかの2つです。

ダウンロードして使う

公式サイトからjQueryの本体プログラムをダウンロードしてきます。minとついているものついてないものがありますが、ついているのは圧縮してファイルサイズを最大限下げているものです。

基本はminのほうを使いましょう。ダウンロード画面では「compressed」リンクが圧縮済みのmin、「uncompressed」リンクが圧縮していない、Javascriptそのままの書き方のものになります。

リソースとして提供されている物を使う

リソース?提供?と疑問になりますが、CDN(Contents Delivery Network)というもので、わざわざダウンロードしなくてもGoogleなど大手企業が「ここのファイルにリンクして使っていいよ」って提供しているわけですね。

なんでわざわざこんなことをするかというと、たとえばよく使われてるCDNはGoogleのリンクですが、いろんなサイトがGoogleのjQueryを使っているので、普段いろいろなサイトを見ている時に常にブラウザにキャッシュされてる状態を保つことができ、サイトごとに新しく読み込まなくて済むという利点があります。

主に使われてるのはGoogleの他にはjQuery公式サイト、マイクロソフトなどがあります。それぞれ提供されているスクリプトのバージョンが違うので場合に応じる必要があるときは重宝しますね。(初心者的にはどれでもいい)

GoogleのCDNを使う

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

※ページ内をjQueryで検索するとみつかります。

jQueryのCDNを使う

[javascript]<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
[/javascript]

※ページ内をjQueryで検索するとみつかります。

マイクロソフトのCDNを使う

[javascript]<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
[/javascript]

便利なjQuery

jQueryを読み込むと、オンロードメソッドの代わりにレディメソッドというものが使えるようになります。

[javascript]
$(document).ready(function(関数);
[/javascript]

この辺のプログラム関連はまたjQuery系の記事を作成して解説していきます。

(著者:mece(@llgOwO)

mece

記事を読んでいただきありがとうございました!よかったらウェブデザイナーの定番のjQuey事始め」の記事をシェアしてもらえると嬉しいな!

 - Javascript, jQuey, プログラム