4 
<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>

问题：

在前端，只有红色有效，绿色和黄色无效，为什么？

4

2 回答 2

3

您需要转义.，\\.因为它是 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');
    });

演示

问题是您在第二行中遇到语法错误，并且您的第三行永远不会在脚本中断时执行。

来自文档

要使用任何元字符（例如 !"#$%&'()*+,./:;<=>?@[]^`{|}~ ）作为名称的文字部分，它必须用两个反斜杠转义：\。

于 2013-07-05T03:07:03.370 回答
3

从文档

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

属性：属性名称。

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

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

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

所以它可以用于多个单词，比如

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

演示

于 2013-07-05T03:07:03.417 回答