jQueryを利用してリンクを全て別のウィンドウで開くようにする

javascript

ちょっとしたWebページを作る機会があったので、いい機会と思いjQueryを使ってみました。

本家
jQuery: The Write Less, Do More, JavaScript Library
最新版（非圧縮）
jquery-latest.js
最新版（圧縮）
jquery-latest.pack.js


以下はページ内のリンクを全て別のウィンドウで開くようにするサンプルです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="text/javascript" http-equiv="Content-Script-Type" />
<title>jQuery</title>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  $('a').each(function(){
    jQuery(this).attr({target: '_blank'});
  });
});
//]]>
</script>
</head>
<body>
<p><ul>
<li><a href="one.html">one</a></li>
<li><a href="two.html">two</a></li>
<li><a href="three.html">three</a></li>
</ul></p>
</body>
</html>


clickイベントでウィンドを開く方法もあります。$(document).readyあたりをこんな感じに。

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  $('a').click(function() {
    window.open(this);
    return false;
  });
});
//]]>
</script>


できるあがった瞬間に「おおーっ」ってな感じです。ただ、最初は違和感があるので、実際に手を動かして”体で慣らしていく”必要を感じました。


リファレンスはこちらを参考にしました。


それと最初にこれを読んでおいた方がよろしいかと。
ページ数の関係か、サンプルは少ないですが、jQueryの特徴が分かりやすく解説されています。prototype.jsでゴリゴリ書いていたのでjQueryはスルーしていましたが、これを読んだのが触るキッカケになりました。

id:amachang さんによるJavaScriptわくわく開発道＠P162.WEB+DB PRESS Vol.41

WEB+DB PRESS Vol.41

WEB+DB PRESS Vol.41