addressというクラス名がついた。リンクのhref属性をマウスがリンクに乗ったときに、初めて、書き換えて
クリックしたときに、メールアドレスとして成り立つようにする。
置換部分が、適当につけられるので、機械的にhtmlから、リンクを抜き取ろうとしても、抜き取りにくくなる。
たぶん、
htmlドキュメントを人間が見たときには、ちゃんと、そこに何が書かれているかわかるようにすることができるので、エンコードして、難読化するようなことから比べると、ちょっぴりビューティ、ポイ
マウスアウト時の処理は、この場合、いらないと思った。
mouseoverを入れたのは、DOM的に見ると、メアドじゃんとならないように企んだけど、いいのかな

心配していること

調子こいてんじゃないよと、も一人の自分がささやいてます。
勉強中のメモなので、鵜呑みにしないでね。

<script type="text/javascript">
<!--
(function($){

jQuery(function() {
jQuery(".address").mouseover(function(){
var fff = jQuery(".address").attr("href").replace(/---この部分は、＠マークに置き換えてね---/g, "@");
jQuery(".address").attr("href", fff);
});


});
})(jQuery);
//-->
</script>
…
<a href="mailto:mymail---この部分は、＠マークに置き換えてね---damedame.com" class="address">mail</a>

※「---この部分は、＠マークに置き換えてね---」のところは、何でもいいと思いますが、htmlのソースを人間が見たときに、これはそういう意味なんだな。と簡単に理解できるようにしておかないと、htmlに悪いので、、、

2008-01-26

Events イベント

いろはイベント

Name	Type
ready( fn )	Returns: jQuery
DOMの操作や、値の取得が可能になったときに発生するイベント

Event Handling:イベントハンドラ

Name	Type
bind( type, data, fn )	Returns: jQuery
指定したイベント（クリックなど）に呼応したイベント
one( type, data, fn )	Returns: jQuery
最初の一度だけ発生するイベント
trigger( type, data )	Returns: jQuery
該当したエレメントで、指定したイベントが発生したとき、呼応するイベント
triggerHandler( type, data )	Returns: jQuery
This particular method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browsers default actions. 動作を見てみると IE7でtrigger(focus)を押下げると、Focused!が2ヶ並び、focustriggerでは1つで期待通りです。 $("input").focus(function(){...があるので、To Be Focusedにフォーカスすると、1個出現します。firefox2では、2個になることはありませんでした。デフォルト動作$("input").focus(function(){...を制限して、関数を実行するというところが、triggerとの違いのようです。
unbind( type, data )	Returns: jQuery
bindしたイベントを削除する

Interaction Helpers:

Name	Type
hover( over, out )	Returns: jQuery
htmlの　a:hover　と同様に、マウスオーバー　マウスアウト時にそれぞれの関数を実行するイベント
toggle( fn, fn )	Returns: jQuery
二つの関数を交互に実行する。

Event Helpers:

自分でとりあえず書いてみる。

jQuery("#mouseOver")
.mouseover(function(){jQuery("#mouseOver").html("<span>□</span>");})
.mouseout(function(){jQuery("#mouseOver").html("<span>■</span>");});

引数のないイベントの使い方がよくわからなかったので、メモ

  <script>
  $(function(){
    
    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();

  });
  </script>
  <style>
  div { color:#555; }
  </style>
</head>
<body>
  <select name="sweets" multiple="multiple">
    <option>Chocolate</option>
    <option selected="selected">Candy</option>
    <option>Taffy</option>
    <option selected="selected">Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>
  </select>

.change();の1行がないと、最初にページを表示したときに、selectedの値が表示されない。

Name	Type
Document Object Model Events 邦訳
blur( )	Returns: jQuery
フォーカスがなくなったときに発生するイベント
blur( fn )	Returns: jQuery
フォーカスがなくなったときに関数を実行する
change( )	Returns: jQuery
値が変更されたときに発生するイベント
change( fn )	Returns: jQuery
値が変更されたときに関数を実行する
click( )	Returns: jQuery
マウスクリックイベント
click( fn )	Returns: jQuery
クリックしたときに関数を実行する
dblclick( )	Returns: jQuery
ダブルクリックイベント
dblclick( fn )	Returns: jQuery
ダブルクリックしたときに関数を実行する
error( )	Returns: jQuery
Triggers the error event of each matched element.
error( fn )	Returns: jQuery
Binds a function to the error event of each matched element.
focus( )	Returns: jQuery
blurの反対、フォーカスを得た時に発生するイベント
focus( fn )	Returns: jQuery
フォーカスを得たときに関数を実行する
keydown( )	Returns: jQuery
マウスキー押下げている間
keydown( fn )	Returns: jQuery
マウスキー押下げている間に関数を実行する
keypress( )	Returns: jQuery
キーが押された瞬間
keypress( fn )	Returns: jQuery
キーが押された瞬間関数を実行する
keyup( )	Returns: jQuery
押下げたキーを離した瞬間
keyup( fn )	Returns: jQuery
押下げたキーを離した瞬間関数を実行
load( fn )	Returns: jQuery
`$(window).load(function () { // run code });`
mousedown( fn )	Returns: jQuery
マウスダウン
mousemove( fn )	Returns: jQuery
マウスムーブ
mouseout( fn )	Returns: jQuery
マウスアウト
mouseover( fn )	Returns: jQuery
マウスオーバ
mouseup( fn )	Returns: jQuery
マウスアップ
resize( fn )	Returns: jQuery
リサイズ
scroll( fn )	Returns: jQuery
スクロール
select( )	Returns: jQuery
セレクト
select( fn )	Returns: jQuery
セレクト
submit( )	Returns: jQuery
サブミット
submit( fn )	Returns: jQuery
サブミット
unload( fn )	Returns: jQuery
アンロード　ALT+F4等、閉じる作業をが行われたときに発生するイベント

2008-01-25

API/1.2/CSS　スタイルの取得とコントロール

いろは CSS

そもそも、スタイル指定の宣言ブロックとか、わかりにくい名前

名称
p#id	{	color	:	#ff3300	}
セレクタ	{	プロパティ	:	値	}
セレクタ	宣言ブロック
規則集合

jQueryでのスタイルの指定

@import規則

headerにembed　styleが記述されていると仮定して、以下のように記述できそうです。
ただし、<!-- -->や　<sample>/*<![CDATA[*/…/*]]>*/</sample>といった表現を組み合わせた場合。
<>がescapeされます。&60;&62;などでも、&amp;60;になります。

jQuery("style").prepend("@import url(\"test.css\") all;");

単一のプロパティを適用

$(".alert").css("color","red");

とは言うものの、ショートハンドは使えるのか

$(".alert").css("border","3px double #aaa");

使えます。

複数のプロパティを適用

複数プロパティの指定についての注意
下の例の場合では、backgroundColorというプロパティは、cssの指定ではなくて、javascriptのスタイルの指定です。
私の場合は、javascriptぜんぜんわかりませんので、スタイルシートの指定で書きたい。
確認できた確かなことではありませんが、"background-color"というようにプロパティをダブルクウォートで囲むと、指定が可能なようです。

$(".alert").css({ "background-color":"yellow", fontWeight:"bolder" });

プロパティ一覧
CSS2プロパティ一覧 | 日経 xTECH（クロステック）
http://www.red.oit-net.jp/tatsuya/java/reference/style.htm

html5じゃfieldset廃止だろうから、今のうち使ってやるぞ

スクリプトによるスタイルの適用について、

.cssを使わなくても、他の方法で追加することも可能。

例えば：

jQuery(".alert").attr("style","border:1px solid red;margin:1em;padding:1em;background:#aaf");

などと書くことのほうが、htmlをやっている人にとっては、いいかもしれない。

DOMで書いているんじゃなくて、htmlなら、この結果に批判的な人は多いだろう。
つまり、べたなインライン指定なんて、怠け者呼ばわりされるからだ。

他にも

jQuery("style").append(".alert {border:1px solid red;margin:1em;padding:1em;background:#aaf}");

でも、いいのかもしれない。「<!--こういうやつの問題と、IE7エラー出る、その点は後で」
~~※IE7 予期しないプロパティアクセスというエラーが発生しました。~~
jQuery1.2.2で問題なく動作しました。jQueryの問題ではなさそうです。

ユーザーエージェントの分岐 + css

$.browser  
$("#test_result").append(  
    "This user agent is " + ($.browser.mozilla ? "" : "not ") + "a mozilla."  
).append("<br>");

htmlドキュメント構造と、視覚的だったり、ユーザー補助機能だったりの分離

htmlには、文書としての構造を担い、視覚的なことは、スタイルが担う。という理想があります。
しかし、視覚的な設定を行おうとすると、ほとんどの場合、htmlに、視覚表現のための構造が生まれます。
なぜか、CSSは、htmlに依存しているからです。（エレメントのないところにスタイルは、作れないので）

だから、理想なのだと私は、感じています。

Link

ページトップへ戻るリンクや、ページの特定のセクションにリンクは、ユーザーにとっては、必要な機能ですが、htmlとして場合必ずしも必須ではなく、できれば、メタボに苦しむ私のhtmlを、jQueryでダイエットしてやりたい

CSS:スタイルの値の取得と適用

Name	Type
css( name )	Returns: String
最初にマッチしたスタイルプロパティの値を返す。
css( properties )	Returns: jQuery
引数のオブジェクトに指定した、プロパティと値を適用する。
css( name, value )	Returns: jQuery
プロパティ名と値をひとつ適用する

Positioning:位置の取得

Name	Type
offset( )	Returns: Object{top,left}
最初にマッチしたエレメントの、オフセット値　relativeな　offset.left offset.top

Height and Width:幅と高さの取得と設定

Name	Type
height( )	Returns: Integer
最初にマッチしたエレメントの高さを返す
height( val )	Returns: jQuery
マッチしたエレメントの高さを引数の値に置き換える
width( )	Returns: Integer
最初にマッチしたエレメントの幅を返す
width( val )	Returns: jQuery
マッチしたエレメントの幅を引数の値に置き換える

2008-01-25

おしらせ

お知らせ

いきなりですが、jQuery Memo エントリを重ねるごとに、赤面するような間違いが多発中です。
(気がつき次第、正しい知識が身につき次第直し中）
うまく動作しないような場合は、まずこのエントリ自体の間違いを疑ってください。
このブログに書いてあることは、他のブログにももっとわかりやすく書いてあるハズ、、、
引用元などをあたってください。