スポンサーリンク

74 件 見つかりました。

1. [2013-05-04-1]

frameのサンドボックスでframekillerを無効化する[JavaScript]

このドキュメントの内容は、以下の通りです。はじめにコードはじめにブラウザのサンドボックス機能を利用すると framekiller が無効化できます。Chrome 26 では、framekiller が無効化されました。IE8 では、framekiller が動作しました。コードiframe に sandbox 属性を指定するだけです。<iframesandboxsrc="http://foo/iframekiller.php"></ifram>
2. [2013-05-03-1]

JavaScript framekillerでフレームを殺す方法[JavaScript]

このドキュメントの内容は、以下の通りです。はじめにコードはじめに勝手にサイトのページを frame に入れられたりしないように、完全な対策ではありませんが framekiller を JavaScript で書いたりしてました。クリックジャッキング対策として、申し訳程度に存在していた対策としてframekillerX-Frame-Options ヘッダがあったかと思います。コードframekiller の例は、以下のとおりです。<script type="text/javascript">if(top != self) top.location.replace(location);</script>
3. [2013-01-04-1]

Facebook ソーシャルプラグインを非同期読み込みにする方法[Facebook][JavaScript]

このドキュメントの内容は、以下の通りです。ロードが遅くなるソースコードロードが遅くなるソーシャル系プラグインは、 JavaScript で提供されているものがいくつもあります。そういった、スクリプトをページに追加していくと、ページが重くなっていく、という現象を体感されている方が多いのではないでしょうか。ページロードを高速化する方法として、Facebook のソーシャルプラグインを非同期読み込みにする方法があります。JavaScript の読み込みを非同期にすることにより、JavaScriptの読み込みが終わらなくても、ページの他の部分の読み込みを実行してくれます。ソースコードやり方は、とても簡単です。JavaScript の読み込みを非同期実行にするには、 async を true にします。js.async = true;ソースコード全体で示すと以下の通りです。<div id="fb-root"></div><script><!--(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.async = true; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));//--> </script>以上で、ページのロードの体感速度に変化が得られたでしょうか?
4. [2012-11-27-1]

FreeBSD coffee-scriptをインストールする[Node.js][JavaScript][coffee-script]

このドキュメントの内容は、以下の通りです。はじめに事前準備インストール参考テストはじめにcoffee-script をインストールするのに、 npm コマンドを利用すると簡単です。FreeBSD で coffee-script を試してみます。事前準備事前にnpm と node をインストールします。[2012-11-26-1] FreeBSD npm をインストール[2012-11-25-1] FreeBSD に node.jsをportsからインストールするsudo portmaster -y -d /usr/ports/www/npmsudo portmaster -y -d /usr/ports/www/nodeインストール-g は、グローバルインストールを意味します。% sudo npm install -g coffee-scriptnpm http GET https://registry.npmjs.org/coffee-scriptnpm http 200 https://registry.npmjs.org/coffee-scriptnpm http GET https://registry.npmjs.org/coffee-script/-/coffee-script-1.4.0.tgznpm http 200 https://registry.npmjs.org/coffee-script/-/coffee-script-1.4.0.tgz/usr/local/bin/coffee -> /usr/local/lib/node_modules/coffee-script/bin/coffee/usr/local/bin/cake -> /usr/local/lib/node_modules/coffee-script/bin/cakecoffee-script@1.4.0 /usr/local/lib/node_modules/coffee-script参考http://coffeescript.org/[2012-11-26-1] FreeBSD npm をインストール[2012-11-25-1] FreeBSD に node.jsをportsからインストールするテストnpm コマンドによって coffee-script は、/usr/local/lib/node_modules/coffee-script/bin/にインストールされます。test.coffeehello = -> console.log ("Hello, World!")hello()実行してみる。% /usr/local/lib/node_modules/coffee-script/bin/coffee test.coffeeHello, World!jsにコンパイルする。% /usr/local/lib/node_modules/coffee-script/bin/coffee -c t.coffee% ls -lttotal 8-rw-r--r-- 1 foo users 160 11月 23 02:04 test.js-rw-r--r-- 1 foo users 51 11月 23 02:01 test.coffee生成された test.js// Generated by CoffeeScript 1.4.0(function() { var hello; hello = function() { return console.log("Hello, World!"); }; hello();}).call(this);nodeコマンドで実行してみる。% node test.jsHello, World!
5. [2012-11-25-1]

FreeBSD に node.jsをportsからインストールする[Node.js][FreeBSD][JavaScript]

このドキュメントの内容は、以下の通りです。FreeBSD に node をインストールインストール参考サイト動作確認以前、FreeBSD で Node.js をビルドしましたが、ports からインストールできるようになりました。[2012-03-29-1] FreeBSD で Node.js をビルドする方法FreeBSD に node をインストールインストールcd /usr/ports/www/nodesudo make install cleanportinstallコマンドでインストールする場合sudo portinstall /usr/ports/www/nodeportmasterコマンドでインストールする場合sudo portmaster -y -d /usr/ports/www/node参考サイトhttp://nodejs.org/動作確認コマンドラインで動作確認をしてみます。% node -e "console.log('hoge');"hoge% /usr/local/bin/node> console.log("hoge");hogeundefined
6. [2012-03-29-1]

FreeBSD で Node.js をビルドする方法[JavaScript][Node.js]

このドキュメントの内容は、以下の通りです。オフィシャルサイトダウンロードlibexecinfo の インストール参考サイトビルドサンプルソーススクリプト起動ブラウザからのアクセスHTMLを出力してみるオフィシャルサイトhttp://nodejs.org/ダウンロードhttp://nodejs.org/#downloadfetch http://nodejs.org/dist/v0.6.11/node-v0.6.11.tar.gztar zxfp node-v0.6.11.tar.gzlibexecinfo の インストールnode.js のビルドに libexecinfo が必要になるため、インストールします。cd /usr/ports/devel/libexecinfosudo make install cleanportinstallコマンドでインストールする場合sudo portinstall /usr/ports/devel/libexecinfoportmasterコマンドでインストールする場合sudo portmaster /usr/ports/devel/libexecinfo参考サイトhttp://www.gnu.org/software/libc/manual/html_node/Backtraces.htmlビルドcd node-v0.6.11/./configuregmakeout/Release/node にバイナリが作られる。カレントディレクトリに out/Release/node へのシンボリックリンク node が作られます。サンプルソースhello.js は、1337 で Http Server を起動して、Hello World を返すだけのサンプルコードです。hello.jsvar http = require ('http' );http.createServer (function (req, res) {res.writeHead (200,{'Content-Type': 'text/plain'});res.end ('Hello World\n');}).listen (1337);console.log ("Server running at http://localhost:1337/");localhost のところは、適当に読み替えてください。サンプルにある listen の呼び出しで、127.0.0.1 を指定するとローカルホストからしかつながらなくなってしまうので、注意が必要です。指定しなければ、リモートホストからでも接続できます。listen(1337. "127.0.0.1");スクリプト起動node hello.jsブラウザからのアクセスブラウザからアクセスしてみましょう。http://localhost:1337/以上で、node.js の Hello world でした。HTMLを出力してみるhello2.jsvar http = require ('http' );http.createServer (function (req, res) {res.writeHead (200,{'Content-Type': 'text/html'});res.write ('<html>');res.write ('<title>Hello World</title>');res.write ('<body>');res.write ('<div>Hello</div>');res.write ('</body>');res.write ('</html>');res.end ();}).listen (1337);console.log ("Server running at http://localhost:1337/");
7. [2011-02-16-1]

JavaScript NaNとは何か NaNの判定方法[JavaScript]

このドキュメントの内容は、以下の通りです。NaNの判定NaN(ナン)とは、Not A Numberの略で、数値ではないことを表す、特別な値です。JavaScript で parseInt() などを利用したときに、数値に変換できないオブジェクトを渡した場合、NaNが返されます。NaNであるかの判定には、isNaNで調べることができます。NaNの判定var x = parseInt ( value );if ( isNaN ( x ) ) {// NaN}
8. [2011-02-05-1]

JavaScript 文字列を整数に変換する[JavaScript]

JavaScript で x が 3 、 y が 2 が入ってると思い込んで、下記の計算をして、32が返ってくると????となってしまうことがあります。x や y が文字列として扱われているときに、文字列が連結されてしまうのが原因です。var total = x + y;x や y が文字列であるなら、一度、整数に変換してから計算をしなければなりません。文字列から整数への変換は、 parseInt() を利用します。var total = parseInt(x) + parseInt(y);これで、 5 が返ってくるようになります。
9. [2011-02-04-1]

jQuery チェックボックスのチェック状態を調べる[jQuery][JavaScript]

jQueryを利用して、チェックボックスの状態を調べるには、is()を使います。このようなチェックボックスがあったときに<input type="checkbox" id="foo" name="bar" />このようにチェックします。<script language="javascript"><!--if ( $("#foo".is(":checked") ) ) {// チェックされている} else {// チェックされていない。}// --></script>[2010-10-14-1] jQuery inputタグのチェックボックスを確認する方法 では、 attr() を使ってやってました。
10. [2010-11-02-1]

JavaScriptで確認ダイアログを表示する window.confirm()[JavaScript]

このドキュメントの内容は、以下の通りです。構文サンプルコードアプリケーションに、ユーザのアクションを確認するために、確認のダイアログ(ウィンドウ)を表示することが多々あります。たとえば、Windowsでファイルを削除するときに、「ファイルの削除」のウィンドウで確認されます。ウェブサイトで、ユーザのアクションの確認をするには、いくつかの方法がありますが、画面遷移なしで確認する方法として JavaScript の window.confirm() があります。構文bool window.confirm( string )サンプルコード<script type="text/javascript">if ( window.confirm( "実行してもよろしいですか?" ) ) {// はい、が押されたときのコード// 実行するコードalert ("実行しました");} else {// キャンセル// 何もしないときの処理alert ("キャンセルしました");}</script>
11. [2010-11-01-1]

JavaScript ウィンドウを開く window.open[JavaScript]

このドキュメントの内容は、以下の通りです。構文引数オプションJavaScriptで子ウィンドウを開くには、window.open()を使います。構文window.open(url, name, option);引数 url 開くURL name window名 option オプション オプション toolbar [=yes|no]|[=1|0] ツールバー location [=yes|no]|[=1|0] ロケーション directories [=yes|no]|[=1|0] ディレクトリボタンズ status [=yes|no]|[=1|0] ステータス行 menubar [=yes|no]|[=1|0] メニューバー scrollbars [=yes|no]|[=1|0] スクロールバー resizable [=yes|no]|[=1|0] リサイズ可 or 不可 width=数値 横幅 ピクセル単位 height=数値 高さ ピクセル単位
12. [2010-10-14-1]

jQuery inputタグのチェックボックスを確認する方法[jQuery][JavaScript]

このドキュメントの内容は、以下の通りです。サンプルコード チェックを確認するサンプルコード チェックをオンオフするinputタグのチェックボックス(checkbox)で、チェックが入っているかをjQueryで確認するには、attr()メソッドを使います。このようなチェックボックスがあるとします。<input type="checkbox" id="chk" name="check" />サンプルコード チェックを確認するattr()メソッドで checked を調べます。<script language="javascript"><!--if ( $('input#chk').attr('checked') ) {// チェックされている。} else {// チェックされていない。}//--></script>[2011-02-04-1] jQuery チェックボックスのチェック状態を調べる の is(":checked") のほうがよいかも。サンプルコード チェックをオンオフするチェックボックスのチェックをオン・オフするには、第2引数で true / false を指定します。<script language="javascript"><!--// チェックをオンにする$('input#chk').attr('checked', true);// チェックをオフにする$('input#chk').attr('checked', false);//--></script>
13. [2010-10-13-1]

jQuery ページロード後にJavaScriptを実行する方法 readの代わり$(function(){}や$()を使用する[JavaScript][jQuery]

このドキュメントの内容は、以下の通りです。$(foo);$(function(){});$(document).ready(function(){});Webページ(ドキュメント)をロード後された後に、JavaScriptで初期化処理を実行することがあります。jQueryでは、いくつかの方法が提供されています。$(関数)や$(function(){}); は jQuery v1.2からの方法です。$(foo);非常に短く書くには、 $(関数) を利用します。$(関数) の関数部分して指定した関数が実行されます。function foo () { alert ('foo'); }$(foo);$(関数) は複数の登録を行っても上書きされません。function foo1(){ alert ('1'); }function foo2(){ alert ('2'); }$(foo1);$(foo2);とするとfoo1とfoo2が実行されます。window.onloadとことなり画像がすべてロードされるのを待つのではなく、DOMの構築完了後に実行されます。$(function(){});次に短く表現するには、 $(function(){}); を使用します。<script type="text/javascript">$( function() {// ドキュメントロードに実行する初期化コードalert ('init');});</script>$(document).ready(function(){});ready を利用する方法が一番コードが長くなります。$(document).ready( function() {alert ('init');});
14. [2010-01-24-1]

JavaScriptで実装されたFlashプレイヤー[Flash][JavaScript]

SVG/HTML5対応のブラウザ向けにJavaScripotで書かれたFlashプレイヤーが開発されています。Gordonhttp://paulirish.com/work/gordon/demos/iPhoneのSafariなどでもFlashを表示できるようになるかもしれません。
15. [2009-11-27-1]

JavaScriptからローカルファイルシステムへアクセスするFile API[JavaScript]

JavaScriptからローカルファイルシステムへアクセスするFile APIの仕様のドラフトがW3Cに提出されました。http://dev.w3.org/2006/webapi/FileAPI/このような感じで利用するようです。<input type="file" />セキュリティについてhttp://dev.w3.org/2006/webapi/FileAPI/#security-discussionシステムのファイル(/etc/passwdみたいなもの)や実行ファイルなどにアクセスできないようにするようです。
16. [2009-09-12-1]

Webページの画面遷移前にJavaScriptで確認メッセージを表示する方法[JavaScript]

このドキュメントの内容は、以下の通りです。サンプルコードWebページで画面遷移するときに、確認メッセージを表示する場合には、JavaScriptでonbeforeunloadを利用することができます。JavaScriptなので、JavaScriptがオフのときには、当然利用できません。サンプルコード<html><head><title>onbeforeunload</title></head><body><form><input type="submit" value="Send"></form><a href="onbeforeunload.html">self</a></body></html><script type="text/javascript">window.onbeforeunload = function(event){return 'Are you OK?';}</script>
17. [2008-07-16-1]

JavaScript 連想配列をfor inで回す方法[JavaScript]

JavaScriptの連想配列をfor inで回す方法について紹介します。サンプルコード変数hashに連想配列を作成します。for inでhashを回します。iには、ハッシュのキーが入ります。キーを元にhashの値にアクセスすることができます。<script type="text/javascript">var hash = {a: 'abc',b: 'def'};for ( var i in hash ) {alert ( i + ' ' + hash[i] );}</script>
18. [2008-07-05-2]

JavaScriptで右クリックのコンテキストメニューを禁止する方法[JavaScript]

ページ内で右クリックを禁止しているケースがあります。ソースコードを隠すという意味では、ブラウザにソースコードを表示するメニューがあったりするので、特に意味がありません。右クリックでコンテキストメニューの表示を禁止するには、onContextMenu="return false;" を使用します。例えば、ページ全体で、右クリックを禁止するには、bodyタグにonContextMenuを指定します。<bodyonContextMenu="return false;">関連[2008-07-05-2] JavaScriptで右クリックのコンテキストメニューを禁止する方法[2008-07-05-1] JavaScriptでinputタグで貼り付けC-vを禁止する方法
19. [2008-07-05-1]

JavaScriptでinputタグで貼り付けC-vを禁止する方法[JavaScript]

お客様に確認のために2回同じものを入力させるページを作成しているときに、2回目の確認用の入力ボックス(input)に1つめの内容をコピー&ペーストされてしまうと、2回目の確認の意味がなくなってしまいます。C-cでコピーして、C-vで貼り付けるのを禁止する方法を紹介します。しかしながら、マウスでコピー&ペーストされるのは防げません。サンプルコード<input type="text"onKeyDown="if( (event.ctrlKey == true)&& (event.keyCode==86)){return false;}" name="q" value="">実行例JavaScriptがオフだと動きません。コンテキストメニューを使わせないためには、onContextMenuを使用します。サンプルコード<input type="text"onKeyDown="if( (event.ctrlKey == true)&& (event.keyCode==86)){return false;}"onContextMenu="return false;"name="q" value="">実行例JavaScriptがオフだと動きません。関連[2008-07-05-2] JavaScriptで右クリックのコンテキストメニューを禁止する方法[2008-07-05-1] JavaScriptでinputタグで貼り付けC-vを禁止する方法
20. [2008-06-12-2]

IEとJavaScriptでクリップボードの内容の変更や取得をする方法[JavaScript]

MicrosoftのInternet Explorer(IE)では、JavaScriptでクリップボードの内容を取得したり、クリップボードに任意の値をセットすることができます。クリップボードに文字列をセットするクリップボードにデータをセットするには、clipboardData.setData()を使用します。clipboardData.setData("Text", "hoge");クリップボードの内容を取得するクリップボードの内容を取得するには、clipboardData.getData()を使用します。var s = clipboardData.getData("Text");サンプルコードクリップボードの内容を表示したり、クリップボードにあたいを書き込むサンプルコードを下記に示します。<html><head><title>clipboard</title></head><body><h1>show clip board</h1><button onclick="show();">show</button><div id="info" style="border: 1px solid black">&nbsp;</div><h1>set clip board</h1><button onclick="set();">set</button><br><input type="text" name="data" value=""><script type="text/javascript">function set(){var d = document;var e = d.getElementById("data");if(e) {var s = e.value;clipboardData.setData("Text", s);}}function show(){var s = clipboardData.getData("Text");var d = document;var e = d.getElementById("info");if(e) {e.innerHTML = s;}}</script></body></html>デモclip boardの内容を表示するクリップボードの内容を表示します。 clip boardに値をセットする下記の入力欄にクリップボードに入れた文字列を入れて、ボタンを押してください。クリップボードに値をセットするfunction CB_test_set(){var d = document;var e = d.getElementById("new_clip_board_data");if(e) {var s = e.value;clipboardData.setData("Text", s);}}function CB_test_show(){var s = clipboardData.getData("Text");var d = document;var e = d.getElementById("clip_board_content");if(e) {e.innerHTML = s;}}IEでは、動きますが、FireFoxでは動きません。
21. [2008-06-08-2]

JavaScript jQueryでJSONPを扱う方法 $.ajax[JavaScript][jQuery]

このドキュメントの内容は、以下の通りです。ajaxの使用例サンプルプログラム実行例JavaScriptライブラリ jQueryでJSONPを扱うには、$.ajaxを利用します。ajaxの使用例callback関数は、jQueryが自動的に生成してくれます。<script type="text/javascript">$.ajax({url: "http://example.com/jsonapi",dataType: "jsonp",data:{param1: value1,param2: value2},success:function(json){// 正常時にここが実行されます。},error:function(){alert('error');}});</script>callback関数を指定するパラメータがcallbackでない場合は、jsonpというパラメータで指定してやります。<script type="text/javascript">$.ajax({url: "http://example.com/jsonapi",dataType: "jsonp",data:{param1: value1,param2: value2},jsonp: "jsonp_callback",success:function(json){// 正常時にここが実行されます。},error:function(){alert('error');}});</script>サンプルプログラムGoogle Open Social Graph APIを利用した例です。<div id="info"></div><script src="http://www.google.com/jsapi"></script><script type="text/javascript">function showSocialGraph(url,d){var rss = d['nodes'][url]['attributes']['rss'];var profile = d['nodes'][url]['attributes']['profile'];$('#info').html(rss + '<br>' + profile);}function getSocialGraph(url){$.ajax({url: "http://socialgraph.apis.google.com/lookup",dataType: "jsonp",data:{q: url},success:function(json){showSocialGraph(url,json);},error:function(){alert('error');}});}function init(){getSocialGraph("http://twitter.com/kunnpuu");}google.load("jquery", "1");google.setOnLoadCallback(function() {init();});</script>実行例function showSocialGraph(url,d){var rss = d['nodes'][url]['attributes']['rss'];var profile = d['nodes'][url]['attributes']['profile'];$('#jquery_info_social_graph').html(rss + '' + profile);}function getSocialGraph(url){$.ajax({url: "http://socialgraph.apis.google.com/lookup",dataType: "jsonp",data:{q: url},success:function(json){showSocialGraph(url,json);},error:function(){alert('error');}});}function init(){getSocialGraph("http://twitter.com/kunnpuu");}google.load("jquery", "1");google.setOnLoadCallback(function() {init();});jQeuryを使うと簡単に、JSONPを扱うことができますね。
22. [2008-05-24-2]

JavaScriptでスタイルシートを読み込む方法[JavaScript]

JavaScriptでスタイルシートの外部ファイルを読み込む方法について。JavaScriptでlinkタグを作って、ヘッダにappendChildします。サンプルコード<html><head><title>css load</title></head><body><h1>CSS load</h1><p id="contents">CSS loader.</p></body><script type="text/javascript">var d = document;var link = d.createElement('link');link.href = 'http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css';link.rel = 'stylesheet';link.type = 'text/css';var h = d.getElementsByTagName('head')[0];h.appendChild(link);</script></html>
23. [2008-05-24-1]

JavaScriptでscriptファイルを読み込む方法[JavaScript]

JavaScriptでJavaScriptの外部ファイルを読み込む方法について。JavaScriptでscriptタグを作って、ヘッダにappendChildします。異なるドメインのJavaScriptファイルもロードできます。サンプルコード<html><head><title>js load</title></head><body></body><script type="text/javascript">var d = document;var js = d.createElement('script');js.src = 'http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js';var h = d.getElementsByTagName('head')[0];h.appendChild(js);</script></html>
24. [2008-04-25-1]

JavaScript jQueryで最後のDOMを削除する方法 remove()[JavaScript][jQuery]

下記のように divの中にいくつもdivがあって、最後のdiv(Message 5)をJavaScriptのライブラリ jQueryで削除したいときに<div id="messages"><div class="message" id="message">Message 1</div><div class="message" id="message">Message 2</div><div class="message" id="message">Message 3</div><div class="message" id="message">Message 4</div><div class="message" id="message">Message 5</div></div>lengthで配列のindexを取得して、$(".message").length-1indexの値を利用して、remove()を呼ぶと、Message 5のdivを削除することができます。$($(".message")[$(".message").length-1]).remove(); サンプルソースclass名 messageがいくつもあるときに、最後のdivを削除する例。<html><head><title>jQuery</title></head><body><div id="messages"><h1>Messages</h1><div class="message" id="message">Message 1</div><div class="message" id="message">Message 2</div><div class="message" id="message">Message 3</div><div class="message" id="message">Message 4</div><div class="message" id="message">Message 5</div></div></body><script type="text/javascript" src="jquery-1.2.3.min.js"></script><script type="text/javascript"><!--$(document).ready(function(){$($(".message")[$(".message").length-1]).remove(); });//--></script></html>
25. [2008-04-24-2]

JavaScript jQueryで要素を削除する remove()[JavaScript][jQuery]

JavaScriptのライブラリ jQueryでDOM要素を削除するには、remove()を利用します。サンプルコードid=messageのdivが消します。<html><head><title>jQuery</title></head><body><div id="message">Remove</div></body><script type="text/javascript" src="jquery-1.2.3.min.js"></script><script type="text/javascript"><!--$(document).ready(function(){$('#message').remove();});//--></script></html>
26. [2008-04-21-2]

jQuery エレメントの前にコンテンツを挿入する方法 before()[JavaScript][jQuery]

HTMLのなんらかのエレメントの前に、JavaScriptでコンテンツを挿入したいことがたまにあります。jQueryは、あるエレメントの前に簡単に別のコンテンツを挿入することができます。1つのdiv#messageの前にコンテンツを挿入するには、jQueryのbefore()を使います。サンプルコード<html><head><title>jQuery</title></head><body><div id="messages"><h1>Messages</h1><div class="message" id="message">Message 1</div><div class="message" id="message">Message 2</div></div></body><script type="text/javascript" src="jquery-1.2.3.min.js"></script><script type="text/javascript"><!--$(document).ready(function(){$("#message").before("<p>Hello</p>");});//--></script></html>JavaScriptでガリガリ、createElementして、insertBeforeをするよりも非常に簡単に書けます。
27. [2008-04-21-1]

JavaScript エレメントの前にコンテンツを挿入する方法 insertBefore()[JavaScript]

JavaScriptでHTML内の特定コンテンツの前に、別の情報を挿入するケースがあります。たとえば、最初のdiv#messageの前に対して、コンテンツを挿入したい場合<div id="messages"><div class="message" id="message">Message 1</div><div class="message" id="message">Message 2</div></div>エレメントに対して、insertBefore()を使うことで、messageの前に別のコンテンツを挿入することができます。サンプルコードmessageの前にコンテンツを挿入するサンプルコード。<script type="text/javascript"><!--var d = document;var e = d.getElementById('message');var div = d.createElement("div");div.innerHTML="hoge";e.insertBefore(div, e.firstChild);//--></script>
28. [2008-04-19-2]

jQueryで子ノードにアクセスする方法 children[JavaScript][jQuery]

jQueryで直接の子ノードを調べるには、$('#messages').children();で調べられます。children( [expr] );こういうHTMLがあるときに、<div id="messages"><div id="message1">div 1</div><div id="message2">div 2</div><div id="message3">div 3</div><div id="message4"> <div id="sub">sub</div> </div><p id="p1">p1</p></div>children()は、下記を返します。[div#message1, div#message2, div#message3, div#message4, p#p1]jQueryのchainを使って、子ノードを書き換えてみます。$('#messages').children().html('My Child');#messagesの子のdivだけを書き換えるには、children()にexprを指定します。$('#messages').children('div').html('My Child');スタイルシートを変えてみる。 $('div#messages').children().css("color", "blue");
29. [2008-04-19-1]

jQuery クリックイベントを追加する[JavaScript][jQuery]

jQueryを使って、クリックイベントを簡単に追加することができます。aタグにクリックイベントを追加する。$("a").click(function(){alert("click a!");} );divでidがmessage2のものにクリックイベントを追加します。$("div#message2").click(function(){alert("click message2!");} );idがmessage3のものにクリックイベントを追加します。$("#message3").click(function(){alert("click message3!");} );click関数を使ったサンプルコード<html><head><title>jQuery</title></head><body><div id="message1">div 1</div><div id="message2">div 2</div><div id="message3">div 3</div><a href="#">a 1</a><br><a href="#">a 2</a><br><a href="#">a 3</a><br></body><script type="text/javascript" src="jquery-1.2.3.min.js"></script><script type="text/javascript"><!--$(document).ready(function(){$("a").click(function(){alert("click a!");} );$("div#message2").click(function(){alert("click message2!");} );$("#message3").click(function(){alert("click message3!");} );});//--></script></html>クリックされたdivのinnerHTMLを書き換えるサンプルコード$("div#message2").click(function(){($this).html('clicked');} );
30. [2008-04-18-1]

jQuery でスライドアップやスライドダウンのアニメーションをする方法[JavaScript][jQuery]

メニューやナビゲーションで、クリックしたらさらに細かいメニューを出したり、隠したりすることがあります。にょきにょきっとメニューをアニメーションさせて、面白いな演出をやったりします。jQueryを使って、スライドアップやスライドダウンのアニメーションを簡単に行うことができます。それぞれ、 slideUp()、slideDown()を呼ぶだけで実現できます。サンプルコード<html><head><title>jQuery</title></head><body><button id="up" onClick="slideUp();">slide up</button><button id="down" onClick="slideDown();">slide down</button><div id="message" style="width: 200px;">Hi Hoge-san, jQueryがすごいよ。アニメーションが非常に簡単にできちゃいます。</div></body><script type="text/javascript" src="jquery-1.2.3.min.js"></script><script type="text/javascript"><!--function slideUp(){$('#message').slideUp();}function slideDown(){$('#message').slideDown();}//--></script></html>slide upのボタンを押すと、messageのエリアがスライドアップし、slide downのボタンを押すと、messageのエリアがスライドダウンします。メニューやナビゲーションなどをアニメーションするのに効果的かと思います。
スポンサーリンク