黑马程序员_学习日记64_711jQuery3（动画、插件）

一、复杂动画

animate  例：animate({“left”:300,”top”:300},5000); //5秒的时间将元素移动到（300,300）处

$(“#d1”).animate({“left”:300,”top”:300},5000).css(“background-color”,”blue”); //先执行非动画方法，再执行动画。在这里就是先变蓝再移动

//下面这样，利用function(){}，就先执行了动画，再改变背景

$(“#d1”).animate({“width”:300,”height”:300,”opacity”:1},3000,function(){

         $(“#d1”).css(“background-color”,”blue”);

})

还可以指定增量：

$(“#div1”).animate({“height”:”+=100”}); //如果是+=、-=等增量形式要写成字符串，因为JavaScript不认识这种语法，这是jQuery的语法。

 

二、常用jQuery插件

（一）写插件

//1、给$增加一个静态方法

$.extend({“max”:function(x,y){

         return x>y?x:y;

},”min”:function(){

         return x<y?x:y;

}

})

 

//2、增加实例方法

$.fn.extend({“checked”:function(){

         $(this).attr(“checked”,true)

},”unchecked”:function(){

         $(this).attr(“checked”,false)

}

})

 

//调用该实例方法

$(function(){

         $(“#btn”).click(function(){

                   $(“#c”).checked();

})

})

（二）validation插件

1、  以下几步，将一个普通的表单改造为可以进行Validation验证的表单：

（1）引入jQuery库和Validation插件

<script src=”../../scripts/jquery-1.3.1.js” type=”text/javascript”></script>

<script src=”../../scripts/jquery.validate.js” type=”text/javascript”></script>

（2）确定哪个表单需要被验证

$(“#commentForm”).validate();

（3）针对不同的字段，进行验证规则编码，设置字段相应的属性

class=”required”为必须填写，minlength=”2”为最小长度为2

class=”required email”为必须填写和内容要符合E-mail格式

class=”url”为url格式验证

2、  另一种验证方法

（1）      在$(“#commentForm”).validate()方法中增加rules属性

（2）      通过每个字段的name属性值来匹配验证规则

（3）      定义验证规则：例如required:true,email:true,minlength:2等等