JQuery补充

JQuery补充

关于JQuery的动画，遍历，事件，插件的一些简单笔记。

动画

1、
show()

$("div").show([3000，"linear"，function(){}])

hide()

$("div").hide([3000，"linear"，function(){}])

toggle()

2、
slideDown

slideUp

SildeToggle

3、

fadeIn

fadeOut

fadeToggle

Jquery遍历

1、for

能遍历javascript数组以及jQUery对象

遍历javascript数组
var arr=document.getElementsByTagName("li");
for(var i=0; i<arr.length; i++){
	arr[i].innerHTML
}

遍历jQuery对象
var lis = $("li")
for(var i=0; i<lis.length; i++){
	//lis[i].innerHTML
	$(lis[i]).html();
}

2、jquery对象.each

只能遍历jQuqery对象

遍历jQuery对象
var lis = $("li")

lis.each(function(i,e){			//i代表索引，e代表当前的元素
		e.innerHTML;
        this.innerHTML;
         
        //return true     跳过本次循环，继续下次循环
        //teturn false    终止循环
})

3、$.each

能遍历javascript数组以及jQUery对象

遍历javascript数组
var arr=document.getElementsByTagName("li");

$.each(arr,function(i,e){
		...
})


遍历jQuery对象
var lis = $("li")
$.each(lis.function(i,e){

})

事件的绑定

on(bind)

$("#btn1").on("click",function(){

})

等价于
$("#btn1").click(function(){

})

off(unbind)

$("#btn1").off("click");

插件机制

1、对象插件

$.fn.extend({
	red:function(){
		$(this).css("color","red")
	},
	blue:function(){
		$(this).css("color","blue");
	}
})


$("#div1").red();

2、全局插件($)

$.extend({
	max:function(num1,num2){
		return num1>num2?num1:num2;
	}
})


$.max(5,6);				//返回结果为6