jQueryのposition()で相対位置を取得する

jQueryのposition()は要素の位置を取得するメソッドですが、offset()と混同しがちですね。

offset()はドキュメントの左上を起点にしているのに対し、position()はオフセットの相対関係のある親要素を起点にしています。

絶対位置と相対位置の違いですね。

同じ要素内に別の要素を配置する場合はposition()が便利でしょう。

参考:jQueryのoffset()で表示位置の取得と要素の移動

 

続きを読む

jQueryでreplace()を使って置換・削除する

ネイティブのJavaScriptメソッドreplace()を使って、特定の文字列を別の文字に置換したり、削除する方法です。

複数の要素・文字列の処理、その他便利なjQueryメソッドも併せてご紹介します。

取得した文字列を一部書き換えたり削除したり、改行コードを置換したりと実際に使うことも多いかと思いますが、簡単に処理できますのでマスターしたいですね。

 

続きを読む

jQueryで簡単にフェードイン・フェードアウトをする方法

テキストや画像をフワッと出現させるfadeIn()やスーッと消したりするfadeOut()それらを交互に処理してくれるfadeToggle()を中心にご紹介します。

jQueryで記述してもいいのですが、個人的にアニメーションなどの装飾的な部分はCSSのアニメーションで処理することが多く、classを付与して動作させる方法も併せてご紹介します。

とても簡単に実装可能ですので、試してみてください。

 

続きを読む

jQueryのresize()でリサイズされたら処理

ブラウザの幅や高さが変更されたら検知して処理してくれる便利なメソッドがresize()です。

常に画面の中央にタイトルを表示させたい場合に使いました。

ただ$(window)以外の要素には使えないので注意しましょう。

 

続きを読む

jQueryのprop()でプロパティの設定・取得

HTML属性を取得するattr()ではチェックなどの動的な動作に対応していなかったり、フォーム周りで上手く取得できないことも多かったため、フォームのプロパティを取得したり設定するために、jQuery 1.6よりprop()が追加されました。

checkeddisabledselectedなどのプロパティはprop()で操作するようにしましょう。

 

続きを読む

jQueryのattr()でHTML属性の設定・取得・削除

jQueryでHTML属性を操作するattr()の使い方です。

idを取得したりhrefを設定したりなど、HTML属性の取得、複数の属性の設定、removeAttr()を使った属性の削除、またフォームでの不具合などについてご紹介します。

 

続きを読む

jQueryのchange()で値が変更されたら発動

jQueryのchange()はテキストボックスやチェックボックスのvalue値が変更されたら、その時点で発動してくれます。

プルダウンを切り替えるたびに発動させたり、テキストボックスに変更を加えるたびに処理させたり、ボタンをクリックしなくても発動させることができるので便利ですね。

動的に追加したフォームにもchange()を適用させる方法もご紹介します。

 

続きを読む

jQueryのblur()でフォーカスが外れたら発動

jQueryのblur()はフォーカスが外れたらイベントを発動させ、メールフォームのバリデーションなどに使えますね。

逆にフォーカスされた際に発動させたり、動的に追加したフォームにblur()を効かせる方法なども併せてご紹介します。

 

続きを読む