一、jquery事件应用
ready()：类似onLoad()，但ready()只要页面DOM结构加载后触发，而onLoad()必须页面全部元素加载成功才触发
//$(document).ready(function(){});等价于$(function(){});
//设置id为tip的内容
$(document).ready(function(){ $("#tip") .html("我被加载了！"); })
bind()：给元素绑定事件
//bind()演示 $("button").bind(‘click‘,function(){ $this.attr("disabled","true"); });
删除事件：unbind(event,fun)，event为事件名称，多个以空格隔开，fun为事件执行时调用的函数，若没有任何参数则删除指定元素的所有事件处理函数
聚焦、失焦：hover(over,out);over为鼠标移入时触发的函数，out为鼠标移出时触发的函数
隐藏、显示：toggle()，该方法可以给元素点击事件绑定两个或两个以上的函数，还可以实现元素的隐藏与切换
//每次点击div元素显示不同内容 $(function(){ $("div").toggle( function(){ $(this).html("苹果"); }, function(){ $(this).html("香蕉"); } ) }); //实现按钮的隐藏和显示 $(function{ $("button").bind("click",function(){ $("div").toggle(); }) });
一次性事件：one(event,fun)，给元素绑定只会执行一次的事件
手动触发指定事件：trigger(event)，其中event可以是元素自身事件，也可是自定义事件，该事件必须能执行
<style> .color { color: red; } </style> <div>土豪，咱们交个朋友吧</div> <script> //当页面加载完时触发 $(function () { //其中change-color为自定义的事件 $("div").bind("change-color", function () { $(this).addClass("color"); }); //绑定自定义事件 $("div").trigger("change-color"); }); </script>
文本框的聚焦失焦：focus、blur
focus：在元素获取焦点时触发，如单击文本框
blur：在元素失去焦点时触发，如单击除文本框的任何位置
(function(){ //输入框的聚焦事件 $("input").bind("focus",function{ $("div").html("请输入您的姓名"); }); //输入框的失焦事件 $("input").bind("blur",function(){ if($(this).val().length == 0) $("div").html("您的名称不能为空!"); }); });
下拉框的change事件：当一个元素的值发生改变时触发的事件，如在下拉列表框中
$(function(){ //绑定change事件 $("select").bind("change",function(){ if($(this).val() == ‘苹果‘) $(this).css("background-color","red"); else $(this).css("background-color","green"); }); });
live()：jquery1.9之后不再支持，1.7版本开始不推荐使用，与bind()方法相同，live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素
$(function () { $("input").live("click", function () { $(this).attr("disabled", "true"); }) $("input").live("mouseout",function(){ $(this).attr("disabled","true"); }); $("body").append("<input id=‘btntest‘ type=‘button‘ value=‘点击或移出就不可用了‘ />"); });
二、动画
显示：$(selector).show(speed,[callback])
隐藏：$(selector).hide(speed,[callback])
speed：设置隐藏或显示的速度值，可为‘slow’、‘fast’或毫秒值
callback：为隐藏或显示动作执行完成后调用的函数名
<h4>我喜欢吃的水果</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id="hidval" type="hidden" value="0"/>
<script>
$(function(){
$("h4").bind("click",function(){
if($("#hidval").val() == 0){
//显示ul标签
$("ul").show();
$("#hidval").val(1);
}else{
//隐藏ul标签
$("ul").hide();
$("#hidval").val(0);
}
});
});
</script>
<h4>我爱吃水果</h4>
<ul>
<li>苹果</li>
<li>西瓜</li>
<li>梨</li>
</ul>
<input type="hidden" value="0"/>
<script>
$(function(){
$("h4").bind("click",function(){
if($("input").val() == 0){
$("ul").show(3000,function(){
$("input").val(1);
});
}else{
$("ul").hide(3000,function(){
$("input").val(0);
});
}
});
});
</script>
显示隐藏二合一：$(selector).toggle(speed,[callback]);
元素处于显示状态调用该方法则影藏该元素，处于隐藏状态则显示
$(function(){ $("h4").bind("click",function(){ $("ul").toggle(3000,function(){ $("span").html() == "影藏" ? $("span").html("显示") : $("span").html("影藏"); }); }); });
上下滑动：
$(selector).slideUp(speed,[callback])，向上滑动元素，仅适用于显示的元素
$(selector).slideDown(speed,[callback])，向下滑动元素，该函数仅适用于被隐藏的元素
$(function(){ $("button").bind("click",function(){ if($("hidden").val() == 0){ $("ul").slideUp(1000,function(){ $("hidden").val(1); }); }else{ $("ul").slideDown(1000,function(){ $("hidden").val(0); }); } }); });
上下滑动二合一：
$(selector).slideToggle(speed,[callback])，调用该方法，若元素已向上滑，则自动向下滑，反之亦然
$(function(){ $("h4").bind("click",function(){ //slideToggle()的用法 $("ul").slideToggle(1000,function(){ $("span").html() == "向下滑" ? $("span").html("向上滑") : $("span").html("向下滑"); }); }); });
原文：http://www.cnblogs.com/gzc0918/p/5106491.html