はじめてのjQuery

目次ソース

はじめてのjQuery

なぜjQueryを使うのか

デザイナ寄りのJavaScriptライブラリだから

他のJavaScriptライブラリはプログラマじゃないと敷居が高い orz...

ぶっちゃけ

CSSできるならjQueryもできる（ようになるはず）

それをおいておいても

早い（ソースが軽く軽快）、安い（学習コスト）、うまい（高機能）

三拍子揃ってる

今より少し知識を補充するだけでいろんなことができるようになります

表面的な知識で終わらず

ある程度使いこなせるようになるため

お作法を覚えましょう

ちょっとjQueryを取ってくる

jQueryの本家サイト

「J」って言ってるのに Japanじゃないお (／_；)

はいはい

ダウンロードしたら読み込み準備

head要素の中でjQueryを読み込みます

<head>
  <title>たいとる</title>
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <script type="text/javascript" src="js/jquery.js"></script>
</head>

CSSの読み込みとほとんど同じですね

次は自分で作るjsファイルを読み込みます

<head>
  <title>たいとる</title>
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/original.js"></script>
</head>

準備完了

これからお作法を学んでいきます

すでに(X)HTMLとCSSにて要素、属性、セレクタ、プロパティが使えているはずなので

学ぶことはふたつ

魔法の呪文とメソッド

魔法の呪文

original.jsという空のファイルを作って、その中に魔法の呪文を唱えます

臨

兵

闘

者

皆

陳

裂

在

前ッ!!

$(function() {


//魔法の呪文が発動しました



});

$(function() {


//魔法の呪文が発動しました
//この中にいろんなコードを書いていきます


});

押さえるべき基本

○○を○○した時○○を○○する

jQueryで

○○を○○した時○○を○○する

を記述するといろんなことができます

実際のコードも○○を○○した時○○を○○するが基本になります

CSSでこれに近いお作法を使っていますね

/* CSS */
a:link {
  color: black;
}
a:hover {
  color: red;
}

/* CSS */
a:link {
  color: black;
}
a:hover {
  color: red;
}

aをhoverした時colorにredをセットする (そうでない時はblack)

jQueryではこう書きます

/* jQuery */
$('a').hover(
  function() {
    $(this).css('color', 'red');
  },
  function() {
    $(this).css('color', 'black'); 
  }
);

aをhoverした時colorにredをセットする (そうでない時はblack)

うっ、、、難しい orz...

jQueryが使えれば CSSでできなかったことができるようになるので少しだけがんばりましょう

さっきのコードを解読してみましょう

○○を○○した時○○を○○するが少し複雑になっただけです

/* jQuery */
$('a').hover(
  function() {
    $(this).css('color', 'red');
  },
  function() {
    $(this).css('color', 'black');
  }
);