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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
javascript 用函数实现继承详解
May 28 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
Java基础类库面试题
2013/09/04 面试题
会计自我鉴定范文
2013/10/06 职场文书
2016高考感言
2015/08/01 职场文书
学习委员竞选稿
2015/11/20 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
Python使用Web框架Flask开发项目
2022/06/01 Python