jquery

jQueryのセレクタ@(アットマーク)にはまる。jQuery selectore @

スポンサーリンク
スポンサーリンク

2011/11/29

-jquery
-

[ jQuery ] Target Blank Links - JavaScript - Snipplr Social Snippet Repository
をみてたときの話。
ss

スポンサードリンク

jQueryセレクタに@を使うと…

ソースのセレクタ内に@があったのですがよくわからずに悶々としたので調べました。
[php highlight="1"]
$('a[@rel$='external']').click(function(){
this.target = "_blank";
});
[/php]

答えは
jQuery1.2まではセレクタの属性指定に@が使えたが、jQuery1.3からはつかえませんよーとこと。
jQuery1.3 リリースノート - jQuery 日本語リファレンス

いまのlatestバージョンだと

[html highlight="1"]
$('a[rel$='external']').click(function(){
this.target = "_blank";
});
[/html]
が正しい。

ついでにhtmlの解説

jQueryのセレクタはCSSのセレクタと同じ指定。

サンプルhtmlの指定 
aタグのrel属性の後ろの文字列がexternalでおわっているものをクリックしたら(後方一致)
target="_blank"で開きなさいの意味

サンプルhtml

[html]
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$(function(){

$('a[rel$="external"]').click(function(){
this.target = "_blank";
});
)};
</script>
<!-- 別ウィンドウで開く-->
<a href="http://yahoo.co.jp/" rel="external">ヤフー</a><br>
<!-- 別ウィンドウで開く-->
<a href="http://google.co.jp/" rel="linkexternal">グーグル</a><br>
<!-- 別ウィンドウで開かない-->
<a href="http://jp.msn.com/" rel="externallink">msn</a><br>
[/html]

前方一致でセレクタ指定をしたい場合
[php highlight="1"]
$('a[$rel="external"]').click(function(){
this.target = "_blank";
});
[/php]
完全一致でセレクタ指定をしたい場合
[php language="external"]').click(function(){
this.target = "_blank";
});
[/php]

スポンサードリンク

-jquery
-

おすすめ「フォトギフト写真カレンダーサービスOKURU」

こどもの大切な記録をさまざまな形で残せるところがすごくいい!! スマホの中の写真を選ぶだけで、オリジナルフォトギフトがお手元に届きます。 特製パッケージに入れてお届けするので、大切なご家族へのプレゼントにもおすすめです。

母の日ギフトなどにも使えます!

「OKURU 」の"ダウンロード"はこちら

 

-jquery
-

Copyright© LAGRANGE BLOG , 2020 All Rights Reserved.