锋利的jQuery第九期

今天周末，得空写文章，最近比较忙，各位管理也辛苦了，今天小编带来jQuery的第九期。今天我们的例子模板换啦...



今天周末，得空写文章，最近比较忙，各位管理也辛苦了，今天小编带来jQuery的第九期。今天我们的例子模板换啦：



以title属性值作为筛选条件，首先把属性过滤选择器结束。上一期说了一些正则的写法，今天再说两个，|和~。然后说一说子元素过滤器。

第一发，|=的意思是匹配等于某字符串或以某字符串为前缀的元素，这里说明一点，前缀的连接符为-，即en-UK的前缀为en，看如如下一个例子：$("div[title|=en]").css("background","#bbffaa");该式子将匹配title属性值为en或以en为前缀的div元素，效果图如下：



~=这个不是很常用，但是我们可以根据匹配规则来自定义和封装我们的属性值，来达到使用方便的效果。~=的作用是匹配属性值以空格分割的包含某字符串的元素，即en UK通过空格分割得到两段，我们可以通过如下式子进行匹配：$("div[title~=uk]").css("background","#bbffaa");这里并没有区分大小写，请留意



第二发，子元素选择器。子元素选择器是工作中常常用到的东西，无论是做判断还是元素的提取，效果的展示，都离不开子元素选择器，对于子元素的匹配方式也有很多，而且绝大部分和CSS选择器的写法都是通用的，大家可以直接引用过来。我们先来看看最简单的，根据元素位置取值，也就是第几个孩子，还是回到我们原来的例子：



如$("div.one :nth-child(2)").css("background","#bbffaa");将匹配class为one的所有div元素中的第二个子元素，注意nth-child()中的参数并不是index，所以不必按照索引的写法从零开始，只需按照元素所在的位置直接传入，即从1开始。效果图如下：



这里有一点要提醒，使用中一定要注意元素中的标签，应避免使用br标签，因为br也会算作其中的子元素，所以在上例中


扰乱了我们的预期结果。

那么下一期我们将再介绍几种子元素过滤器，如果你喜欢本文章请转发到朋友圈推广哦，长按下方二维码即可关注本公众号："奔跑在IT之路"，感谢大家一直以来的支持。

    关注 奔跑在IT之路