• かちびと.net

    jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる。そろそろ勉強してみませんか?いつまでもコピペではいずれ困ってしまいます。今からでも遅く有りません。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる

スポンサーリンク

人気のJavaScriptライブラリ、jQueryもかなり
情報が増えました。僕の様に知識が無くても
簡単に動きのあるWebサイトや、更なるユー
ザビリティの向上を可能にしてくれましたが、
いつまでもコピペではいずれ困る事になります。
その前にそろそろ基礎から学んでみませんか。

という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。

いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。

でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。

jQueryを使うには

まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本家jQueryでダウンロードし、自分のサーバーにアップするか、Google AJAX Libraries APIを利用するかです。ここではGoogle AJAX Libraries APIを利用していきます。


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script>

これでjQuery本体の準備が整いました。これより下に実行したいjQueryを書いていきます。

準備する

jQueryのコードは基本的に以下のように書き出します。

<script type="text/javascript">
$(function(){
	ここに動作・実行させる為のコードを書く
})
</script>

この中身が実際にjQueryを使って動作させる部分になります。ここにいろいろ指定する訳ですね。

尚、$(function()は$(document).ready(function()を省略した形になります。どちらでも動作します。

動作させる

実行したいコードがあって、そのコードをどの部分に指定するか、を決めなければなりません。例えば、買い物を頼まれても買う場所が分からないと買えませんよね。買い物をして欲しいなら買う場所を指示する必要あがあります。

同様に、jQueryにもどの部分で動作させるか、という指示をしなくてはなりません。

その指示書としてセレクタを使います。

STEP.1 / セレクタを知る

$(“div.example”)

よく見かけますね、これ。これがセレクタです。

$(“.example”)

css同様に、上記でも基本的に問題ありません。

STEP.2 / 動作を決める

では、次に「動作」を決めてみます。

.hide();

hideは表示状態の要素を非表示にする命令文です。

これらをつなげると

$(“div.example”).hide();

となります。これで「div.example要素を隠す」という命令文が一つ出来上がりました。

では、この流れの続きで開閉パネルを作ってみます。

STEP.3 / 命令文を付け足す

$(“div.trigger”).click(function(){
$(this).toggleClass(“active”).next().slideToggle(“fast”);
});

1行目:div.triggerというHTML要素をクリックすると、その後に命令されているコードが実行されます。
2行目:toggleClassは指定したcssのclassが要素に無ければ追加、あれば削除させるコードです。slideToggleは要素をスライドアップ/ダウンさせます。fastはアニメーションのスピードの指示内容です

STEP.4 / つなげる

全部つなげると

$(“div.example”).hide();
$(“div.trigger”).click(function(){
$(this).toggleClass(“active”).next().slideToggle(“fast”);
});

という形になりました。これが命令文全体になります。これを

<script type="text/javascript">
$(function(){
	ここに実行したいコード
})
</script>

の中に入れます。

コード完成

<script type="text/javascript">
$(function(){
	$("div.example").hide();
	$("div.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("fast");
	});
})
</script>

コードが完成しました。せっかくtoggleClass(“active”)でcssに変化を加えていますので、パネルが開いている際のスタイルを変更してみます。

書いたコードに合わせてcssを書いてみる

div class=”trigger”の部分は、クリックされることでclassにactiveを追加します。

<style type="text/css">
div.active{
background: #0f81ff ;
}
</style>

このようにすると、パネルが開いている時は、背景色が出ることになります。

では実際に動かしてみます。

動作デモ

div.exampleで隠していた(hide)部分が、div.triggerがクリックされたことで、activeが追加され、アニメーションで開きました(slideToggle)。

大まかな手順は

  1. jQuery本体を読み込む
  2. セレクタで動作させる場所を指定する
  3. 動作を決める
  4. $(function(){***})で動作させるコードを囲う
  5. 動作テスト

となります。

誤解をしやすいのですが、上記サンプルでアニメーション動作そのものにactiveは不要です。これは開いている状態の時にcssでスタイルを変更できるように加えたものになります。

この場合、div.triggerはdiv.activeとなりますので開いている状態のスタイルはdiv.active{background: #0f81ff ;}といった形で指定します。
サンプルコードには含めましたが、無くてもアニメーションそのものに影響はありません。

使用したコードとマークアップ

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
	$("div.example").hide();
	$("div.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("fast");
	});
})
</script>
<style type="text/css">div.active{background: #0f81ff ;}div.example{overflow: hidden;}</style>

<div class="trigger"><a href="#ex">クリックでパネルを開閉出来ます</a></div>

<div class="example">
		<div class="block"> 

			div.exampleで隠していた(hide)部分が、div.triggerがクリックされたことで、activeが追加され、アニメーションで開きました(slideToggle)。

大まかな手順は
<ol>
	<li>jQuery本体を読み込む</li>

<li>セレクタで動作させる場所を指定する</li>
<li>動作を決める</li>
<li>$(function(){***})で動作させるコードを囲う</li>
<li>動作テスト</li></ol>
となります。
		</div> 

	</div> 

※追記:「IE6でhideしない」と言われたのでdiv.example{overflow: hidden;}を追加しました。コピペしてほしくない記事なので全ブラウザで動くのが本当は嫌だったんですが、誤解も招いたので補足。

Chrome以外で確認していませんが、多分大丈夫じゃないかと思います。基本はこんな感じになります。命令文は沢山ありますので、まずはどんな命令を出せるかを知ると学ぶ楽しみが増えるのではないでしょうか。

どこで命令文を覚えるの?

色々学べるサイトはありますが、最初はリファレンスサイトや書籍以外は見ないほうがいいかも知れません。応用が書かれているとかえって混乱します。

jQuery日本語リファレンス

以下は尊敬するTo-Rさんと5509さんの書籍です。お勧め。

jQueryにもバージョンがあって、最新は1.51.7になります。

プラグインは使わせてもらおう

コピペに頼らない、と言っても、全て自分で書いたほうがいい、という意味ではありません。配布されている便利なプラグインは使わせてもらうべきです。時間も短縮できますしね。

ただ、基本を理解すれば、そのプラグインを改造したり、バグを直すこともできるし、応用的に使うことも出来るわけです(ライセンスにもよりますけどw)。この差はいずれ大きくなるかと思います。

ご注意

この記事は、JavaScriptを知らない方でもjQueryの基本を理解できるように、言葉やコードの書き方をある程度選んで書いています事をご理解いただきますようお願い致します。また、僕もあまり把握出来ていないので、間違いがあればご指摘頂けると幸いです。

勘のいい方はaタグがいらないことに気がつかれたかと思います。

URL :
TRB :

Comments & Trackbacks (20)

  1. lotta

    丁度、jQuery使ってみたいな と思っていた私には凄く嬉しい記事でした。
    所で、は何のために有るのですか?

  2. kitta

    ごめんなさい。自分の名前うち間違えてました。kittaです。

    これも分からないです。よろしく御願いします。

    • シロ

      こんにちは。切欠になったようで嬉しく思います:D

      所で、#exは何のために有るのですか?

      これは、僕が勝手に加えた調査用のタグです。このコードの場合、動作させることでURLにハッシュタグが付きます。

      通常 :http://kachibito.net/web-design/jquery-first-step.html
      動作後:http://kachibito.net/web-design/jquery-first-step.html#ex

      TwitterでもPostしましたので宜しければ御覧ください。

      ブックマークをされる方で実際に動かしたかどうかを見てみたいと思いアンカーを加えましたが、無くても動作します。

      多少酷なことを申し上げますが、ここで何のためにハッシュがあるか聞かれて、こうして答えるのは簡単ですが、調べる前に聞かれてはコピペしているのと変わりません。

      分からない場合はリファレンスや本で調べて学ぶ、というのがこの記事の趣旨になります。ぜひチャレンジしてみてください(´▽`)

  3. のむ

    参考になりました。
    少し前からwordpressでブログを始めているので、記事にしてみました。
    その記事の中で勝手ながらリンクを貼らせて頂きました。
    http://nomublog.info/jquery/305/

    • シロ

      こんにちは、リンク有難うございます!

      記事拝見させて頂きました。僕の記事のコードは理由があって細工していますので変えてもらえるのが僕の望みでもあります。理由は一番上のコメントへのご返信で書かせて頂いています。

      意図を汲んでいただけてとても嬉しかったです:)

      今後もお互い勉強に励みたいところですね!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services