jQuery中的“ addClass”问题

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');
    });

演示版

问题是您在第二行中遇到语法错误，而第三行则由于脚本中断而永远不会执行。

来自文档

要将任何元字符（例如！“＃$％＆'（）* +，。/ :; <=>？@ [] ^`{|}〜）用作名称的文字部分，必须以两个反斜杠转义：\\。

Answer 2

来自文档

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

attribute ：属性名称。

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

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

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

因此，它可以使用多个词，例如

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

演示版