第2回関西アンカンファレンス
やさしいjQueryの使い方
自己紹介
- かみやん (Twitter@kamiyam)
- システム開発会社
- ほとんどWebのシステム
- Java・C#
最近はHTML5・Javascriptの勉強をしてます。
元 自動車整備士です
jQueryって何？
- オープンソースの JavaScript ライブラリ
- クロスブラウザ対応
- 実装している機能が豊富
- 関数の使い方が分かりやすい
- jQuery
- http://jquery.com/
jQueryのライセンス
- jQueryライセンス形態
- MITとGPLのデュアルライセンス
/*!
* jQuery JavaScript Library v1.4.4
* http://jquery.com/
*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* Includes Sizzle.js
* http://sizzlejs.com/
* Copyright 2010, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
*
* Date: Thu Nov 11 19:04:53 2010 -0500
*/
※ jQuery最新バージョン1.4.4 (2011/1/8現在)
jQueryを使う
まずはjQueryを読み込みます。
jQueryを読み込む方法を2つご紹介
- jQuery.comからダウンロードして使う
- Google AJAX APIなどのライブラリホスティングから読み込む
- Google AJAX API
- jQueryのバージョン管理とキャッシュ
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", '1.4.4');</script>
jQueryで実装サンプル
jQueryのお作法
<script type="text/javascript">
jQuery( function( $ ){
// 表示前に実行したい処理はここに実装していく
// 実行されるタイミングはwindow.onloadよりも前です。
});
</script>
jQueryであれこれやってみたい
- あの要素〇〇〇をもにょもにょしたいねん
- このボタン押したら×××したい
あの要素〇〇〇をもにょもにょしたいねん
特定の要素にCSSを適用させてみましょう。
<script type="text/javascript">
jQuery( function( $ ){
//cssの設定
$( "p#hoge1" ).css( "color", "red" );
});
</script>
特定の要素へのアクセスするポイント
ここでのポイントは特定の要素へのアクセスと対象要素の数
| タグ | $( "p" ).monyo() | 複数 |
|---|---|---|
| ID | $( "p#hoga" ).monyo() | 唯一 |
| CLASS | $( "p.fuga" ).monyo() | 複数 |
あの要素〇〇〇をもにょもにょしたいねん
複数の要素が指定されている場合はすべての要素にCSSが適用します。
<script type="text/javascript">
jQuery( function( $ ){
//cssの設定
$( "p" ).css( "color", "blue" ); //← pタグすべて
$( "p#hoge1" ).css( "color", "red" ); //← pタグのID属性hoge1のみ
$( "p.fuga" ).css( "color", "yellow" ); //← pタグのclass属性fugaすべて
});
</script>
え？全部の要素に もにょもにょしたくないよ！
じゃあ今回はeachを使って判断してみましょう。
(他にもフィルターを使う方法はありますが今回一例として。
---- $( "tag:not( .classname )" );とか)
eachを使って判断してみる
eachを使って、すべてのaタグに『target="_blank"』をつけることにします。
ただし、(class属性が)イケメンに限る
jQueryサンプルデモ：each
このボタン押したら×××したい
といっても、イベント定義関数に移動するだけですが
<script type="text/javascript">
jQuery( function( $ )
{
$("#target").click( function( e ){
//ここに×××な事を書く
});
});
</script>
jQueryサンプルデモ：clickイベント
ご清聴ありがとうございました
〜 お疲れ様でした 〜
Special thanks! mukiSlide is made by Yusuke Nakanishi