/*document对象加载成功*/
$(document).ready(function(){
$("#show").append("<p>documentReady</p>");
});
$(function(){
$("#show").mouseover(function(){
/*鼠标进入事件*/
$(this).append("<p>鼠标进入</p>");
$(this).css("background-color","#333");//修改背景颜色
$(this).css("color","#fff");//修改文本颜色
})
.mouseout(function(){
/*鼠标离开事件*/
$(this).append("<p>鼠标离开</p>");
$(this).css("background-color","#ddd");//修改背景颜色
$(this).css("color","#000");//修改文本颜色
});
});
$(function(){
$("input").focus(function(){
/*获得焦点*/
$(this).addClass("input_focus");
})
.blur(function(){
/*失去焦点*/
$(this).removeClass("input_focus");
});
});
$(function(){
$("input[name=username]").change(function(){
/*值改变时触发*/
alert("用户名文本框内容已改变。");
});
});
$(function(){
$(window).resize(function(){
/*改变大小时触发*/
varwidth=$(this).width();//获得宽度
varheight=$(this).height();//获得高度
varstatus_msg="Size:"+width+"*"+height;//初始化状态栏信息
$(window).attr("status",status_msg);//设置浏览器状态栏信息
})
}
绑定事件
$("button").click(function() {});
bind(map)方法
可以一次为对象绑定多个事件，参数为"键(事件类型)/值(事件处理程序)"对的集合
为所有的文本框添加焦点获取和丢失的事件
$("input[type='text']").bind({
focus: function() {},
blur: function() {}
});
bind(type, [data], fn)方法
在为对象绑定事件的同时，为事件处理程序传递额外的参数
<button>Button</button>
$(document).ready(function() { $("button").bind("click",
{
arg1: '2012',
arg2: '10.1'
},
function(event) {
alert("arg1:" + event.data.arg1 + " arg2: " + event.data.arg2);
}
);
});
程序中为命令按钮的单击事件传入名为arg1和arg2的两个参数，然后在事件处理程序里使用event对象的data属性获取参数集合。
one(type, [data], fn)方法
将为对象绑定一个指定类型的一次性的方法处理程序，同样，该方法可以传递参数。
hover(over, out)方法
是要绑定在鼠标盘旋到该DOM对象上方的时候的事件处理程序，其中需要两个参数，就是最常用的两个被鼠标盘旋的事件，即mouseover事件和
mouseout事件
$(document).ready(function() {
$(".p_box").hover(function() {
/** Function Boby/
}, function() {
/ Function Body**/
});
})
toggle(fn1, fn2, ...)
它的作用是在被单击的时候依次循环的调用参数传递过来的函数列表。
<button>Button</button>
$(document).ready(function() {
$("button").toggle(function() {
$(this).append("1");
},
function() {
$(this).append("2");
},
function() {
$(this).append("3");
}
);
});
live(type, fn)方法
该方法为整个页面生命周期内的某一类对象绑定一个事件处理程序
前面介绍的事件绑定方法只为执行该绑定操作的时候满足条件的对象绑定该事件，而live方法绑定的事件处理程序将响应所有满足条件的对象， 无论是现在满足条件对象还是未来经过某些操作后满足条件的对象。
<button class="btn">Button</button>
<button id="btn2"></button>
使用bind方法绑定单击事件
$(document).ready(function() {
$(".btn").bind("click", function() {
//绑定单击事件
alert("Click Button");
});
$("#btn2").addClass("btn"); //添加一个btn类
});
使用live方法绑定单击事件
$(document).live("click", function() {
//绑定单击事件
alert("Click Button");
});
$("#btn2").addClass("btn"); //添加一个btn类
});
以上两段代码的执行效果是有区别的，第一段使用bind方法绑定的单击事件，只应用到了第一个按钮中，也就是说单击第二个按钮的时候程序没有反映，
因为绑定的时候只有第一个按钮具有值为btn的class属性，第二段使用live方法绑定单击事件，两个按钮都将绑定单击事件处理程序，也就是说单击两个按钮
中的任意一个都会弹出Click Button对话框，除了这两个按钮，如果页面中动态添加btn类的DOM元素，可以直接使用该事件处理程序。
删除事件
jQuery提供了2个删除事件处理程序的方法，分别如下：
unbind([type], data)方法
删除匹配对象的事件处理程序，对应bind方法，它可以删除所有以bind方式绑定的自定义事件处理程序
$("#btn1").unbind("click");
$("#btn1").unbind("click", btnClick);
die([type][,fn])方法
die方法与live方法对应，用于解除用live注册的自定义事件 ， type用于指定要删除的事件类型，fn用于指定要删除的事件处理程序的名称。
例子
<!DOCTYPE html>
<html>
<head>
<title>User Registration and Validation</title>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script>
$(function(){
$( 'input[name="validate"]' ).click(function(){
// clear message div
$( "#msg" ).html( "" );
// get values for all input boxes
var userName = $( 'input[name="userName"]' ).val();
var email = $( 'input[name="email"]' ).val();
var pass1 = $( 'input[name="password"]' ).val();
var pass2 = $( 'input[name="chkPassword"]' ).val();
// no empty values permitted
var hasValue = userName && email && pass1 && pass2;
if( !hasValue ){
$( "#msg" )
.append( "All Fields are required." )
.css( "color","red" );
return false;
}
// check that passwords match
var passwordMatch = false;
if( pass1 === pass2 ) {
passwordMatch = true;
}
if( !passwordMatch ){
$("#msg").append("<p>Passwords don't match. </p>").css("color", "red");
return false;
}
});
$( "input[name='addLocation']" ).click(function(){
$( "body" ).append( "<select name='stateCombo'><option>"
+ "Select State</option></select>" );
// disable add location button so that we don't get
// more than one drop-down
$(this).attr("disabled", "disabled");
// add some sample states
var states = ["California", "Florida", "New York"];
$.each(states, function(index, value){
$("[name='stateCombo']").append("<option value='"
+ index
+ "'>"
+ value
+ "</option>");
});
// add another empty select list
$("body").append("<select name='cityCombo'>"
+ "<option>Select City</option></select>");
});
// use .live() since states select box doesn't exist yet
$("[name='stateCombo']").live("change", function(event){
// get name of state and fill with some data
var selectedState = $(this).val();
var CA_Cities = ["San Francisco", "Los Angeles", "Mountain View"];
var FL_Cities = ["Fort Lauderdale", "Miami", "Orlando"];
var NY_Cities = ["New York", "Buffalo", "Ithica"];
var cities = [];
if(selectedState == 0){
cities = $.extend([], CA_Cities);
} else if(selectedState == 1){
cities = $.extend([], FL_Cities);
} else if(selectedState == 2){
cities = $.extend([],NY_Cities);
}
// clear cityCombo of any previous values
$("[name='cityCombo']").empty();
$.each(cities, function(index, value){
$("[name='cityCombo']").append("<option value='"
+index
+"'>"
+value
+"</option>");
});
});
});
</script>
</head>
<body>
<div id="msg"></div>
<form name="userRegistrationForm">
<label for="userName">User</label>
<input type="text" name="userName" /><br/>
<label for="email">Email</label>
<input type="text" name="email" /><br/>
<label for="password">Password</label>
<input type="password" name="password" /><br/>
<label for="chkPassword">Re-enter Password</label>
<input type="text" name="chkPassword" /><br/>
<input type="button" name="validate" value="Validate Inputs" />
</form>
<input type="button" name="addLocation" value="Add Location" />
</body>
</html>
网友评论