次のようなHTMLがあったとします。
<select>
<option>a</option>
<option value="x">b</option>
<option>c</option>
<option>d</option>
</select>
このとき、jQueryで、次のようなコードを使うとどうなるでしょうか。
2番目のオプション「b」が選択状態になります。
「このselectの値を「x」にする」というような感じです。
しかし次のようにvalueがセットされていない場合でも動作します。
<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>x</option>
</select>
4番目のオプション「x」が選択されます。
<option value="あ">い</option>
この場合、JavaScriptでは「.value」を使うと「あ」、「.text」を使うと「い」となりますが、jQueryで「.val()」を使うと、両方が該当するようです。
では、valueとtextの両方に「x」がある場合はどうなるでしょうか。
<select>
<option>a</option>
<option value="x">b</option>
<option>x</option>
<option>d</option>
</select>
3番目のオプション「x」が選択されます。最後に該当するものが選択されるようです。
別のオプションのvalueとtextに同じ値をセットすることはまずないと思いますが。
なお次のようにしても正しく動作しません。
jQueryでstyleで指定したフォントの色に関する情報は次のようにして得られます。 (さらに…)
今、GoogleやYahoo!のAPIについて調べているのですが、その中でウィキペディアの検索結果を取得できるAPIがあることを知りました。
WikipediaAPI - ウィキペディア情報をサイトで利用できるAPI
5年も前からあるのですね。
どんな動きをするのか、サンプルを作って確認してみました。jQueryを使っています。 (さらに…)
TwitterAPIを使うと自分のツイートなどが簡単に取得できます。
またjQueryを使うとこれをブラウザに簡単に表示できます。
そのための最低限のサンプルを紹介します。 (さらに…)
jQueryを使って年表を作成する「Timeglider」を紹介します。
Timeglider: Web-based Timeline Software
試しにTOKIOとSMAPと嵐のメンバーを年表に表してみました。 (さらに…)
HTMLで、最初は見出しだけが表示されていて、クリックするとその見出しの配下が表示されるページを作ってみます。
jQueryを使います。
HTMLは次の通りです。
<h2>見出し2</h2>
<h3>見出し3</h3>
<p>本文。</p>
<h2>見出し2</h2>
<h3>見出し3</h3>
<p>本文。</p>
配下と言ってもh2とh3とpは親子関係にはありません。
このような場合はnextUntilを使います。ある要素からある要素までを取得します。
正確には「ある要素の次からある要素の前まで」ですので、ちょうど要素に挟まれた部分を取得できるのです。
サンプルコードは次の通りです。
$("h2").nextUntil("h2").hide();
$("h2").click(function(){
$(this).nextUntil("h2").toggle("fast");
});
まず、h2とh2に挟まれた部分を非表示にしておきます。
次に、h2をクリックすると、クリックした部分(this)と次のh2に挟まれた部分にtoggleを適用します。toggleは表示と非表示を交互に行います。