区别:

a.

没有使用  ^ $的时候，属性选择器 进行的是精确查询，表示这个属性就是当前的值。限定范围更加的小 

类选择器限定的范围大一点 ，范围是包含当前属性值的元素

b.

属性选择器可以使用  ^ $ ，查找以 ''开头的， 以''结尾的 进行的是模糊查询

$("p[class^='color-red color-green']")

eg:

<p id="para-1" class="color-red">JavaScript</p>
<p id="para-2" class="color-green">Haskell</p> 
<p class="color-red color-green">Erlang</p>
var js_Erlang = $("p.color-red");
console.log(js_Erlang); // Erlang Haskell
console.log($("p[class='color-red']")); // Erlang