jQuery 最高の教科書を読んで、 javascript・jQueryを改めて勉強・まとめていこうと思いました。 よく使う「関数」についてまとめてみた。 関数とは 「何らかの一連の処理を行う、複数の命令の集まり（命令群）」 関数は、同一コード内は元より、他のコードからも呼び出すことができる。 繰り返し実行する処理 何度も利用する処理 また、一連の処理をまとめることによって、処理内容を変更する際の手間を大幅に軽減することができる。（保守性） 関数を使用しない場合 $(function(){ $('#typo') .on('mouseover', function(){ // 処理A // 処理B // 処理C }); $('header') .on('mouseover', function(){ // 処理A // 処理B // 処理C }); $('footer') .on('mous

clickイベントが動かない jQueryのclickイベントを使っているとうまく動かないときがある。 元々存在するDOMにclickイベントを設定するときは、期待した通りに動くが、jQueryのappendメソッドなどで後から追加した要素にclickイベントを設定するとクリックをしているのに動かないことがあります。 そういうときは、onメソッドを使うと解決できるので、その方法をご紹介致します。 clickイベントが効かない NGパターン 生成したDOM要素にイベント設定する方法 clickイベントが効かない appendメソッドなどで、動的に要素を追加してその要素にclickイベントを設定しても、全く動かない。 調べてみると、jQueryには、イベントの記述方法が二つあったので、うまくいかない例とうまくいった例を紹介します。 NGパターン clickイベントを設定する簡単な方法は、cli

click イベントはマウスのカーソルが要素の上にある状態で、マウスが押されたあとで離された時に発生するイベントです。 onclick 属性または onclick プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として click を指定してイベントリスナーを登録できます。ここでは JavaScript を使って click イベントが発生した場合の処理を記述する方法について解説します。

イベントリスナーのコールバックの中でクリックされた要素が何番目の要素か知りたい! そういうときに役立つ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!'); });