jQueryでクリックされた要素が何番目か取得する - Qiita
イベントリスナーのコールバックの中でクリックされた要素が何番目の要素か知りたい! そういうときに役立つTipsです。 <ul> <li class="some-item">hoge</li> <li class="some-item">foo</li> <li class="some-item">bar</li> </ul> こんな感じのHTMLがあり、li.some-item要素がクリックされたときに何番目の要素かをjQueryを使って知りたいとします。 そんなときはjQueryのindexメソッドを使いましょう。 $('li.some-item').on('click', function(){ var index = $('li.some-item').index(this); console.log(index + 'th item clicked!'); });
window.parent - Web API | MDN
WindowインスタンスプロパティcachesclosedconsolecookieStorecredentiallesscrossOriginIsolatedcryptocustomElementsdevicePixelRatiodocumentdocumentPictureInPictureeventexternalfence Experimental frameElementframesfullScreenhistoryindexedDBinnerHeightinnerWidthisSecureContextlaunchQueue Experimental lengthlocalStoragelocationlocationbarmenubarmozInnerScreenXmozInnerScreenYnamenavigation Experimental navigatoropen
iframe 内のウィンドウから親ウィンドウの要素を操作するには！？ - Web.fla
iframe内への記述になります。 iframe内から親ウィンドウの要素にアクセスできるか実験のためのボタンを設置 Box1の背景色を変える iframe内にjavascriptを記述して、そこから親ウィンドウの要素を取得できるかどうかのコード。 今回は、直接htmlファイルに記述しましたが外部ファイル化してもいいです。 window.addEventListener("load",function(){ //iframe内のボタン var btn1=document.getElementById("btn"); //親ウィンドウにあるボタン! var btn2=window.parent.document.getElementById("btn2"); //親ウィンドウにあるbox1の要素 var box1=window.parent.document.getElementById("b
[jQuery] Enterキーでフォーカスを移動するには
Enterキーでフォームを送信したくない時は あるWebアプリケーションのフォームで、Enterキーを押してもSubmitされない様にする必要があって、ちょっと調べた。 リターン（Enterキー）でフォームを送信しない方法: 小粋空間 とりあえずこの記事の「４．押されたキーを判定して抑止する」の所に書いてある方法で対応出来た。 Enterキーで次のフィールドにフォーカスを移動するには 次に、どうせならEnterキーで次のフィールドにフォーカスを自動で移動させたいな～、という事になった。やってみたら、jQueryのおかげでこんな感じで割りと簡単に出来た。 Enterキーが押された時にfalseを返すのではなくて e.preventDefault() を使う様に変えた。その理由はこちらを参照。 Shift＋Enterキーにも対応するには さらについでにShift+Enterキーでの逆順の移動に
黒魔術（JavaScript）まとめ - Qiita
まえがき JavaScript、書いてますか？ JavaScriptは今や世界中の人々に愛されています。 stackoverflowの2016年の調査によるとJavaScriptは地球上で最も一般的に使用されているプログラミング言語だそうです。 JavaScript is the most commonly used programming language on earth. Even Back-End developers are more likely to use it than any other language. link しかしJavaScriptは愛されすぎているが故、しばしば黒魔術のようだと比喩されることも少なくありません。 愛と憎しみが紙一重とはこのことですね。 ということでそんなこんなはどうでもいいのですが、自分もJavaScriptは大好きです。 今回は黒魔術まと
JavaScript: window.open() 小窓の基礎
window.open()で小窓 いわゆる小窓です。これはJavaScriptの window.open() というメソッドで 小窓となるウィンドウを生成します。 各引数の文字列は一重引用符または二重引用符で括って指定します。 第１引数「URL」は生成されるウィンドウに表示するページのURLです。 ※ ウィンドウに表示するページ（別のファイル）は別途作成して用意しておきます。 第２引数「ウィンドウ名」は特に指定する必要がなければ null で良いでしょう。 ウィンドウ名を指定するときは引用符で括ります。 ※ null を指定するとウィンドウ名の設定されていない新規ウィンドウとなります。 (HTMLの属性 target="_blank" と同等です) 例: window.open('example.html', null); 第３引数「オプション」はウィンドウの特徴を設定する文字列です。 こ
経過時間をconsoleで手軽に計測するJavaScript - Qiita
console.time('a'); // 識別子を与えないと動かない // 処理… console.timeEnd('a'); Chrome, Safari, Firefoxに加え、IEも11から利用可能。 コンソールじゃないところに時間を出力するなら、 自前で計測する。 経過時間を順次取得するJavaScript - Qiita [キータ] Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
JavaScript：処理時間計測方法 - 覚え書き.com
JavaScriptでの処理時間計測方法をご紹介します。 JavaScriptで処理時間を計測する方法としては主に「console.time()を使用する方法」と「Dateオブジェクトを使用する方法」があります。 console.time()を使用する方法
jQueryの基本 - $(document).ready - Qiita
これは画像などを除いて、HTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行するという意味です。 jQuery(JavaScript)はHTMLが完全に読み込まれないまま何か処理を実行すると大抵正しく動作しません。なのでこのreadyを使うことになります。 $(function(){ //なにかしらの処理 }); jQuery(document).ready(function() { //なにかしらの処理 }); jQuery(function(){ //なにかしらの処理 });
kazunori-lab.com - kazunori lab リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
JSON.parse に渡せるJSON文字列が厳密すぎて使いにくい件 - 超自己満足プログラミング
JSON文字列をオブジェクトに変換してくれる JSON.parse() を使ってみたが、 かなり使いにくく感じた。 というのも、 JSON.parse("{hoge: 1}"); // error これがSyntaxErrorになる*1 JSON.stringify() が厳密なJSON文字列をくれるらしいので、 どう書けばよかったのか、回答を頂く。 JSON.stringify({hoge: 1}); // {"hoge":1} 試す。 JSON.parse('{"hoge":1}'); // ok でも、文字列をシングルクオートにすると、 JSON.parse("{'hoge':1}"); // error SyntaxErrorになる。 値が文字列の場合も同様。 JSON.parse('{"hoge":"foo"}'); // ok JSON.parse('{"hoge":' + "
演算子 || の特殊な使用方法 [Java Script - 基本 - Tips]
1. [基本的な使い方] 『||演算子』 は通常、if文のOR演算子として使用されます。 [サンプルソース1] var a = 0; // 変数aの値が0、もしくは1の場合メッセージを表示する if (a == 0 || a == 1) { alert("HIT"); } 2. しかし、実際には以下の仕様に基づいて動作しています。 左辺の値が真(true)の場合は左辺の値を、偽(false)の場合は右辺の値を返す。 つまり、[サンプルソース1]は左辺（a == 0）が真(true)なので、結果、if文がtrueになるわけです。 3. [ひねった例] 上記仕様を利用すると、以下のように初期値を設定する事が可能です。 [サンプルソース2] function test1(arg) { arg = arg || 30; ： ： } この例では、引数が渡されてきている場合は引数の値が使用され、渡され
JavaScript の Date は罠が多すぎる - Qiita
JavaScript で日付・時間を扱っていて、次から次へと罠にはまったので、あとから来る人のために書き留めておく。 Date.parse が返すのは Date でなく整数 Date.parse は、世界協定時 1970 年 1 月 1 日 00:00:00 からの経過時間をミリ秒単位で返す。 Date を得るには new Date に渡す。 new Date に直接文字列渡しても同じ挙動なので、こちらのが簡潔。 msec = Date.parse("Thu, 06 Sep 2012 00:00:00 +0900"); // 1346857200000 date = new Date(msec); // Date date = new Date("Thu, 06 Sep 2012 00:00:00 +0900"); // Date
element.offsetParentプロパティ - JavaScript（ジャバスクリプト）リファレンス
サンプルの動作について 黄色のボックス要素をクリックすると、position属性がrelativeで、黄色のボックス要素から最も近い祖先要素であるのは、緑色のボックス要素なので、「最も近い祖先要素の背景色：」の右側の「■」を緑色にする。 紫色のボックス要素をクリックすると、position属性がrelativeで、紫色のボックス要素から最も近い祖先要素であるのは、青色のボックス要素なので、「最も近い祖先要素の背景色：」の右側の「■」を青色にする。 サンプルのソースコード <script> window.onload = function () { document.getElementById( "sample-div-yellow" ).onclick = offsetParentA; document.getElementById( "sample-div-purple" ).oncl
エラー箇所など指定した要素にスクロールで移動する
photo by mollyali 縦長Webページの入力フォームなどで、バリデーション後にエラーを表示したいことがある。その方法はいくつもあるが、今回はエラー箇所にスクロールで移動する方法を実装する。 ※サンプルではjQueryを使用しているが、使わなくても対応可能（アニメーションが面倒だけど） 特定の要素にスクロールで移動する var position = $('セレクタ').get(0).offsetTop; $('body').animate({scrollTop: position}, 'slow'); 要素の位置を取得するには $('セレクタ').get(0).offsetTop を使う。 $('セレクタ').offset().top で位置を取得するとズレる場合があるので注意。 また、複数ある要素のうち1番目に移動したい場合は、 $(‘セレクタ:first’).get(0).
いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サブウィンドウから親ウィンドウをリロードする
[Chrome] console.log()の色々な書き方 - Qiita![[Chrome] console.log()の色々な書き方 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/326db24cbd43a92774b4e6870611975e376cdca8/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQ2hyb21lJTVEJTIwY29uc29sZS5sb2clMjglMjklRTMlODElQUUlRTglODklQjIlRTMlODAlODUlRTMlODElQUElRTYlOUIlQjglRTMlODElOEQlRTYlOTYlQjkmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTAxNmNmZjA0NDZkYTAzMjBjMmJkYmMzN2MzNDMwZWUw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBuYWtham1nJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wM2Y4NjFiOTk5NjY1ZDQ0MmZkM2I2M2NhNjUyMTAyNQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D71e66f9fa8dddc80d2c4fe4fffc880b2)
setTimeoutの削除【JavaScript】 - あぷすた - iPhoneとWebとプログラミングと
Javascriptで前のページに戻るを実装 - Qiita
