经过了前两期的基础铺垫,相信大家对jQuery也有了一定的了解,那么以后的几期将逐个介绍jQuery中的常见用法。
第一发,层次选择器之加号的用法以及next()方法,还是继续用之前的例子
当我们使用如下选择器$(".one + div")时,以下元素将会匹配
那具体的规则是怎样的呢?这里的加号和next()方法的作用其实一样。在如上例子中,class属性值为one的元素的下一个兄弟节点的div标签元素将会匹配,所谓兄弟节点就是同级的元素,那么加号的用法可以将范围限定在匹配元素之后的同级元素中,并可以根据加号后面的内容做进一步的筛选,在如上例子中,因为有多个class为one的元素,所以除去第一个元素被剔除外,会有多个元素被匹配,代码为:(".one + div").css("background","#bbffaa");该写法等价于
第二发,层次选择器之选取同辈元素,这个算是用的比较多的了,有了这个用法我们就不需要通过获取一个元素的父元素然后再获取所有子元素来得到我们想要东西了。。。只是缅怀一下过去无知的自己。。。好了,先来看一下效果:
所有class属性为one的同辈元素都被选取,注意,这并不是包括自身的,因为有多个class为one的元素才造成了重叠,代码入下:
$(".one").siblings("div").css("background","#bbffaa");
为了区分我们用id属性为two的元素来做选择器,效果如下:
可以看到,id属性为two的元素是并不包括在内的,就像同辈的字面意思一样。代码入下:$("#two").siblings("div").css("background","#bbffaa");
好啦,今天就写到这里,有什么问题欢迎大家留言。