$("img[data-src!='']")选择器问题

Question

html:
<img src="img/123.jpg" />
<img src="img/loading.gif" data-src="img/1.jpg"/>
<img src="img/loading.gif" data-src="img/2.jpg"/>

我要做个懒加载，用jquery获取到页面中的image元素，但有些img不带 data-src自定义属性的不做处理

以下选择器把不带data-src的img也获取了，是什么原因呢
var getImgs = $("img[data-src!='']")

Answer 1

把需要的加个class

Answer 2

把选择带有data-src属性的选择器选出来：

var getImgs = $("img[data-src]")

Answer 3

$("img[data-src!='']")的语义
为获取img元素带有data-src属性但其值不为空或不存在data-src属性
如@xuexiphpa 所回答的，$("img[data-src]") 获取带有data-src属性的img元素就可以达到你的需求
@jackple 所回答的，直接加class过滤更方便些

Answer 4

[attr!='value'] 这个选择器不是标准选择器，是 jQuery 扩展的功能，在 jQuery 的实现里面，如果元素不包含attr，并且属性选择符是 !=，这个元素也会被加到最终的结果里面。

你的 DOM 结构如果是下面这种，选择器返回的才是你想要的结果。

<img src="img/123.jpg" data-src/>
<img src="img/loading.gif" data-src="img/1.jpg"/>
<img src="img/loading.gif" data-src="img/2.jpg"/>

根据你的需求和 DOM 结构，应该用 「含有某个属性选择器」，而不是「某个属性不等于选择器」。