jQuery

jQueryでプラグインに頼らず、簡単にタブメニューを実装する方法のご紹介です。

プラグインを使わなくても意外と簡単に実装できますので、ぜひ試してみてください。

CSSでデザインする方法と、画像を使う方法の2パターンをご紹介します。

続きを読む

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

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

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

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

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

続きを読む

jQueryのload()を使えば、他のページからテキストなどを引っ張ってくることができます。

今回はコンテンツを引っ張ってくる方法、エラーの対処法や注意点などをお伝えします。

続きを読む

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

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

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

続きを読む

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

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

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

続きを読む

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

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

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

続きを読む

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

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

続きを読む

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

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

続きを読む

フォームなどで一時的に操作できないようにするdisabledをjQueryを使って設定する方法です。

attr()だとうまく動作しなかったりするため、prop()を使うようにしましょう。

続きを読む

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

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

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

続きを読む