jQueryでhtml()やtext()を使った追加方法

jQueryでHTMLにテキストを追加するtext()や、要素ごと追加するhtml()、要素をコピーして追加するclone()を使った方法をご紹介します。

その他、要素の挿入や削除も併せてお伝えします。

 

続きを読む

jQueryのnext()やprev()などで兄弟要素を取得

ボタンをクリックしたらその横の要素だけ色を変えたり、ズラリと並ぶタブのうち、クリックした兄弟の要素だけ表示させたりなど$(this)と併用して使うことが多いですね。

次の要素だけでなく、前の要素や、次以降の特定の要素、自要素以外の兄弟要素など、用途によっていくつかメソッドが用意されていますので、それらを見ていきましょう。

 

続きを読む

jQueryでスムーススクロールとトップへ戻るを簡単自作

ページ内リンクやトップへ戻るボタンを使い、ページ内をヌルヌルっとアニメーションスクロールする簡単な方法をご紹介します。

プラグインは使わず、少ない行数で実現できます。

ソースコードの解説も併せてご紹介しますので、プラグインに頼らず、自力で導入してみませんか?

 

続きを読む

jQueryのscrollTop()でスクロール量を取得

jQueryのscrollTop()を使えばスクロール量を取得できます。

ページのトップへ戻るボタンなど、スクロール系のイベントでよく使いますね。

scrollTop()で、所定の位置にスクロールさせることもできます。

 

続きを読む

jQueryでコンソールログを使ったデバッグ方法

jQueryでどのように動作したかなどのデバッグをする際、アラートを使うことが多いかと思います。

ただ、毎回アラートがピコンピコン出るのは煩わしいですね。

そこで、ブラウザのコンソールを使ったデバッグをご紹介します。

ブラウザ上の表示は何も変わりませんが、コンソールと呼ばれる箇所に結果が出力されるため、デバッグに最適ですね。

 

続きを読む

jQueryのfor文で繰り返し処理(continue,breakも)

jQueryでfor文を使った繰り返し処理の書き方です。

continuebreakeを使えば、途中のループを1つ飛ばしたり、途中で終了させたりもできます。

for文のパフォーマンスを考慮して書く方法も併せてご紹介します。

 

続きを読む