jQuery学习笔记———jQuery中的事件和动画

1、加载DOM

$(window).load(function(){
  //加载window对象所绑定的处理函数
})

2、简写方式
$(document).ready(function(){
//编写代码
})

可写成下面代码:

$(function(){
//编写代码
})

3、事件绑定
(1)$(selector).bind(event,data,function);
第1个参数是事件类型,包括:blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等,也可以是自定义名称。(注意:jQuery中的时间绑定类型比普通的js事件绑定类型少了”on”)
第2个参数为可选参数,作为event.data属性值传给事件对象的额外数据对象。
第3个参数则是用来绑定的处理函数。

简写绑定事件:
$(selector).mouseover(function(){
//实现代码
})

绑定多个事件类型:
$(“mouseover mouseout”,function(){});

(2)on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。

$("p").on("click", function(){
alert( $(this).text() );
});

(3)off()方法移除用.on()绑定的事件处理程序

$("p").off();       //移除所有的绑定事件
$("p").off( "click", "**" );          //移除绑定的click事件

(4)one()方法为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数

当所有段落被第一次点击的时候,显示所有其文本。
jQuery 代码:
$("p").one("click", function(){
  alert( $(this).text() );
});

(5)unbind([type],[data]);
第一个参数是事件类型,第二个参数是将要移除的函数。具体说明如下:
(1)如果没有参数,则删除所有的绑定的事件;
(2)如果提供了事件类型作为参数,则只删除该类型的绑定事件;
(3)如果把在绑定时传递的处理函数作为第2个参数,则只有这个特定的事件处理函数会被删除。

(6)trigger(type,[data])方法有两个参数,第一个参数是要触发的事件类型,第二个参数是要传递给事件处理函数的附加数据,以数组形式传递。

$('#btn').trigger("click");     //触发浏览器支持的具有相同名称的事件
$('#btn').trigger("myClick");    //触发自定义名称的事件
$("input").triggerHandler("focus");     //只想触发绑定的focus事件,而不想执行浏览器默认操作

4、事件委派

(1)delegate() 方法指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
当点击鼠标时,隐藏或显示 p 元素:

HTML 代码:
"background-color:red">

这是一个段落。

jQuery 代码: $("div").delegate("button","click",function(){ $("p").slideToggle(); });

(2)删除由 delegate() 方法添加的一个或多个事件处理程序。

p元素删除由 delegate() 方法添加的所有事件处理器:
jQuery 代码:
$("p").undelegate();p元素删除由 delegate() 方法添加的所有click事件处理器:
jQuery 代码:
$("p").undelegate( "click" )

5、合成事件
(1)hover()方法
hover(enter,leave) 用于模拟光标悬停事件,当光标移到到元素上时,会触发指定的第一个函数(enter);当光标移出这个元素时,会触发指定的第2个函数(leave)

$(selector).hover(function(){},function(){});

注意:CSS中的伪类选择器”:hover”可以用于任何元素,可是在IE6中仅可用于超链接元素。此时可以使用jQuery中的hover()方法。hover()方法替代了jQuery中的bind(“mouseenter”)和bind(“mouseleave”)方法。

(2)toggle()方法
toggle(fn1,fn2,……fnN); 用于模拟鼠标连续点击事件。第一次单击元素触发指定的第一个函数,以此类推。

6、事件冒泡
多个元素响应同一个事件
(1)停止事件冒泡

$(selector).bind("click",function(event){
//实现函数
event.stopPropagation();      //停止事件冒泡
return false;   //这种方式也可以停止事件冒泡
});

(2)阻止默认行为(网页中的元素有自己的默认行为,如单击超链接后会跳转、点击“提交”按钮后表单会提交)

$(selector).bind("click",function(event){
//实现函数
event.preventDefault();     //阻止默认行为
return false;   //这种方式也可以阻止默认行为
});

注意:事件捕获和事件冒泡是刚好相反的两个过程,事件捕获是从最顶端往下开始触发。jQuery不支持事件捕获,如果需要使用事件捕获则需使用原生的JavaScript.

7、事件对象属性event.pageX和event.pageY
该方法的作用是获取到光标相对于页面的x坐标和y坐标,如果没有使用jQuery时,那么IE浏览器中是event.x/event.y,而Firefox浏览器中是用event.pageX/event.pageY.如果页面上有滚动条,则还要加上滚动条的宽度或高度。

8、jQuery中的动画
(1)show()方法和hide()方法(可以指定一个速度参数,如show(“slow”)或show(1000))

$("element").hide();            //通过hide()方法隐藏元素
$("element").css("display","none");    //通过css方法隐藏元素

(2)fadeIn()方法和fadeOut()方法,在指定的一段时间内改变元素的不透明度

(3)slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为”none”,当调用slideDown()方法时,这个元素将由上至下延伸显示。slideUp()方法正好相反,元素将由下到上缩短隐藏。使用slideUp()方法和slideDown()方法再次对“内容”的显示和隐藏方式进行改变。

$("panel h2.head").toggle(function(){
         $(this).next().slideUp();},function(){
         $(this).next().slideDown();})

(4)toggle()方法可以切换元素的可见状态。如果元素是可见的,则切换为隐藏的;如果元素是隐藏的,则切换为可见的。下面两种代码都是表示一样的效果,当单击“标题”链接后,内容会在可见和隐藏两种状态之间切换。

$("panel h2.head").click(function(){
     $(this).next().toggle();
});
$("panel h2.head").toggle(function(){
         $(this).next().hide();},function(){
         $(this).next().show();})
$("panel h2.head").click(function(){
    if($(this).next().is(":visible")){
        $(this).next().hide();
    }else{
         $(this).next().show();
    }
         })

(5)slideToggle()方法通过高度变化来切换匹配元素的可见性,这个动画效果只调整元素的高度。下面两种代码效果一样,当单击“标题”链接后,“内容”会在可见和隐藏两种状态之间切换,不过是通过改变元素的高度来实现。

$("panel h2.head").click(function(){
     $(this).next().slideToggle();
});
$("panel h2.head").toggle(function(){
         $(this).next().slideUp();},function(){
         $(this).next().slideDown();})

(6)fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度,即匹配的元素的高度和宽带不会发生变化。

$("panel h2.head").click(function(){
     $(this).next().fadeTo(600,0.2);   //当单击”标题“链接后,”内容“会渐渐地调整到指定的不透明度(20%)
});

(7)fadeToggle()方法通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度。下面两种代码效果一样。

$("panel h2.head").click(function(){
     $(this).next().fadeToggle();
});
$("panel h2.head").toggle(function(){
         $(this).next().fadeOut();},function(){
         $(this).next().fadeIn();})

(8)自定义动画方法animate()
animate(params, speed, callback);
参数说明:
params:一个包含样式属性及值得映射,比如{property:”value1”,property:”value2”,….}
speed:速度参数,可选。
callback:在动画完成时执行的函数,可选。

(9)停止元素的动画stop()
stop([clearQueue],[gotoEnd]);
参数clearQueue和gotoEnd都是可选的参数,为boolean值(true或false)。clearQueue代表是否清空未执行完的动画队列,gotoEnd代表是否直接将正在执行的动画跳转到末状态。

(10)判断元素是否处于动画状态
if(!$(element).is(“:animated”)){ //判断元素是否正处于动画状态
//如果当前没有进行动画,则添加新动画
}

(11)延迟动画delay(),delay()方法允许我们将队列中的函数延时执行,它既可以推迟动画队列中的函数的执行,也可以用于自定义队列。
如:delay(1000)

(12)finish()停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。

js中SetInterval与setTimeout用法

JS里设定延时:

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。

setTimeout(“function”,time) 设置一个超时对象 setInterval(“function”,time) 设置一个超时对象

SetInterval为自动重复,setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterval对象

使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次

你可能感兴趣的:(jQuery)