Kinopyo Blog

jQueryでマウス右クリックを無効にする方法です。

“contextmenu”のイベントはjQueryのドキュメントには乗ってませんが、

それのハンドラでreturn falseすることで簡単に実現できます。

$("document").bind("contextmenu", function(){

    return false;

});

@IT連載：jQuery逆引きリファレンスの第二回のテーマは属性＆コンテンツです。

目次は以下になります。

* 属性値を取得するには？

* 属性値を設定するには？

* 複数の属性値をまとめて設定するには？

* 関数の結果によって動的に属性値を設定するには？

* 属性値を削除するには？

* スタイル・クラスを追加／削除するには？

* スタイル・クラスが適用されているかを判定するには？

* スタイル・クラスの適用／解除を交互に行うには？

* 要素に適用されたスタイル情報を取得するには？

* 要素に特定のスタイルを適用するには？

* 複数のスタイル・プロパティをまとめて設定するには？

* 要素の表示位置を取得するには？

* ページのスクロール位置を取得／設定するには？

* 要素の高さや幅を取得するには？

* 要素の高さや幅を設定するには？

* 要素のテキストを取得するには？

* 要素のテキストを設定するには？

* フォーム要素の値を取得／設定するには？

勉強メモ

text()とhtml()の違い

（1）取得する対象

　要素セット（jQueryオブジェクト）が複数の要素を含んでいる場合、htmlメソッドは先頭要素の内容だけを取得しますが、textメソッドはすべての要素の内容を結合したものを取得します。

（2）取得する内容

　名前のとおり、htmlメソッドは要素の内容をHTML文字列として取得しますが、textメソッドは純粋なテキストだけを取得します。

（3）対応する形式

　textメソッドはHTML／XMLいずれの形式でも動作しますが、htmlメソッドはHTML（XHTMLを含む）形式でしか動作しません。このサンプルでは扱っていませんが、textメソッドをXML形式で利用する方法については、あらためてAjax編で紹介する予定です。

http://www.atmarkit.co.jp/fdotnet/jqueryref/02attribute/attribute_16.html

height(val)、width(val)

引数valには数値、もしくは「em」や「%」などの単位付きの数値を指定できます（単なる数値の場合はピクセル値として認識します）。

要素の高さや幅を取得するには？

－ height()、width()、innerHeight()、innerWidth()、outerHeight()、outerWidth()

関数の結果によって動的に属性値を設定するには？

－ attr(name, fnc) －

コールバック関数の戻り値を用いて設定。

$(function() {
	$('li > img').attr(
			'src',
			function(index) {
				return "http://www.wings.msn.to/books/" + this.id + "/"
						+ this.id + "_logo.jpg";
			});
});

今までjQueryを使ってきたtipsをメモします。

Tipsの定義とおり知っていればちょっと便利になるけど、

知らなくても特に問題ないですね。

ただしlive関数においてはすべてのイベントに有効じゃないのは

知っておいてほしいです。

live関数

liveはすべてのイベントに対応していない。

サポート

click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

非サポート

blur, focus, mouseenter, mouseleave, change, submit

ajax関数のurlパラメータ

AJAXのURLではセレクタも併用できる。セレクタによりあるページの一部だけを読み込むことができる。

こんな形です：”url #some > selector”

デフォルトは”body>*”のセレクタが適用されていますよ。

$("#links").load("/Main_Page #jq-p-Getting-Started li");

：has(selector)フィルタ

：has(selector)は持ってるすべての子要素に対して動作してる

divい対して:hasフィルタを使うと、p要素までフィルタが走る

	span ...

p.. 

	

属性フィルタの組み合わせ

[filter][filter]……のように複数を連続して記述することもできます。この場合、すべての属性フィルタに合致する要素だけが取り出されます。

htmlの組み立て

ハードコードで書く

$(select).append("
text

");

jQueryの関数を用いて書く

$(select).append($('
').attr({ value: 1 }).text("text"));

このほうが簡潔だと思いますが、、

:nth-child

:nth-childフィルタによりn行おきに子要素を取得することができる

例えば、2、5、8行目……のように3行おきに（「3で割ったときの余りが2」番目の）要素を取得したい場合には、以下のように記述できます。

$('ol > li:nth-child(3n + 2)')

validationプラグイン

jQueryのvalidationプラグイン:showErrorを定義するとhighlightとunhighlightとは実行しない

そもそもshowErrorはエラーをどう表示するかを決めるための高レベルの関数なので、

簡略化したhighlightとunhighlightは隠蔽されたっぽいの感じで、完全に実行しません。