事件的绑定
bind(type[,data],fn);
type:包括 blur/focus/load/resize/scroll/unload/click/dblclick/mousedown/error
mouseup/mousemove/mouseover/mouseout/mouseenter/mouseleave/change/select/submit/keydown/keypress/keyup等
还可以自定义名称
data:可选参数，作为event.data属性值传递给事件对象的额外数据对象
fn：用来绑定的处理函数
例子：
$("#panel h5.head").bind("click",function(){
var $content = $(this).next();
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
}
)
也可以这样实现
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
});
$("#panel h5.head").bind("mouseout",function(){
$(this).next().hide();
})
合成事件
hover方法
hover(enter,leave);//用于模拟光标悬停事件，当光标移动到元素上时
会触发指定的函数enter；当光标移出这个元素时，会触发指定的第二个函数（leave）
注意：
在IE6里仅有超级链接才用伪类选择符，对于其他元素，可以使用JQuery的hover方法
hover方法准确来说是代替bind("mouseenter")和bind("mouseleave")
当需要触发hover函数的时候，第二个参数需要用trigger("mouseleave")来触发
toggle()
toggle(fn1,fn2,...fnN)//用于模仿鼠标连续单击事件，当第一次单击元素，触发fn1
当第二次单击元素，触发fn2，过了后再重新从第一个函数开始
还有一个另外的作用：切换元素的可见状态
如果元素是可见的，单击切换则为隐藏，反之亦然
针对上面的例子修改为：
$("#panel h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
$("#panel h5.head").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
$("#panel h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})
.highlight{ background:#FF3300; }
$("#panel h5.head").toggle(function(){
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
});
事件冒泡
什么是冒泡？
页面上有多个事件，也可以多个元素响应同一个事件
假设页面上有两个元素，其中一个元素嵌套在另外一个元素里，并且都绑定了click事件，同时<body>
元素也绑定了click事件
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素</div>
<div id="msg"></div>
// 为span元素绑定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
});
// 为div元素绑定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
当点击内部<span>元素，触发<span>元素的cick事件时，会输出三条记录
而这个就是由事件冒泡引起的
引发事件顺序“冒泡”
(1)<span>
(2)<div>
(3)<body>
因为事件会按照DOM层次结构像水泡一样不断向上直至顶端，所以称为冒泡
停止冒泡的方法如下：
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
阻止默认行为
什么叫默认行为？
网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击提交按钮后表单会提交
而有时需要阻止默认行为的执行
阻止提交按钮
$("#sub").bind("click",function(event){
var username = $("#username").val(); //获取元素的值
if(username==""){ //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
event.preventDefault(); //阻止默认行为 ( 表单提交 )
}
})
如果需要既屏蔽默认行为又屏蔽冒泡，则用return false 即可
事件捕获
事件捕获是从最上到最下的过程，Jquery不支持事件捕获，用原生的javascript即可
事件对象的属性
event.type()
$("a").click(function(event) {
alert(event.type);//获取事件类型
return false;//阻止链接跳转
});
event.preventDefault() //阻止默认行为
event.stopPropagation()//不允许事件冒泡
event.target()
$("a[href=http://google.com]").click(function(event) {
alert(event.target.href);//获取触发事件的<a>元素的href属性值
return false;//阻止链接跳转
});
event.relatedTarget()
event.pageX()
$("a").click(function(event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标
return false;//阻止链接跳转
});
e.which()
$("a").mousedown(function(e){
alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
return false;//阻止链接跳转
});
$("input").keyup(function(e){
alert(e.which);//得到输入框内的asciii码
})
e.metaKey
$("input").keyup(function(e){
alert(e.metaKey +" "+e.ctrlKey );
$(this).blur();
})
event.originalEvent()
指向原始的事件对象
移除事件
unbind([type][,data]);
type为事件类型
data为将要移除的函数
如果没有参数，则删除所有绑定的事件
如果提供了事件类型作为参数，则只删除该类型的绑定事件
例子：
$('#btn').unbind("click");})
$('#btn').bind("click", myFun1 = function(){ $('#test').append("<p>我的绑定函数1</p>"); }).
$('#test').append("<p>我的绑定函数1</p>");});
$('#delTwo').click(function(){
$('#btn').unbind("click",myFun2);
});
$('#btn').one("click", myFun1 = function(){//只有第一次单击才有效，第二次无效 $('#test').append("<p>我的绑定函数1</p>");
}).$('#test').append("<p>我的绑定函数1</p>");});
模拟操作
1.常用模拟
$('#btn').trigger("click");//自动触发btn的click事件
2.触发自定义事件
$('#btn').bind("myClick", function(){
$('#test').append("<p>我的自定义事件.</p>");
});
$('#btn').click(function(){
$(this).trigger("myClick");
}).trigger("myClick");
$('#btn').bind("myClick", function(event, message1, message2){
$('#test').append( "<p>"+message1 + message2 +"</p>");
});
$('#btn').click(function(){
$(this).trigger("myClick",["我的自定义","事件"]);
}).trigger("myClick",["我的自定义","事件"]);//给自定义事件传递参数
3.执行默认操作
<button id="old">trigger</button>
<button id="new">triggerHandler</button>
<input />
$('#old').bind("click", function(){
$("input").trigger("focus"); //触发input元素的focus事件，也会使input获取输入焦点
});
$('#new').bind("click", function(){
$("input").triggerHandler("focus");仅仅触发input元素的focus事件
});
$("input").focus(function(){
$("body").append("<p>focus.</p>");})
4.绑定多个事件类型
$(function(){
$("div").bind("mouseover mouseout",fuction(){$(this).toggleClass("over");})
});
5.添加事件命名空间，便于管理
$(function(){ $("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>"); });
$("div").bind("mouseover.plugin", function(){
$("body").append("<p>mouseover事件</p>");
});
$("div").bind("dblclick", function(){
$("body").append("<p>dblclick事件</p>");
});
$("button").click(function() {
$("div").unbind(".plugin");
})
})
6.相当事件名称，不同命名空间执行方法
$(function(){ $("div").bind("click",function(){
$("body").append("<p>click事件</p>");
});
$("div").bind("click.plugin", function(){
$("body").append("<p>click.plugin事件</p>");
});
$("button").click(function() {
$("div").trigger("click!"); // 注意click后面的感叹号匹配所有不包含在命名空间中的命名方法
});
})
而如果都要被触发，可以写为 $("div").trigger("click");
动画
注意：用jquery做动画效果必须在文件头部包含如下的DTD定义，否则可能会引起动画的抖动
Jquery任何动画效果都可以指定三种速度参数，slow(0.6秒) normal(0.4秒) fast(0.2秒)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.show()和hide()方法//改变的是元素的display属性
$("#panel h5.head").toggle(function(){
$(this).next().hide(600);
},function(){
$(this).next().show(600);//600可以写为slow(600秒内完成)/normal(400秒内完成)/fast(200秒内完成)
})
2.fadeOut()和fadeIn()//改变元素的透明度，直到dispaly为none或者为block为止
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().fadeOut();
},function(){
$(this).next().fadeIn();//
})
})
3.slideUp()和slideDown()//改变元素的高度
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().slideUp();
},function(){
$(this).next().slideDown();//当遇到一个display为none时，方法会将元素由上至下延伸显示
})
})
4.自定义动画方法
animated (params,speed,callback);
params:一个包含样式属性及值的映射，比如{property1:"value1",peroperty2:"value2",...}
speed ：速度参数
callback:在动画完成时执行的参数，可选
1.例子：
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}//前提是必须设置为position: relative;或者为
absolute
<div id="panel"></div>
$(function(){
$("#panel").click(function(){
$(this).animate({left: "500px"}, 3000);
})
})
2.累加累减动画
上面的也可以写为
$(this).animate({left: "+=500px"}, 3000);
$(this).animate({left: "-=500px"}, 3000);
3.多重动画
(1)同时执行多个动画
$(this).animate({left: "500px",height:"200px"}, 3000);//既向右滑动，并且放大元素的高度
(2)按顺序执行多个动画
$(function(){
$("#panel").click(function(){
$(this).animate({left: "500px"}, 3000).animate({height: "200px"}, 3000);//将先向右然后再增大高度，这也叫动画队列
})
})
4.综合动画
$(function(){
// $("#panel").css("opacity", "0.5");//设置不透明度
$("#panel").click(function(){
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
.animate({top: "200px" , width :"200px"}, 3000 )
.fadeOut("slow");
});
});
$("#panel").click(function(){
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
.animate({top: "200px" , width :"200px"}, 3000 ,function(){
$(this).css("border","5px solid blue");
})
});
注意:假如把css方法放到第一个参数后面，将导致动画一开始就执行CSS方法，因为CSS方法不参与动画队列
停止动画
stop方法
stop([clearQueue][,gotoEnd])
clearQueue和gotoEnd都是可选参数
clearQueue:是否要清空未执行完的动画队列
gotoEnd:是否直接将正在执行的动画跳转到末状态
stop(true,true)//停止当前动画并直接到达当前动画的末状态并清空动画队列
2.判断元素是否处于动画状态
要避免动画累积而导致的动画于行为的不一致。
if (!$(element).is(":animated"))//判断元素是否正处于动画状态
{
//如果当前没有进行动画，则添加新动画
3.其他动画方法
toggle() //切换元素的可见状态
slideToggle()//通过高度变化来切换匹配元素的可见性
fadeTo()
}
实例：
<script type="text/javascript">
$(function(){
var page = 1;
var i = 4; //每版放4个图片
//向后 按钮
$("span.next").click(function(){ //绑定click事件
var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
var v_width = $v_content.width() ;
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数
if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画
if( page == page_count ){ //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
$v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面
page = 1;
}else{
$v_show.animate({ left : '-='+v_width }, "slow"); //通过改变left值，达到每次换一个版面
page++;
}
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
//往前 按钮
$("span.prev").click(function(){
var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
var v_width = $v_content.width();
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数
if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画
if( page == 1 ){ //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
page = page_count;
}else{
$v_show.animate({ left : '+='+v_width }, "slow");
page--;
}
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
});
</script>
<div class="v_show">
<div class="v_caption">
<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
<div class="highlight_tip">
<span class="current">1</span><span>2</span><span>3</span><span>4</span>
</div>
<div class="change_btn">
<span class="prev" >上一页</span>
<span class="next">下一页</span>
</div>
<em><a href="#">更多>></a></em>
</div>
<div class="v_content">
<div class="v_content_list">
<ul>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
</ul>
</div>
</div>
</div>
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#2B93D2; text-decoration:none; }
a:hover { color:#E31E1C; text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
/* v_show style */
.v_show { width:595px; margin:20px 0 1px 60px; }
.v_caption { height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat 0 0; }
.v_caption h2 { float:left; width:84px; height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; }
.v_caption .cartoon { background-position: 0 -100px; }
.v_caption .variety { background-position:-100px -100px; }
.highlight_tip { display:inline; float:left; margin:14px 0 0 10px; }
.highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(img/btn_cartoon.gif) no-repeat 0 -320px; text-
indent:-9999px; }
.highlight_tip .current { background-position:0 -220px; }
.change_btn { float:left; margin:7px 0 0 10px; }
.change_btn span { display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px;
cursor:pointer; }
.change_btn .prev { background-position:0 -400px; }
.change_btn .next { width:31px; background-position:-30px -400px; }
.v_caption em { display:inline; float:right; margin:10px 12px 0 0; font-family:simsun; }
.v_content { position:relative; width:592px; height:160px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid
#E7E7E7; }
.v_content_list { position:absolute; width:2500px;top:0px; left:0px; }
.v_content ul {float:left;}
.v_content ul li { display:inline; float:left; margin:10px 2px 0; padding:8px; background:url(img/v_bg.gif) no-repeat; }
.v_content ul li a { display:block; width:128px; height:80px; overflow:hidden; }
.v_content ul li img { width:128px; height:96px; }
.v_content ul li h4 { width:128px; height:18px; overflow:hidden; margin-top:12px; font-weight:normal; }
.v_content ul li h4 a { display:inline !important; height:auto !important; }
.v_content ul li span { color:#666; }
.v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; }
jQuery动画制作
最新推荐文章于 2023-12-18 10:35:42 发布
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
