2012/03/22

Tag : ,

jQueryについて初心者が偉そうにメモる。間違ってたらごめんなさい。

結構前から流行のjQueryのお話をいまさらメモる。今までは実装が楽なこともあって何気なく使えるものだけつぎはぎのように使っておりましたが、どうせなら最初から書きたい OR すこしカスタマイズしたいですよね。ということで、すこし調べてみました。
※また、最近ではCSS3でも同じようなことができるようになってきましたが、対応ブラウザの関係でまだまだjQueryに頼らざるを得ないのが現状です。

そもそも、jQueryとは？

一言でいうと、JavaScriptライブラリのひとつ。だそうです。ライブラリとかの説明ができそうにないので、とりあえず、JavaScriptを簡単なコードで実装できるようにしてくれているものという感じでよいのではないでしょうか。
例えば、pタグのクラスが「attention」のものにだけ、テキストのカラーを赤にするという処理の場合、シンプルにJavaScriptで書くと、

<script type="text/javascript">
var targets = document.getElementsByTagName("p");
for(var i=0; targets.length; i++){
	if(targets[i].className === "attention"){
		target.style.color = "red";
		}
	}
</script>

jQueryを用いて書くと、

<script type="text/javascript">
	$("p.attention").css( "color", "red" );
</script>

たった一行で済みますね。

jQueryの準備と導入

jQueryはオープンソースのライブラリなので誰でも簡単に利用する事ができます。jQueryのサイトからダウンロードして、自サイトにアップして使うもよし、ネットワーク上に置いてあるライブラリー（Google CDNなど）をそのまま読み込むのもよししです。
※CDNとは、Contents Delivery Network（コンテンツデリバリーネットワーク）の略。なんのこっちゃ。
ほかにも、Microsoft CDNとかあります。

自分はダウンロードするのがめんどくさくて、いつもグーグルにお世話になってますので、
導入は<head>内に下記を追加。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

jQueryのコードを書いてみる。

<head> 内に直接コード書いても動くのですが、外部ファイル（.js）にしておくことをお勧めします。管理も楽ですし。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src='js/sample.js'></script>

基本のカタチ

$(“セレクタ”) . メソッド(パラメータ);

基本的には、セレクタを指定して、メソッドを指示し、パラメータを渡す。上記のコードでは、セレクタに <p> タグを使いましたが、セレクタで指定できるものはcssとだいたい同じなので、理解しやすいと思います。

セレクタの例

– 基本
  • $(“#sample”)　___ idセレクタ
  • $(“.sample”)　___ クラスセレクタ
  • $(“div.sample, p.sample2”)　___ グループセレクタ
– 階層
  • $(“p span”)　___ 子孫セレクタ
  • $(“ul > li”)　___ チャイルドセレクタ。子要素すべてにマッチ。
  • $(“ul + li”)　___ 隣接セレクタ。この場合、ulの次のliのみマッチ。
  • $(“#main ~ div”)　___ 兄弟セレクタ。#mainの兄弟のdivすべてにマッチ。
– フィルタ
  • $(“li:first”)　___ 先頭の要素にマッチ。
  • $(“li:last”)　___ 末尾の要素にマッチ。
  • $(“li:even”)　___ 偶数の要素にマッチ。奇数は、add。
  • $(“li:eq(3)”)　___ 指定したindexにマッチ。
– コンテントフィルタ
  • $(“span:contains(“sample”)”)　___ 指定した文字列を含む要素にマッチ。”sample”のあるspan。
  • $(“li:empty”)　___ 空の要素にマッチ。<li></li>ってことですね。
  • $(“li:parent”)　___ 親要素であればマッチ。テキストも含めて要素内になにかあればマッチ。
– 表示/非表示フィルタ
  • $(“div:hidden”)　___ 非表示の要素にマッチ。
  • $(“div:visible”)　___ 可視状態にある要素にマッチ。

他にもまだまだセレクタはありますので、下記を参考にどうぞ。
jQuery日本語リファレンス – セレクタ・フィルタ

メソッドの例

– CSS
  • $(“a”).css(“color”)　___ 指定スタイルの値を返す。
  • $(“a”).css(“color”,”red”)　___ スタイルを設定。
  • $(“a”).css({“color”:”red”,”font-weight”:”bold”})　___ 複数スタイルの設定。
  • $(“a img”).height()　___ 高さを返す。
  • $(“a img”).height(“100px”)　___ 高さを設定。
– Attributes（属性）
  • $(“img”).attr(“alt”)　___ 指定属性の値を返す。
  • $(“img”).attr(“alt”,”sample”)　___ 属性を設定。
  • $(“a”).addClass(“select”)　___ クラスを追加。
  • $(“a”).removeClass(“select”)　___ クラスを削除。
  • $(“a”).toggleClass(“select”)　___ 指定クラスがあれば削除、なければ追加。結構使う。
  • $(“li”).html()　___ 要素からHTMLを文字列として返す。
  • $(“li”).html(” “)　___ 要素の中を” “で置き換える。
  • $(“li”).text()　___ 要素からテキストノードを結合して返す。
  • $(“input”).val()　___ 要素からvalue属性を返す。
– Effects
  • $(“div”).show()　___ 表示する。
  • $(“div”).hide()　___ 非表示にする。
  • $(“div”).toggle()　___ 表示・非表示を切り替える。
  • $(“div”).fadeIn()　___ フェードインで表示する。
  • $(“div”).fadeOut()　___ フェードアウトで非表示にする。
  • $(“div”).animate({height:”0px”},{duration:”slow”})　___ アニメーション。また別の機会に説明します。
– Manipulation
  • $(“div”).append(“<p>サンプル</p>”)　___ コンテンツを指定要素内の最後に追加。
  • $(“div”).prepend(“<p>サンプル</p>”)　___ コンテンツを指定要素内の先頭に追加。
  • $(“div”).after(“<p>サンプル</p>”)　___ コンテンツを指定要素外の後に追加。
  • $(“div”).before(“<p>サンプル</p>”)　___ コンテンツを指定要素外の前に追加。
  • $(“li”).wrap(“<ul></ul>”)　___ 要素を包む。<ul><li></li></ul>になる。
  • $(“p”).empty()　___ 指定要素のすべての子要素を削除する。
  • $(“p”).clone()　___ 指定要素をコピーする。
– Events

メソッドでなんといっても重要なイベント。きっかけですね。

  • .ready　___ DOM（Document Object Model）がロードされて操作・解析が可能になったタイミングで関数（function）を実行。用はhtmlがロードされて準備万端になったタイミングでいいのかな？※注意点として、bodyのonloadイベントとの併用はダメみたいです。
  • $(document).ready(function(){
	// 処理を記述。
	});
	
// 省略形
$(function(){
	// 処理を記述。
	});

    画像をつかった処理の場合は、下記のようにします。htmlの準備ができ画像をロードしたタイミングで実行されます。

    $(window).load(function(){
	// 処理を記述。
	});
  • .hover　___ cssのhoverと同じようなものです。類似するイベントに「mouseover」、「mouseout」があります。Flashで言うと、hoverは「rollOver」、「rollOut」のようなもので、指定領域の出入りを監視しています。「mouseover」、「mouseout」は指定領域の出入りならびに、指定領域内の子要素間の出入りにも反応します。※出入りっていうのはマウスの出入りのことです。
  • $("li").hover(
	// 第一引数がover処理
	function () {
		// over処理を記述。
		},
	// 第二引数がout処理
	function () {
		// out処理を記述。
		}
	);
  • .click　___ クリックされると実行。
  • $("p").click(function () {
	// 処理を記述。
	});
  • .scroll　___ スクロールされると実行。
  • $(window).scroll(function () {
	// 処理を記述。
	});

他のメソッドは、下記を参考にどうぞ。
jQuery日本語リファレンス

長文になったので、続きはまた別のメモで。

8 / 8

prev

1 Coment

  1. ピンバック: jQueryについて初心者が偉そうにメモる。part 2 | Memorandum Book - written by Ravenala

Leave a Reply

Back to Top