Question

<html>
<head>
<style type="text/css">
    a.red {
        color: red;
    }
    a.green {
        color: green;
    }   
    a.yellow {
        color: yellow;
    }   
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('a[href^=red]').addClass('red');
        $('a[href$=.jpg]').addClass('green');
        $('a[href*=pic]').addClass('yellow');
    });
</script>
</head>
<body>
<a href="red.gif">red</a></br>
<a href="green.jpg">green</a></br>
<a href="yellowpic.png">yellow</a>
</body>
</html>

问题：

在前端，只有红色工作，绿色和黄色不起作用，为什么？

Answer 1

您需要使用.转义\\.，因为它是jquery选择器中的保留字符，或者只是将属性值包装在引号中。

 $(document).ready(function() {
         $('a[href^=red]').addClass('red');
         $('a[href$=\\.jpg]').addClass('green'); // < --Here 
         //$('a[href$="jpg"]').addClass('green');
         $('a[href*=pic]').addClass('yellow');
    });

<强> Demo

问题是你在第二行遇到语法错误，而第三行从未在脚本中断时执行。

来自docs

使用任何元字符（例如！“＃$％＆amp;'（）* +，。/：;＆lt; =＆gt;？@ [] ^`{|}〜）作为文字作为名称的一部分，必须使用两个反斜杠进行转义：\。

Answer 2

来自文档

jQuery( "[attribute='value']" )

属性：属性名称。

值：属性值。可以是不带引号的单个单词或带引号的字符串。

您必须在匹配的字符串周围添加"。

$('a[href^="red"]').addClass('red');
$('a[href$=".jpg"]').addClass('green');
$('a[href*="pic"]').addClass('yellow');
           ^   ^

因此它适用于多个单词，例如

$('a[value*="some value"]')

Demo

在jquery中出现'addClass'问题

2 个答案: