如何理解和运用jquery属性选择器

第一步我们看属性选择器多与少的的用法num1num2num3num123num4num5少的demo.js代码如下：$(function(){$('a[title]').css('color','red');});输出的结果：所有的a只有title属性它就会变红多的demo.js代码如下：$(function(){$('a[title=num1][bbb=aaa]').css('color','red');});输出的结果：num123变红所有a的title属性等于num1并且a的bbb属性等于aaa才会变红评论：少（代码少）在一定条件可以转化为多（变红多），多（代码多）在一定条件下可以转化少（变红少）

第二 我们再看首尾的用法我们改一下上面代码：num1num2num3num123num4num5我们先看首demo.js$(function(){$('a[title^=num]').css('color','red');});输出结果：num1 num5变成红色,a的title属性值的开头等于num都会变红再看尾demo.js$(function(){$('a[title$=num]').css('color','red');});输出结果：num2 num123变红,a的title属性值的结尾等于num都会变红评论：我猜中了故事的开头,却猜不中故事的结局.

等与不等num1num2num3num123num4num5等的代码：$('a[title=num1] ').css('color','red');输出结果：  num1变红，a的属性title等于num1变成红色不等的代码：$('a[title！=num1] ').css('color','red');输出结果：num2 num3 num123 num4 num5变红，a的属性title不是num1变红评论：等与不等，我都等了。在与不在乎，我都已经在乎了：

空与定num1num2num3num123num4num5空的demo.js代码$('a[title~=aaa]').css('color','red');输出结果：num123变红，它其实指的是虽空出一个位子，但有aaa就能变红定的demo.js代码$('a[title*=num5]').css('color','red');输出结果： num5变红，它其实指的是只要num5在就可以变红评论：只要功夫深，铁杵磨成针

评论部分只是为让你再用选择器更好回忆起来

还有一个选择器|=这个选择器主要是针对属性值匹配完成后，后面有减号匹配