09 | 2017/10 |  11

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

jQuery の挙動を解読する(32):jQuery.clean() メソッド解読──jQuery解読(49)

jQuery.clean() メソッドを徹底解明!

以前にこちらのエントリイ ( jQuery()の挙動を解読する(6) jQuery.clean()メソッド解読──jQuery解読(10) )で clean メソッドを解読しました。

しかし、jquery.js ver1.3.2 でこのメソッドは一部仕様が変わり拡張されました。

そこで改めてこのメソッドに正面から取り組み、ほぼ全容を解明しました。

特にver 1.3.x 系から追加された Document Fragment を利用して DOM にスクリプトを追加することなく実行する機能はなかなか興味深いものがあります。

そこで、jQuery()の挙動を解読する(6) jQuery.clean()メソッド解読──jQuery解読(10) を抜本改定しましたので、よろしければご覧下さい。

上のエントリイでは、ver 1.3.x 系の新たな仕様であるスクリプト実行機能のサンプルも用意しました。

非常に興味深いのでこのエントリイでも抜粋しておきます。

▲ToTop

cleanメソッドが 第 3 引数 fragment を取る場合の興味深い例示

clean() メソッドの第 3 引数 「 fragment 」 は ver 1.3.x で初めて登場しました。1.2.6 まではこのメソッドは 2 つの引数しか取りませんでした。この fragment 引数は一体何をするために設けられたのか?───それがなかなか解明できませんでした。今でも完全に解明しきったとは思えません。まが霧が完全には晴れないからです。

それでも、コードを睨み続け、サンプルを幾つか試してみて分かったことがあります。

スクリプトを使って Web ページに新たにノードを追加する場合において、追加する html 文字列内にスクリプトを埋め込んで( いわば「 二重スクリプト 」になります。 )、fragment 引数つきで clean() メソッドを実行すると、大変興味深いことが起こるのです。

くだくだ説明するよりも、実例を示すのが手っ取り早いでしょう。

下のボタンをクリックするとこの文字列付近で 2 つの変化が起こります。或る文章がボタンの前に挿入され(文字列を内包する p タグです)、同時に画面中央に alert 表示が出ます。

ここで行ったことは以下の通りです。

上のボタンがクリックされると、このページに埋め込まれた或る Javascript コードが起動します。そのコードでは jQuery().before() メソッドを使って、このボタンの前に兄弟要素 p タグとスクリプトタグを挿入します。

このとき、jQuery().before() メソッドはその定義により、domManip メソッドを呼び出し、その中では clean メソッドが fragment 引き数付きで起動されます。この結果、挿入する html 文字列に記述されているスクリプトタグは、ページ内に挿入された直後に削除され、かつ実行されるのです。こうして alert 表示が実行されます。

スクリプトによって或る DOM エレメントを追加する行為において、そのノード内にスクリプトタグを含める必要性が果たしてどれほどあるのか判然とはしません。挿入する html 文字列内に敢えてスクリプトタグを埋め込まなくても、挿入する DOM エレメントとは別にスクリプトから直接同様の効果を得ることも可能でしょう。

それでも、二重スクリプトはなかなかおもしろい効果をWebページに与えるのではないか、と感じています。

なお、以上を実現する Javascript コードでは name エンティティに悩まされました。フゥ~(;´_`;)

■ 上のことを実現している Javascript コード
(function(){
 $("#fragmentTest702").css("background-color","pink")
  .toggle(function(){
   $(this).text("clean(e,c,fragment)メソッドテスト取り消し")
    .css("background-color","aquamarine")
    .before("<p id='before702' class='ta_l accentuate2'>このブロックは下のボタンをク
    リックした結果表示されました。それは jQuery().before('<p id=\"before702\">
    ・・・</p><script type=\"text/javascript\">alert(\"実験成功・・・\")
    </script>) メソッドテストであり、追加する html 文字列内に上に見るようにスク
    リプトコードを含む場合の実験です。</p><script type='text/javascript'>alert('実験
    成功!\\nこの alert 表示がスクリプト実行結果です')<\/script>");
  },function(){
   $("#before702").remove();
   $(this).text("clean(e,c,fragment)メソッドテスト実行")
    .css("background-color","pink");
  });
})();

▲ToTop

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/702-083c4114

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200903240106
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。