jquerydom对象的事件隐藏显示和对象数组示例
作者：
本文为大家介绍下jquery的dom对象的事件隐藏显示和对象数组，感兴趣的朋友可以参下
1.事件处理
1.1.事件绑订
bind(type,fn);
例子:
$(function(){
//正式的写法
$('#d1').bind('click',function(){
$(this).css('font-size','80px');
});
//简写形式
$('#d1').click(function(){
$(this).css('font-size','80px');
});
});
1.2.绑订方式的简写形式
click(function(){
});
1.3.合成事件
hover(enter,leave) : 模拟光标悬停事件
toggle(fn1,fn2...) : 模拟鼠标连续单击事件
例子1:
$(function(){
//分开的事件
$('.s1').mouseenter(function(){
$(this).addClass('s2');
});
$('.s1').mouseleave(function(){
$(this).removeClass('s2');
});
//合成事件
$('.s1').hover(function(){
$(this).addClass('s2');
},function(){
$(this).removeClass('s2');
});
});
例子2:
$(function(){
$('#a1').toggle(function(){
$('#d1').show('slow');
},function(){
$('#d1').hide('slow');
});
});
1.4.事件冒泡//子节点产生的事件会依次向上抛给父节点
1.4.1.获得事件对象//只需要给事件处理函数添加一个任意变量即可，比如e
//e不是真正的事件对象，而是对底层的事件对象的一个封装
click(function(e){
});
例子1:
$(function(){
$('a').click(function(e){
//e:jQuery对象，里面包含了一个事件对象。
//target属性返回的是一个dom对象，即事件源。
var srcObject = e.target;
alert(srcObject.innerHTML);
});
});
1.4.2.停止冒泡
event.stopPropagation();
例子2:
$(function(){
$('a').click(function(e){
alert('你点击了一个链接');
//停止冒泡
e.stopPropagation();
});
$('#d1').click(function(e){
alert('你点击了一个div');
});
});
1.4.3.停止默认行为
event.preventDefault();//比如表单提交
例子3:
$(function(){
$('a').click(function(e){
var flag = confirm('是否确定删除?');
if(!flag){
//停止默认行为
e.preventDefault();
}
});
});
1.5.事件对象的属性
event.type : 事件类型
event.target : 返回事件源（是dom对象!!!）
event.pageX/pageY : 点击的点的坐标
例子4:
$(function(){
$('a').click(function(e){
alert(e.type); //获得事件类型
alert(e.pageX + ' ' +e.pageY);
});
});
1.6.模拟操作//如.$('xxx').mouseenter();
$('xxx').trigger('被模拟的事件');//也可以简化
例子5:
$(function(){
$('#b1').click(function(){
//让username对应的文本输入框获得焦点
$('#username').trigger('focus');
//另外，也可以简化
$('#username').focus();
});
});
2.动画
2.1.show() / hide()//显示 / 隐藏
//作用:通过同时改变元素的宽度和高度来实现显示和隐藏
用法:
show(速度,[回调函数]);
速度可以使用"normal","fast","slow"，也可以使用毫秒数
回调函数会在整个动画执行完毕之后执行
2.2.slideUp() / slideDown()
//作用：通过改变元素的高度来实现显示和隐藏
用法同上。
例子:
$(function(){
$('#a1').toggle(function(){
$('#d1').show('slow');
$('#d1').slideDown('slow');
},function(){
$('#d1').hide('slow');
$('#d1').slideUp('slow');
});
});
2.3.fadeIn() / fadeOut()//淡入，淡出
//作用：通过改变元素的不透明度来实现显示和隐藏
用法同上。
例子:
$(function(){
$('#b1').toggle(function(){
$('#d1').fadeOut('slow');
},function(){
$('#d1').fadeIn('slow');
});
});
2.4.自定义动画
animate(params,speed,[callback])
params : //是一个javascript对象，描述的是动画执行结束时的样式。
speed : //速度，单位是毫秒。
callback : //回调函数，会在动画执行完毕之后执行。
例子:
$(function(){
$('#d1').click(function(){
//动画队列
$(this).animate({'left':'400px'},3000);
$(this).animate({'top':'250'},2000).fadeOut('slow');
});
});
3.类数组的操作
//类数组：指的是jQuery选择器会将查找到的所有的dom对象封装成一个jQuery对象，
//将这些dom对象称为类数组。
3.1.length属性 : //获得jQuery对象包含的dom对象的个数。
3.2.each(fun(i)) : //循环遍历每一个元素,this代表被迭代的dom对象，
//$(this)代表被迭代的jquery对象。
3.3.eq(index) : //返回index+1位置处的jquery对象
3.4.index(obj) : //返回下标，其中obj可以是dom对象或者jquery对象。
3.5.get() : //返回dom对象组成的数组
3.6.get(index) : //返回index+1个dom对象。
例子:
$(function(){
$('#b1').click(function(){
//var $obj = $('ul li');
alert($obj.length);
$obj.each(function(i){
//i:表示正在被访问的那个dom对象的下标,
//下标从0开始。
//this:表示正在被访问的那个dom对象
if(i==0){
$(this).css('font-size','60px');
}else if(i==1){
$(this).css('font-style','italic');
}else{
$(this).css('color','red');
}
});
//var $obj = $('ul li');
var $o = $obj.eq(1);
//$o.css('font-size','60px');
var index = $obj.index($o);
//alert(index);
//var $obj = $('ul li');
var arr = $obj.get();
//alert(arr[1].innerHTML);
var $obj = $('ul li');
var obj = $obj.get(1);
alert(obj.innerHTML);
});
});
1.1.事件绑订
bind(type,fn);
例子:
复制代码 代码如下:
$(function(){
//正式的写法
$('#d1').bind('click',function(){
$(this).css('font-size','80px');
});
//简写形式
$('#d1').click(function(){
$(this).css('font-size','80px');
});
});
1.2.绑订方式的简写形式
复制代码 代码如下:
click(function(){
});
1.3.合成事件
hover(enter,leave) : 模拟光标悬停事件
toggle(fn1,fn2...) : 模拟鼠标连续单击事件
例子1:
复制代码 代码如下:
$(function(){
//分开的事件
$('.s1').mouseenter(function(){
$(this).addClass('s2');
});
$('.s1').mouseleave(function(){
$(this).removeClass('s2');
});
//合成事件
$('.s1').hover(function(){
$(this).addClass('s2');
},function(){
$(this).removeClass('s2');
});
});
例子2:
复制代码 代码如下:
$(function(){
$('#a1').toggle(function(){
$('#d1').show('slow');
},function(){
$('#d1').hide('slow');
});
});
1.4.事件冒泡//子节点产生的事件会依次向上抛给父节点
1.4.1.获得事件对象//只需要给事件处理函数添加一个任意变量即可，比如e
//e不是真正的事件对象，而是对底层的事件对象的一个封装
click(function(e){
});
例子1:
复制代码 代码如下:
$(function(){
$('a').click(function(e){
//e:jQuery对象，里面包含了一个事件对象。
//target属性返回的是一个dom对象，即事件源。
var srcObject = e.target;
alert(srcObject.innerHTML);
});
});
1.4.2.停止冒泡
event.stopPropagation();
例子2:
复制代码 代码如下:
$(function(){
$('a').click(function(e){
alert('你点击了一个链接');
//停止冒泡
e.stopPropagation();
});
$('#d1').click(function(e){
alert('你点击了一个div');
});
});
1.4.3.停止默认行为
event.preventDefault();//比如表单提交
例子3:
复制代码 代码如下:
$(function(){
$('a').click(function(e){
var flag = confirm('是否确定删除?');
if(!flag){
//停止默认行为
e.preventDefault();
}
});
});
1.5.事件对象的属性
event.type : 事件类型
event.target : 返回事件源（是dom对象!!!）
event.pageX/pageY : 点击的点的坐标
例子4:
复制代码 代码如下:
$(function(){
$('a').click(function(e){
alert(e.type); //获得事件类型
alert(e.pageX + ' ' +e.pageY);
});
});
1.6.模拟操作//如.$('xxx').mouseenter();
$('xxx').trigger('被模拟的事件');//也可以简化
例子5:
复制代码 代码如下:
$(function(){
$('#b1').click(function(){
//让username对应的文本输入框获得焦点
$('#username').trigger('focus');
//另外，也可以简化
$('#username').focus();
});
});
2.动画
2.1.show() / hide()//显示 / 隐藏
//作用:通过同时改变元素的宽度和高度来实现显示和隐藏
用法:
show(速度,[回调函数]);
速度可以使用"normal","fast","slow"，也可以使用毫秒数
回调函数会在整个动画执行完毕之后执行
2.2.slideUp() / slideDown()
//作用：通过改变元素的高度来实现显示和隐藏
用法同上。
例子:
复制代码 代码如下:
$(function(){
$('#a1').toggle(function(){
$('#d1').show('slow');
$('#d1').slideDown('slow');
},function(){
$('#d1').hide('slow');
$('#d1').slideUp('slow');
});
});
2.3.fadeIn() / fadeOut()//淡入，淡出
//作用：通过改变元素的不透明度来实现显示和隐藏
用法同上。
例子:
复制代码 代码如下:
$(function(){
$('#b1').toggle(function(){
$('#d1').fadeOut('slow');
},function(){
$('#d1').fadeIn('slow');
});
});
2.4.自定义动画
animate(params,speed,[callback])
params : //是一个javascript对象，描述的是动画执行结束时的样式。
speed : //速度，单位是毫秒。
callback : //回调函数，会在动画执行完毕之后执行。
例子:
复制代码 代码如下:
$(function(){
$('#d1').click(function(){
//动画队列
$(this).animate({'left':'400px'},3000);
$(this).animate({'top':'250'},2000).fadeOut('slow');
});
});
3.类数组的操作
//类数组：指的是jQuery选择器会将查找到的所有的dom对象封装成一个jQuery对象，
//将这些dom对象称为类数组。
3.1.length属性 : //获得jQuery对象包含的dom对象的个数。
3.2.each(fun(i)) : //循环遍历每一个元素,this代表被迭代的dom对象，
//$(this)代表被迭代的jquery对象。
3.3.eq(index) : //返回index+1位置处的jquery对象
3.4.index(obj) : //返回下标，其中obj可以是dom对象或者jquery对象。
3.5.get() : //返回dom对象组成的数组
3.6.get(index) : //返回index+1个dom对象。
例子:
复制代码 代码如下:
$(function(){
$('#b1').click(function(){
//var $obj = $('ul li');
alert($obj.length);
$obj.each(function(i){
//i:表示正在被访问的那个dom对象的下标,
//下标从0开始。
//this:表示正在被访问的那个dom对象
if(i==0){
$(this).css('font-size','60px');
}else if(i==1){
$(this).css('font-style','italic');
}else{
$(this).css('color','red');
}
});
//var $obj = $('ul li');
var $o = $obj.eq(1);
//$o.css('font-size','60px');
var index = $obj.index($o);
//alert(index);
//var $obj = $('ul li');
var arr = $obj.get();
//alert(arr[1].innerHTML);
var $obj = $('ul li');
var obj = $obj.get(1);
alert(obj.innerHTML);
});
});