jQueryを勉強しようvol.2「jQueryのセレクタと記述方式」

tanaka — Tue, 16 Feb 2010 12:03:22 +0000

第一回目は「jQueryを勉強しようvol.1「jQueryのraedy関数について」」というエントリーで
基本的な命令の出し方を学びましたが、今回はjQueryを使った時に、
HTML側の要素を指定する方法につてまとめました。
　

　

要素を指定するにはセレクターを指定する必要があります。
セレクタの指定形式は下記の通り

$(function(){
	$("セレクタ名").jQueryの命令部分
	});

とセレクタ名を指定しておいて、ドットで区切り、
命令を記述します。jQueryの場合ほぼ全ての形式が上記の形で
書く事になりますので、この構造を覚えておきましょう。
　
　

上記コードの「セレクタ名」と書かれている所には何が入るのか？
下記のコードだとliという要素に対して、CSSのcolorプロパティを
赤に変更せよという形になります。

$(function(){
	$("li").css("color","red");
	});

もちろん要素だけではなくて、CSSと同じような感覚ID名、クラス名、
子要素のみだったり、グループだったり、jQuery独自のフィルターなど、
様々な範囲のセレクタ指定方法が準備されておりセレクタの指定の方法は多数あります。

海外版にはなりますが、セレクタのチートシートが便利ですので
セレクタ一覧が見たいと言う方は「jQuery Selectors | Refcardz」をどうぞ。
　

ideacloud blog - 名古屋のWEB制作会社アイデアクラウドのブログ » function