jQuery属性选择器-为什么是引号？

Question

在jQuery中，当选择by属性值时，为什么需要将值括在引号' '中？

  $("#demo-dropdown a").click(function() {
    var href = $(this).attr("href");
    console.log(typeof (href));  // there shows `string`
    $("#tab-list li a[href= '" + href + "']" ).tab("show");  // why the single-quotes?

  });

如果我用：

$("#tab-list li a[href=" + href + "]" ).tab("show");

然后我会得到一个Syntax Error

Uncaught Error: Syntax error, unrecognized expression: #tab-list li a[href= #profile]
    at Function.fa.error (jquery.min.js:2)
    at fa.tokenize (jquery.min.js:2)
    at fa.select (jquery.min.js:2)
    at Function.fa [as find] (jquery.min.js:2)
    at n.fn.init.find (jquery.min.js:2)
    at new n.fn.init (jquery.min.js:2)
    at n (jquery.min.js:2)
    at HTMLAnchorElement.<anonymous> (index.html?_ijt=o70cto8b6ocd3tq2oh8bck1k4e:171)
    at HTMLAnchorElement.dispatch (jquery.min.js:3)
    at HTMLAnchorElement.r.handle (jquery.min.js:3)

Answer 1

jquery 属性-相等-选择器就是这样看起来像[name=”value”].Note的引号。在下面的表达式中，它选择一个具有匹配的href的锚标记元素

$("#tab-list li a[href= '" + href + "']" ).tab("show"); 
                        ^            ^
  //attribute selector starts        //attribute selector ends

Answer 2

你是基于属性值的选择。许多jQuery选择器语法是从CSS选择器语法派生出来的，因此有些规则来自CSS。如果要查找的值(包含在变量href中)不是有效的CSS标识符，则需要将所寻找的值括在引号中，就像在第一个代码示例中使用单引号一样。当值包含空格时，不能省略引号。(您的错误消息意味着href以空格开头)。为了获得更强的健壮性，也可以逃避这个值：

穷人：$("#tab-list li a[href=" + href + "]" )

好的：$("#tab-list li a[href='" + href + "']" )

更好：$("#tab-list li a[href='" + $.escapeSelector(href) + "']" )

如果您正在寻找的值中可能有引号，则需要转义。

Answer 3

这是因为当您在某些地方使用字符串变量时，它也不会在字符串周围呈现"或'。

例如，当您简单地执行以下操作时

var someString = "Hello World";
console.log( someString );

您将看到，即使变量包含一个字符串，它也不会生成字符串周围的引号。为什么？因为每当您想要在某个地方使用字符串变量时，都必须删除""是多么不方便。

实际上，字符串变量周围没有引号。

当您获取href属性时，假设它看起来类似于href='www.example.com'，只获取值，而不是它周围的引号。这也很重要，你不希望这样的事情发生：

var someString = "Hello World"; 
$("#someElm").text( someString );
// Produces a result
// where the html looks like this 
// `<div id="someElm">"Hello World"</div>`

希望这能帮上忙！