ページ内部でのリンク（目次など）を押した時に、スクロールアニメーションでリンク先まで移動するスクリプトありますよね。
ソースコードをググるとコピペで使えるコードがたくさん出てきますが、その記述の中に、 a[href^=#]だとかa[href^="#"]とあります。
これなんだろう。
href属性が#から始まるものを探すためのものってのは説明してくれるんですけど、なんだか気になって調べたので、その時のメモ。
スクリプトの内容
まずは問題のスクリプトを確認。
ページ内リンクをクリックすると、スムーススクロールのアニメーション付きで移動するやつです。
私は以下のソースを使用しています。
$('a[href^="#"]').click(function(){
var speed = 800,
href = $(this).attr("href"),
target = $(href === "#" || href === "" ? 'html' : href),
position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
冒頭にやつがいますね。[^="#"]さん。正規表現的な何かなのでしょうか。
ちなみに、jQueryのバージョンによっては#を""で囲まないと動作しないことがあるそうなので、私は無難に"#"としています。
「 ^= 」の名前はビット排他的論理和演算子
「^=」の部分で検索すると、「ビット排他的論理和演算子」と出てきます。
「^」というのが「ビット演算子」の仲間だそうで、その名の通りビット演算に使用する演算子です。笑
それは分かったが、このビット排他的論理和演算子で文字列の指定ができているのかよくわからず、もう少し調べました。
jQueryの構文の一つだった
結局、文字列の指定に使用できている理由はjQueryの構文の一つとして用意されていたからでした。
$('[ 属性 ^= "値" ]')これで、指定した"値"が属性の値と前方一致する要素を選択する、というものらしいです。
つまり、$([href^="#"])とすることで、href属性が "#" で始まる要素を取得することができます。
ビット排他的論理和演算子「^=」によって文字列を指定しているわけではなく、文字列の検索に使用できるように、ビット演算を駆使した構文としてjQueryが上記にような形で用意してくれていたんですね。
こちらのサイトで詳しく説明してくれています。
*追記：CSSのセレクタの指定で普通に使えるテクニックでした。
おまけ：$('[ 属性 ^= "値" ]')と類似の構文
$('[ 属性 $= "値" ]')こうすると、指定した属性の値が"値"と後方一致する要素を選択ます。
また、
$('[ 属性 *= "値" ]')こうすると、指定した属性の値が"値"を含む要素を選択できます。
さらに、
$('[ 属性 ~= "値" ]')こうすると、指定した属性の値が"値"を単語として持つ要素を選択できます。
追記(2018/4/15)
この[^="〇〇"]、普通にCSSでのセレクタの指定に使えるみたいです。
例：class属性が「lang-」から始まる要素にCSSを適用させる
[class^="lang-"]{
color: #000;
}
