Twitter

jQueryを利用したシンプルな画像ロールオーバー

2012/02/06 | jquery | コメント (0)

class属性に「imgover」を指定したimg要素に対し、ロールオーバーで画像を置換する方法。
拡張子の前に「_o」を付けたロールオーバー用の画像さえ同階層にあれば、jQueryだけで簡単に実装できます。

ex)ロールオーバー前の画像名:hoge.jpg → ロールオーバー後の画像名:hoge_o.jpg

$(function() {
	// ロールオーバー
	$("img.imgover").mouseover(function(){
		$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"));
	}).mouseout(function(){
		$(this).attr("src",$(this).attr("src").replace(/^(.+)_o(\.[a-z]+)$/, "$1$2"));
	}).each(function(){
		$("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"));
	});
});

jQueryのセレクターまとめ

2011/12/28 | jquery | コメント (0)

jQueryを使ってHTMLの要素を指定する際に使用できるセレクター一覧表

名称 書式 指定対象
CSSでよく利用されるセレクター
要素セレクター $("要素名") 特定の要素
IDセレクター $("#ID名") 特定のid属性を持つ要素
クラスセレクター $(".クラス名") 特定のclass属性を持つ要素
子孫セレクター $("要素1 要素2") 特定の要素の内側にある要素
ユニバーサルセレクター $("*") すべての要素
グループセレクター $("セレクター1, セレクター2, …") 複数のセレクター
CSS2のセレクター
子セレクター $("親要素名 > 子要素名") 特定の要素の直下の子要素
隣接セレクター $("要素1 + 要素2") 特定の要素の次の要素
first-child擬似クラス $("要素:first-child") 同一要素内の最初の要素
CSS3のセレクター
間接セレクター $("要素1~要素2") 特定の要素の後に出現する要素
否定擬似クラス $("要素1:not(要素2)") 特定の要素のうち要素2の条件を除く要素
empty擬似クラス $("要素:empty") 子要素やテキストを含まない要素
nth-child擬似クラス $("要素:nth-child(番号)") 特定の要素内の指定した番号の要素
last-child擬似クラス $("要素:last-child") 同一要素内の最後の要素
only-child擬似クラス $("要素:only-child") 特定の要素が1つだけ含まれる要素
CSSの属性セレクター
[attribute] $("[属性名]") 特定の属性を持つ要素
[attribute = 'value'] $("[属性名 = '値']") 特定の属性が指定した値を持つ要素
[attribute != 'value'] $("要素名[属性名 != '値']") 特定の属性が指定した値を持たない要素
[attribute ^= 'value'] $("[属性名 ^= '値']") 特定の属性が指定した値で始まっている要素
[attribute $= 'value'] $("[属性名 $= '値']") 特定の属性が指定した値で終わっている要素
[attribute *= 'value'] $("[属性名 *= '値']") 特定の属性が指定した値を含んでいる要素
[attributeFilter1][...2] $("[属性セレクター1][...2]") 複数の属性セレクターに該当する要素
jQueryの独自フィルター
firstフィルター $("要素:first") 指定した要素の最初の要素
lastフィルター $("要素:last") 指定した要素の最後の要素
evenフィルター $("要素:even") 指定した要素の偶数番目の要素
oddフィルター $("要素:odd") 指定した要素の奇数番目の要素
eqフィルター $("要素:eq(番号)") 指定した番号の要素
gtフィルター $("要素:gt(番号)") 指定した番号より後の要素
ltフィルター $("要素:lt(番号)") 指定した番号より前の要素
headerフィルター $("要素:header") h1~h6までのheading要素
containsフィルター $("要素:contains(‘文字列’)") 特定の文字列が含まれている要素
hasフィルター $("要素1:has(要素2)") 特定の要素が含まれている要素
parentフィルター $("要素:parent") 子要素やテキストを含む要素
animatedフィルター $("要素:animated") アニメーションしている要素
フォームフィルター
:inputフィルター $("要素:input") input要素/textarea要素/select要素/button要素
:textフィルター $("要素:text") 1行テキストフォーム(input type="text")
:passwordフィルター $("要素:password") パスワードフォーム(input type="password")
:radioフィルター $("要素:radio") ラジオボタン(input type="radio")
:checkboxフィルター $("要素:checkbox") チェックボックス(input type="checkbox")
:submitフィルター $("要素:submit") 送信ボタン(input type="submit/image")
:imageフィルター $("要素:image") イメージボタン(input type="image")
:resetフィルター $("要素:reset") リセットボタン(input type="reset")
:buttonフィルター $("要素:button") ボタン(button要素)
:fileフィルター $("要素:file") ファイル選択フォーム(input type="file")
:checkedフィルター $("要素:checked") チェックされているチェックボックス/ラジオボタン
:selectedフィルター $("要素:selected") セレクトボックスで選択されている要素

jQueryの基本構文

2011/11/10 | jquery | コメント (0)

jQueryでスクリプトを書くときにはほとんどの場合、まずhtmlが読み込まれたときに実行する命令であるready関数を記述し、その内側に命令を書いていきます。

命令には、その対象である「セレクター」と、何らかのきっかけとなる「イベント」があり、セレクターがイベントの発生を感知したタイミングで実行されます。

ほぼ全てこの形式になるのでjQueryの決まりごととして覚えましょう。

$(function() { //ready関数
	$(セレクター).イベント(function() {
		$(セレクター).命令;
	});
});

簡単に解説していきます。

+more read

Page 2 of 212
CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top