В чем разница между [href ^ = "#"] и [href * = \\ #] - PullRequest
Новая
       52

В чем разница между [href ^ = "#"] и [href * = \\ #]

0 голосов
/ 04 мая 2020

В чем разница между 

'a[href^="#"]'

и 

'a[href*=\\#]'

Я хотел бы создать плавную прокрутку javascript, которая влияет на все внутренние ссылки на сайте.

Это полный сценарий. 

 jQuery(document).ready(function($) {
      $('a[href^="#"]').bind('click.smoothscroll',function (e) {
        e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );

1 Ответ

0 голосов
/ 04 мая 2020
  • ^= - атрибут «начинается с» CSS селектор
  • *= - «атрибут содержит» CSS селектор

Вам нужно \\ для экранирования в двух контекстах:

  • a[href*=#] не является допустимым CSS селектором; должно быть a[href*=\#] или a[href*="#"]
  • \ необходимо экранировать с собой в JavaScript строковых литералах 

let a = 'a[href^="#"]';
let b = 'a[href*=\\#]';
let c = 'a[href*="#"]';
let d = 'a[href*=#]';
console.log(a, document.querySelectorAll(a).length);
console.log(b, document.querySelectorAll(b).length);
console.log(c, document.querySelectorAll(c).length);
try {
  document.querySelectorAll(d);
} catch(err) {
  console.log(err.message);
}
<a href="#foo">Blah</a>
<a href="foo#bar">Blah</a>
...