« Arrayオブジェクトのメンバについて | ホーム | 【2】就活で見かけるあの機能|jQueryを読解する »

2011年4月 3日

【1】jQueryを読解する

jQueryへの理解をしっかりと定着させるため、人気のあるjQueryを使った技を読み解きたいと思います。
今日読み込むのは、以下のコードです。
Webクリエイターボックスより引用
$(function(){
     $("a[href^='http://']").attr("target","_blank");
});
http:// で始まるリンク先を、自動的に別ウィンドウで表示させるようにするスクリプトです。

$(function(){ });

基本中の基本ですが、jQueryを使うときに必ず見る$(function(){ });とは、何なのでしょうか?
$(function(){ }) の中身は、HTMLドキュメントの準備が出来た段階で実行されます。昔のjQueryでは、このような表現はなく、ready() メソッドを使っていたそうです。
$(document).ready(function(){ });と同義であり、読み込んだら即実行させることのできる、手軽で便利な書き方なのです。

$("a[href^='http://']").attr("target","_blank");

では、読み込んだら即実行させる内容を読解します。

$(○○○○).□□(△△);という構文は、
○○○○に、△△という属性(クラスなど)を□□する。という意味です。

ここでは、
<a>タグで、hrefによるリンク指定がhttp://から始まるもの(外部リンク)
に、
target="_blank"(別ウィンドウでリンクを表示)という属性
を、
追加する
という意味になります。

タグ名[属性 = 'value']とすることで、実行するタグの属性を絞り込むことができます。
絞り方も以下のように、色々あります。
  1. 「^= 'value'」'value'から文字列が始まる場合
  2. 「$= 'value'」'value'という文字列で終わる場合
  3. 「*= 'value'」'value'という文字列を含む場合
  4. 「!= 'value'」'value'という文字列を含んでいない場合

.attr("target","_blank")

jQueryの日本語リファレンスによると、
attr(key,value)
属性の名前(key)に属性の値(value)を渡して、指定した要素に属性を設定する。
とあります。
.attrの()内の書き方で、意味も少し変わってくるので、よく理解しなくてはいけませんね。。。

OpenID対応しています OpenIDについて

このブログ記事について

このページは、HAKASHUNが2011年4月 3日 13:46に書いたブログ記事です。

ひとつ前のブログ記事は「Arrayオブジェクトのメンバについて」です。

次のブログ記事は「【2】就活で見かけるあの機能|jQueryを読解する」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。