« Arrayオブジェクトのメンバについて | ホーム | 【2】就活で見かけるあの機能|jQueryを読解する »
2011年4月 3日
【1】jQueryを読解する
jQueryへの理解をしっかりと定着させるため、人気のあるjQueryを使った技を読み解きたいと思います。
今日読み込むのは、以下のコードです。
Webクリエイターボックスより引用
$(function(){ }) の中身は、HTMLドキュメントの準備が出来た段階で実行されます。昔のjQueryでは、このような表現はなく、ready() メソッドを使っていたそうです。
$(document).ready(function(){ });と同義であり、読み込んだら即実行させることのできる、手軽で便利な書き方なのです。
$(○○○○).□□(△△);という構文は、
○○○○に、△△という属性(クラスなど)を□□する。という意味です。
ここでは、
<a>タグで、hrefによるリンク指定がhttp://から始まるもの(外部リンク)
に、
target="_blank"(別ウィンドウでリンクを表示)という属性
を、
追加する
という意味になります。
タグ名[属性 = 'value']とすることで、実行するタグの属性を絞り込むことができます。
絞り方も以下のように、色々あります。
.attrの()内の書き方で、意味も少し変わってくるので、よく理解しなくてはいけませんね。。。
今日読み込むのは、以下のコードです。
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']とすることで、実行するタグの属性を絞り込むことができます。
絞り方も以下のように、色々あります。
- 「^= 'value'」'value'から文字列が始まる場合
- 「$= 'value'」'value'という文字列で終わる場合
- 「*= 'value'」'value'という文字列を含む場合
- 「!= 'value'」'value'という文字列を含んでいない場合
.attr("target","_blank")
jQueryの日本語リファレンスによると、
attr(key,value)
属性の名前(key)に属性の値(value)を渡して、指定した要素に属性を設定する。
とあります。属性の名前(key)に属性の値(value)を渡して、指定した要素に属性を設定する。
.attrの()内の書き方で、意味も少し変わってくるので、よく理解しなくてはいけませんね。。。