简单介绍一下今天所学的部分jquery方法。jquery方法命名比较语义化,理解起来比较简单,所有有些方法还是需要自己去探索的。
1.eq()方法
我们常用$()函数来返回一个对象队列,此时可以用eq方法来精确选择这个序列中的某个元素。eq方法的参数是从0开始的整数,跟数组的下标很像。
$("p").eq(3) //这样就是选择了第4个p标签。
同样的,lt、gt、odd、even、first、last都是这个机理。不过这些需要写在$()里面,如$("p:lt(3)")就是选择了下标小于3的前三个p标签。
2.index()方法
如果不传递任何参数给 .index() 方法,则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置。
如果在一组元素上调用 .index() ,并且参数是一个DOM元素或jQuery对象, .index() 返回值就是传入的元素相对于原先集合的位置。
如果参数是一个选择器, .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则 .index() 返回 -1.
index()方法常跟$(this)合用。
举个例子。
$("div").click(function(){
alert($(this).index());
}) //这里就是输出此div在所有div中的排名。
3.each()方法
each()表示遍历节点,也叫作迭代符合条件的节点。和for循环的遍历一个道理。这个还是比较常用的。
$("p").each(function(i){
$(this).animate({"width":50 * i},1000);
});
上面的例子就是将所有p标签遍历,使每个p标签的宽度与自己的下标挂上钩。
4.get()方法
get()方法和eq()方法基本一致,都仰赖$()的序列。
不过,eq()返回的是jQuery对象,而get()返回的是原生JS对象。jQuery对象后面要跟着jQuery方法,原生对象后面要跟着原生属性、方法。
$("p").eq(2).html("哈哈哈哈哈哈");
$("p").get(2).innerHTML = "哈哈哈哈哈哈";
//上面两行代码是等价的
其他介绍:
动画相关:show()显示、hide()隐藏、toggle()切换
额外内容比较简单,具体介绍可以参考https://github.com/lvye1221/Web1708/blob/master/F03-%E7%BB%84%E4%BB%B6-JQuery-%E5%8A%A8%E7%94%BB%E4%B8%8E%E8%8A%82%E7%82%B9/jQuery%E7%AC%AC2%E5%A4%A9%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0.docx。