jquerydom对象的事件隐藏显示和对象数组示例


Posted in Javascript onDecember 10, 2013

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); 
}); 
});
Javascript 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
使用vue制作滑动标签
Sep 21 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 #Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 #Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 #Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 #Javascript
javascript修改表格背景色实例代码分享
Dec 10 #Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 #Javascript
javascript中文本框中输入法切换的问题
Dec 10 #Javascript
You might like
PHP多进程编程实例
2014/10/15 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
vue上传图片组件编写代码
2017/07/26 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
vue-router传参用法详解
2019/01/19 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
Python制作爬虫采集小说
2015/10/25 Python
Python 备份程序代码实现
2017/03/06 Python
django文档学习之applications使用详解
2018/01/29 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers