jQuery补充
一:动画效果:
// 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) // 自定义(了解即可) animate(p,[s],[e],[fn])
二:each
用法一:jQuery.each(collection, callback(indexInArray, valueOfElement))
说明:一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//index是索引,ele是每次循环的具体元素。 })
用法二:.each()
方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的,所以关键字 this
总是指向这个元素。
// 为每一个li标签添加foo $("li").each(function(){ $(this).addClass("c1"); });
等价于:
$("li").addClass("c1"); // 对所有标签做统一操作
ps:在遍历过程中可以使用renturn fasle来结束each循环。
案例:显示每一个以div为标签的js对象:
$('div').each(function(){console.log(this)})
三:data
用法一:.data(key, value)
说明:在匹配的对象中存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k,值为100
用法二:.data(key)
说明:取出第一个div标签中保存的key的值
ps:获取键值对的时候如果不存在也不会报错。(输出:undefined)
$("div").data("k");//返回第一个div标签中保存的"k"的值
用法三:removeData(key)
说明:移出存放在元素上的数据,不加key参数表示删除所有该标签保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据