jQueryでチェックボックスを操作するさまざまな方法

jQueryでチェックボックスのチェック状態や値の取得、チェックを付けたり外したり、チェック数の制限などさまざまな方法をご紹介します。

通常のイベントでは動かない、jQueryイベントで追加したチェックボックスの操作方法なども併せてお伝えします。

 

続きを読む

jQueryでselectタグの値やテキストを取得する

jQueryでセレクトボックスで選択したvalueやテキスト、option要素全部を取得したりと、セレクトボックスでの取得方法をご紹介します。

multipleのセレクトボックスでの複数の値に対応した方法も併せてお伝えします。

 

続きを読む

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

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

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

 

続きを読む

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

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

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

 

続きを読む

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

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

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

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

 

続きを読む

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

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

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

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

 

続きを読む

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

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

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

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

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

 

続きを読む