2011年01月14日

jQuery Uncaught Syntax error, unrecognized expression: [@href^="http://"]

Uncaught Syntax error, unrecognized expression: [@href^="http://"とは?


jQueryを練習していておこったエラーです。

なにをして起きたエラーか


[01]javaScriptが書けない、初心者が始めるjQuery
ここを参考に「4.aタグにtarget="_blank"を追加するサンプル」をやっていたら発生したエラーです。

記述したコード


実際に記述したコードです。
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/original.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a[@href^="http://www.google.com"]').attr('target', '_blank');
});
</script>
</head>
<body>
<a href="#">hoge</a>
<p id="strong">bbb</p>
<p>bbb</p>
<a href="http://www">hoge</a>
<a href="http://www.yahoo.jp">hoge</a>
<a href="http://www.google.com">hoge</a>
</div>
</body>
</html>

aタグの部分でhttp://www.google.comのurlのみtargetの_blankを付加します。

解決策


上記コードを実行したらエラーがでました。
タイトルにもあるように
「Uncaught Syntax error, unrecognized expression: [@href^="http://"]」
ですね。
参考webページのと同じように作っているのになぜエラーがでるのかは謎でしたが、調べてみたところ。
http://www.thalesjacobi.com/Jquery_error_uncaught_exception_Syntax_error_unrecognized_expression
ここの下の方にGoodCodeとBadCodeで@idを使用するとBadなことから@を外してみたら解消できました。

jQuerのversionで@の扱いとか違うんですかね?
というよりも@が何のためにあるものなのかがわからないんですけどねw
これもそのうち調べないと。
posted by RicK at 14:27| Comment(0) | TrackBack(0) | 日記

2011年01月11日

jQueryの使い方

jQueryとは?


JavaScriptのライブラリでCSS操作などで快適に動作も軽く操作できるようになっています。

環境


jquery-1.4.4
/home/hoge/js/jquery-1.4.4.js
/home/hoge/js/original.js
/home/hoge/hoge.html

InstallというかDownload


本家サイト「http://jquery.com/」より最新版をDownload

2011/1/11 現在の最新version
http://code.jquery.com/jquery-1.4.4.js

準備


$ pwd/home/hoge/jquery
$ mkdir js
$ cd js
$ wget http://code.jquery.com/jquery-1.4.4.js
$ cd ..
$ vi hoge.html
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
// これがdownloadしたjquery
<script type="text/javascript" src="js/original.js"></script>
// これは、自分で作成するjquery
</head>
<body>
<a href="#">hoge</a>
<p id="strong">bbb</p>
<p>bbb</p>
</body>
</html>

一回ブラウザで表示してみましょう。
普通にリンクのhogeとbbbが二つ並んでいるだけだと思います。

コード記述


$ vi js/original.js
/* jQuery */
$(function() {
$("p").click(function() {$(this).css("margin-left", "50px");})
// pをクリックすると左に50px空白
$("p#strong").html("<strong>cc</strong>");
// id=strongのpが読み込まれたときbbからccへ変換される+太字
$("a").hover(
function() {
$(this).css("color", "red");
},
function() {
$(this).css("color", "black");
}
);
// aにマウスオーバーすると赤離すと黒になる
});

では、
リンクにカーソルをあわせたときに色が変わるか、bbbがccになっているか、
bbbをクリックすると右に移動するか試してみてください。

自分も今日始めて見てやったので、微妙な内容かもしれませんが、参考までに。

参考サイト


「jQuery本家」http://jquery.com/
「jQuery日本語リファレンス」http://semooh.jp/jquery/
「はじめてのjQuery」http://higashizm.sakura.ne.jp/jquery_first/
「第2回 jQueryのインストール・簡単な使い方 – jQuery入門」http://ponk.jp/?p=1696
posted by RicK at 14:50| Comment(0) | TrackBack(0) | 日記