jQueryでtextareaの値はvalで取得する

HTMLのtextareaは

<textarea>abc</textarea>

と書きます。
jQueryでは、このようにタグで挟む場合は.html()で値を取得できます。
しかしtextareaの場合は.val()で取得します。

実際に試してみたところ、.val()、.text()、.html()のいずれでもtextareaの値を取得することができました。
しかし、textareaの内容を書き換えてから取得すると、書き換えた後の値を取得できるのは.val()だけでした。

一方、値のセットについては、やはりいずれの場合でもセットすることができました。
しかし、.text()と.html()では、一度、セットした後、再度セットしようとすると正しく動作しませんでした。.val()ならば意図通り動作します。

jQueryでtextareaの値を取得したりセットしたりする場合は.val()を使うのが確実です。

なおChromeとFirefoxでは上述のような動作をしますが、IEでは.text()と.html()でも.val()と同じ動作をします。

目次を自動的に生成するjQueryプラグイン

HTMLで書いたページに目次を自動的に追加するjQueryプラグインです。
h1-h6で記載した見出しを抽出し、目次を作成します。
目次には見出しへのリンクが設定されます。
このプラグインは二つのコードからできています。 (さらに…)

複数のテキストボックスの値を結合

テキストボックス(inputタグ)が大量にあって、これらをパラメータとしてPHPのファイルに送信する必要に迫られました。
一つずつnameを付けるのが基本ですが長くなるので、CSVとして渡し、配列化して使いたいと思います。 (さらに…)

ピボットテーブルを表示するjQueryプラグイン

Excelにはピボットテーブルという機能があります。クロス集計と呼ぶ人もいます。
これをHTMLのテーブルで再現するjQueryプラグイン「jquery.pivot.js」を作りました。 (さらに…)

jQueryでチェックボックスを操作

前にも書いたことがあるかもしれませんが、jQueryでチェックボックスを操作する方法をまとめます。

次のHTMLのようなチェックボックスがあったとします。 (さらに…)

jQueryでattrの代わりにpropを使う

jQueryの1.9の変更点を調べていて大事なことに気付きました。
jQueryでclassなどを書き換えるときには「attr」を使っていましたが、実は1.6から非推奨になっていました。
代わりに「prop」を使います。使い方は同じようです。

次のようなHTMLがあったとします。

<div id="mydiv">test</div>

jQueryで次のようにするとclassをセットできます。

$("#mydiv").attr("class","apple");

※jQuery1.9.1で確認しました。

ページを開いたときにメッセージを表示するjQueryプラグイン

ウェブページを開いたときに注意メッセージを表示するjQueryプラグイン「jquery.opening.js」を作りました。
ページを開いたときにメッセージが表示されます。メッセージは変更できます。
「今後はこのメッセージを表示しない。」にチェックすると次回からは表示されません。クッキーを利用しています。

使い方

  1. プラグイン(jquery.opening.js)をダウンロードします。
  2. 別途、Downloads · carhartl/jquery-cookie · GitHubでjquery.cookie.jsをダウンロードします。※jQueryでcookieを使う | You Look Too Cool
  3. HTMLを書きます。後述のサンプルを参考にしてください。
  4. これらを同じフォルダに保存します。

(さらに…)

祝日に対応したカレンダーを挿入するjQueryプラグイン

JavaScriptで日本の祝日を判定する関数を書いたので、ついでにカレンダーを挿入するjQueryプラグインを書いてみました。
使い道がよく分からないですが。

プラグインです。
jquery.calendar_jp

年間カレンダーを作るサンプルです。
sample1

一か月カレンダーを作るサンプルです。
sample2

jQueryの最新版にリンクする

通常、jQueryを使うときは、公式サイトなどから「jquery.min.js」などをダウンロードして自分のサーバに置いておきます。
しかし、最近は、外部のサイトにリンクして使う方法が主流のようです。

本家に色々と用意されています。
jQuery CDN - provided by (mt) Media Temple

次のようにして使うと常に最新版を使うことができます。現在は1.8.3です。

<script src="http://code.jquery.com/jquery.min.js"></script>

次のリンク先は本家では紹介されていませんが、同様に使うことができます。

<script src="http://code.jquery.com/jquery-latest.js"></script>

ただ、この手法には「外部のサイト」のサーバがダウンしないこと、という条件が付きます。

そういう意味ではGoogleの方が堅牢かもしれません。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

こちらは「常に最新版」というわけにはいきませんが、バージョンによってはプラグインが動かなかったりするケースもあるので、バージョンを固定して使いたい場合には意味があります。

「jQuery Calculator」を日本語化

前にjQuery用プラグイン「jQuery Calculator」を紹介しました。
You Look Too Cool » 電卓として使えるjQuery用プラグイン「jQuery Calculator」
元は英語ですがドイツ語、中国語などに変換する仕組みがあります。
日本語については対応していなかったので、勝手に作ってみました。 (さらに…)

古い記事

タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報