jquery笔记

jquery中的事件和动画

jquery中的事件

 

1：加载DOM

在浏览器加载完毕后，浏览器会通过javascript为DOM元素添加事件。在常规的javascript代码中一般使用window.onload方法，而在jquery中一般使用$(document).ready();它是事件模块中最重要的一个函数，可以极大的提高web程序的相应速度。目的是，在DOM加载完毕的时候就对操作的函数进行执行，在使用过程中，他们是有细微的区别的。

1：执行时机

1：window.onload方法是在网页上所有元素（包括元素和所有关联文件），完全加载到浏览器后才执行，即代表，javascript是可以访问页面上的任何元素的。

2：document.ready()方法，在网页上DOM完全就绪时就可以被调用，意味着jquery可以对页面上的所有元素，但是不意味着所有关联元素的文件都下载完成了。

注意：由于在这个方法中注册的事件，只要DOM就绪就会被执行，因此可能有的时候，与DOM有关的html文件已经下载完毕，并且能解析并且有效，但是有可能图片还没有下载完毕，导致：图片设置的宽和高无效 想要解决这个问题，可以用另外一个函数：

$(document).onload();使用这个方法绑定给window对象，就会让页面上所有元素加载完毕后再触发。如果绑定在元素上，则会在元素加载完毕后触发、

 

2：多次使用：

假设在网页中有两个函数：
function one(){

alert("one");

}

funciton two(){

alert("two");

}

当网页加载完毕时，通过javascript来分别调用one函数和two函数。

只会弹出two函数原因是：

javascript的onload事件一次直能绑定一个函数的引用，如果有第二个数的话，他就会自动覆盖前面的函数。

 

但是使用jquery的ready（）方法是不会出现这汇总情况，每次调用新的行为，他总能很好的追加这个行为，使行为按顺序输出。

 

3：简写方式；

1:$(document).ready(function(){

})

2:$(funciton{

})

3()ready(funcition(){

})

这三个方式的功能都是一样的，所以可以按照自己的喜好去使用就好。

 

事件绑定：

在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind（）方法来匹配元素进行特定的事件的绑定，bind（）方法的调用格式为：

bind(type [,date],fn);

第一个参数是事件类型，

第二个参数是可选参数

第三个参数是用来绑定的处理函数。

例子：

var $question = $(".question");
$question.bind("click",function(){
var $nextele = $(this).next();//定义局部变量
if($nextele.is(":hidden")){//判断回答的元素是否可见
$nextele.show();
$question.html("good for you");
$question.css("color","red")
    }else{
$nextele.hide();
$question.html("Do you konw about jquery");
$question.css("color","black")
    }
})

$question.mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})

合成事件：

jquery有两个合成事件--hover（）方法和toggle（）方法，类似前面讲过的ready（）方法，hover方法和toggle方法属于jquery自定义个方法：

1：hover（）方法；

hover（）方法的语法结构为：

hover（enter,leave）；hover方法用于模拟鼠标悬停事件，停留的时候选择enter 离开的时候执行leave

// 合成事件 hover（）
$question.hover(function(){
$(this).next().show();
    },function(){
$(this).next().hide();
        }
    )
})

注意：

1：CSS中有伪类选择符，例如“:hover”，也是模拟鼠标悬浮时候改变元素的状态，伪类可以运用于任何元素。然而在IE6浏览器中，类选择仅适用于超链接元素，对于其他元素，可以使用jquery的hover（）方法；

2：hover（）方法准确来说是替代jquery中的bind（“mouseenter”）和bind（“mouseleave”），不是代替mouseover和mouseout。

 

2：toggle事件

语法：

toggle(fn1,fn2,fn3.....fnN);

这个toggle是有问题的，在jquery1.11.4和2.1.4中有bug，不能使用

 

事件冒泡

事件从最底层的元素开始执行，一直执行到最外层。

事件冒泡引发的问题：

如果上述图片三个部分都设置了点击事件，那么在我点击了span之后事件就是一直冒泡到body，但是实际上我是不想这么做的，为了让事件只做自己的事件而不触发上级的事件我们才有了阻止事件冒泡：

 

事件对象：

由于IE-DOM和标准DOM事件的方法各不相同，导致在不同浏览器下获取事件对象变得比较困难。针对这个问题，jquery进行了分装和拓展，从而使得在任何浏览器中都能很轻松的获取事件对象以及事件对象的一些属性。

在程序中添加事件对象的语法：

$("element").bind("click",function(even){//event:事件对象

})

当你点击element元素的时候，点击事件就被创建了，这个事件对象只有事件处理函数才能访问的到，事件处理函数执行完毕后，事件对象就会被销毁。

 

停止事件冒泡

停止事件冒泡可以阻止事件中其他对象对象的事件处理函数被执行。在jquery中，提供了stoppropagation（）方法来停止事件冒泡；

$("element").bind("click",function(even){//event:事件对象
event.stopPropagation()//停止事件冒泡

})

这样在element元素的事件被触发的时候，就不会影响到其他元素的事件了。

 

阻止默认行为

默认行为：例如：点击链接会做跳转，点击提交按钮会提交表单。有时候就需要阻止这个默认行为。

在jquery中，提供了preventdefault（）方法来阻止元素的默认行为。

var $btn = $("#password");
$btn.bind("click",function(event){
var $user = $("#userName").val();//输入框对象
if($user==""){//判定它的值是不是为空
event.preventDefault();//阻止默认行为
}
})

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false，这是对在事件对象上同时调用stopprapagation（）方法和preventDefault（）方法的一种简写

var $btn = $("#password");
$btn.bind("click",function(event){
var $user = $("#userName").val();//输入框对象
if($user==""){//判定它的值是不是为空
return false;

}
})

事件捕获：

事件捕获和事件冒泡是两个刚好相反的过程，事件捕获是从最顶端往下开始触发

                                                  

因为并非所有浏览器都支持事件捕获，这个缺陷无法通过javascript修复，jquery是不支持事件捕获的

 

事件对象的属性

1 event.type

获取事件的类型。

$btn.bind("click",function(event){

console.info(event.type);

})

2：event.preventDefault（）方法

 

阻止事件的默认行为，javascript中符合W3C规则的preventDefault（）方法在IE浏览器中却无效。jquery进行了封装，使之所有浏览器都能兼容；

 

3：event.stoppropagation（）方法

 

阻止事件冒泡，jquery封装之后使得这个方法在各个浏览器都能兼容。

 

4：event.target

作用是获取到触发事件的元素，

$btn.bind("click",function(event){

console.info(event.target);

})

 

移除事件：

给多个元素绑定同一个事件的写法：

//        多个元素绑定同一个事件：
$(".addbtn").bind("click",function(evetn){
$(".add-text").append("<b>我是一号</b>");
        }).bind("click",function(event){
$(".add-text").append("<b>我是二号</b>");
        }).bind("click",function(evetn){
$(".add-text").append("<b>我是三号</b>");
        })

移除按钮元素上以前注册的事件：

使用unblind()方法的语法结构：

unbind（[type],[data]）

//        多个元素绑定同一个事件：
$(".addbtn").bind("click",fun1=function(evetn){
$(".add-text").append("<p>我是一号</p>");
        }).bind("click",fun2=function(event){
$(".add-text").append("<p>我是二号</p>");
        }).bind("click",fun3=function(evetn){
$(".add-text").append("<p>我是三号</p>");
        })
$(".removebtn").bind("click",function(event){
$(".addbtn").unbind("click",fun2)//移除按钮的第二个事件
})

one（）方法：

另外对于只需要触发一次，随后就要立即解除绑定的情况，jquery提供了一种简单的写法-one（）方法，和bind（）的语法相似，当one（）方法处理函数触发一次之后就会立即被删除，就是说在每个元素上只发生一次。

 

模拟操作：

 

使用trigger（）方法完成模拟操作，例如可以使用下面的代码来触发id为btn的按钮的click事件

$("#btn").trigger("click");

当网页加载完之后，就会立即输出想要的效果，简化写法：

$("#btn").click（）；

 

触发自定义事件：

trigger（）方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义事件：

 

传递数据

 

执行默认的操作：

 

其他用法：

一次绑定多个事件：

 

添加事件命名空间，便利于管理：

 

相同事件命名，不同空间执行方法：

 

jquery中的动画：

show（）方法和hide（）方法

这两个方法是jquery中最基本的动画方法

注意：hide方法在将元素影藏之前，会记住元素之前的属性，在使用show（）放法之后，属性会按照hide记录的状态进行还原。

注意：用jquery做动画效果一定要在标准模式下，否则会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml/DTD/xhtml1-Transitional.dtd">

 

让show（）和hide（）方法动起来：

关键在于show和hide的里面的参数：有slow、normal、fast

 

fadeln（） 和 fadeOut（）方法

他们两个只改变元素的透明度。

可以用fadetoggle（）方法可以替代他们两个的效果

 

slideup()和slideDown（）方法

他们两个会改变元素的高度

 

注意：

jquery中的任何动画效果，都可以指定三种速度参数，即：slow normal fast 时间长度分别是0.6s 0.4s 0.2s 当使用参数的时候需要加引号，如果不使用参数的时候不同加引号。

 

自定义动画方法animate（）

这个动画效果比较全面，可以改变设置的元素的全部属性，例如宽高 透明度 位置。。。

语法结构是：

ainimate（params，speed，callback）；

参数说明：

params：一个包含样式属性及值得映射，比如{property1:"value1",property2:"value2",...}.

speed：速度参数，可选。

callback：在动画执行完之后的函数，可选

 

自定义动画：

 

animate（）方法更具有灵活性，虽然CSS3里的animation一样能使元素运动起来，达到类似flash效果，但是兼容性很差，交互性可能也比不上jquery。我们给一个元素设置动画的时候，最好把它的position设置为absolute或者relative，这样我们改变元素位置的时候就更加简单了。

//    基本逻辑：1创建jquery对象，给对象设置点击事件，当用户点击元素的时候，元素开始运动。
$(function(){
$ball = $(".one");
$ball.bind("click",function(event){
$(this).animate({left:"50em","20em",height:"20em",color:"red"},3000);
return false;//阻止事件冒泡和默认行为
})
    })

按照顺序执行：

$(function(){
$ball = $(".one");
$ball.bind("click",function(event){
$(this).animate({left:"50em","20em",height:"20em",color:"red"},3000)
        .animate({top:"10em",opacity:"0.7"},3000)
        .animate({left:"0","10em",height:"10em"},3000)
        .animate({top:"0",opacity:"1"},3000)
return false;//阻止事件冒泡和默认行为
})
})

综合动画：

$(function(){
$ball = $(".one");
$ball.bind("click",function(event){
$(this).animate({left:"50em","20em",height:"20em",color:"red"},3000)
        .animate({top:"10em",opacity:"0.7"},3000)
        .animate({left:"0","10em",height:"10em"},3000)
        .animate({top:"0",opacity:"1"},3000)
            .fadeOut("slow");//0.6s
return false;//阻止事件冒泡和默认行为
})
})

动画回调函数：

$(function(){
$ball = $(".one");
$ball.bind("click",function(event){
$(this).animate({left:"50em","20em",height:"20em",color:"red"},3000)
            .animate({top:"10em",opacity:"0.7"},3000)
            .animate({left:"0","10em",height:"10em"},3000)
            .animate({top:"0",opacity:"1"},3000,function(){
$(this).css("border","5px solid black")
                })
//                .fadeOut("slow");//0.6s
return false;//阻止事件冒泡和默认行为
})
    })

css本来是不会加入到动画队列的，一定会最先执行，但是你已经开始了动画效果，那么就需要你使用回调函数了，可以想象成一个指针，当动画结束的时候，立刻就能回调，