jQueryでスムーズな開閉

Javascript

2009.04.15

前回DOMによる様々なノードの取得を行いました。
その際は単純にHTMLを操作するだけでした。しかしJavascriptのライブラリを使用すると簡単な記述でさらに「動き」を加えることができます。

Javascriptライブラリとは?

規則的にまとめられたプログラムパーツの集まりをいいます。関数を1つ呼び出すだけで動作させることができます。

ダウンロード

ライブラリには色々な種類がありますが、今回使用するのは「jQuery」です。
ダウンロードはこちらから

jQueryをダウンロードして、それを読み込ませます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test.js"></script>

jQueryを使用して記述しますので、読み込ませる順番は1番最初です。
その後に、こちらで記述するJavascriptを読み込ませます。

jQueryの実行

jQueryを使用せずにJavascriptを実行する場合は下記を記述します。

window.onload = function() {
}

しかしこれだとHTMLの画像などを読み込まれた後に実行されます。
このサイトの最初のページの猫の上にある吹き出しがいい例です。

jQueryだとdocumentを読み込むのを監視して実行されます。

$(document).ready(function() {
});

Toggleを指定して要素を開閉させる

jQueryの記述

とても簡単な記述でスムーズな開閉が実現します。

$('h1').click(function(){ //h1をクリックすると
$('.navi').slideToggle('slow'); //class="navi"が開閉する
});

DOMだとgetElementByIdなどが必要ですが、jQueryだと$と記述するだけで要素を取得できます。
後は.slide Toggleを入れるだけで開閉します。slowは開閉スピードです。

サンプル

こちらにサンプルを用意しております。

  1. Web-Parkのホーム > 
  2. Javascript > 
  3. jQueryでスムーズな開閉
オススメ本(既読)
読んでみたい本(未読)

Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405

COMMENT PLEASE!!

トラックバック

「jQueryでスムーズな開閉」のトラックバックURL

Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
http://web-park.org/javascript/jquery090414.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook