jQuery 模拟操作
1.常用模拟
有时，需要通过模拟用户操作，来达到单击的效果。例如在用户进入页面后，就触发 click 事件，而不需要用户去主动单击。在 jQuery 中，可以使用 trigger() 方法完成模拟操作。例如可以使用下面的代码来触发 id 为 btn 的按钮的 click 事件。
<script type="text/javascript">
$(function(){
$('#btn').bind("click", function(){
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", function(){
$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", function(){
$('#test').append("<p>我的绑定函数3</p>");
});
$('#btn').trigger("click");
})
</script>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
这样，当页面装载完毕后，就会立刻输出想要的效果，如上图所示。也可以直接用简化写法 click()，来达到同样的效果：
$('#btn').click();
2.触发自定义事件
trigger() 方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。
例如为元素绑定一个 "myClick" 的事件， jQuery 代码如下：
<script type="text/javascript">
$(function(){
$('#btn').bind("myClick", function(){
$('#test').append("<p>我的自定义事件.</p>");
});
$('#btn').click(function(){
$(this).trigger("myClick");
}).trigger("myClick");
})
</script>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
想要触发这个事件，可以使用以下代码来实现：
$('#btn').trigger("myClick");
实现效果如下图所示。
3.传递数据
trigger(type, [data]) 方法有两个参数，第1个参数是要触发的事件类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。
下面是一个传递数据的例子。
<script type="text/javascript">
$(function(){
$('#btn').bind("myClick", function(event, message1, message2){
$('#test').append("<p>"+message1 + message2 +"</p>");
});
$('#btn').click(function(){
$(this).trigger("myClick",["我的自定义","事件"]);
}).trigger("myClick",["我的自定义","事件"]);
})
</script>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
4.执行默认操作
trigger() 方法触发事件后，会执行浏览器默认操作。例如 ：
$("input").trigger("focus");
以上代码不仅会触发为 <input> 元素绑定的 focus 事件，也会使 <input> 元素本身得到焦点（这是浏览器的默认操作）。
如果只想触发绑定的 focus 事件，而不想执行浏览器默认操作，可以使用 jQuery 中另一个类似的方法—— triggerHandler() 方法。
$("input").triggerHandler("focus");
该方法会触发 <input> 元素上绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的 focus 事件，不会得到焦点。
其他用法
前面已经对 bind() 方法进行了介绍， bind() 方法不仅能为元素绑定浏览器支持的具有相同名称的事件，也可以绑定自定义事件。不仅如此， bind() 方法还能做很多的事情。
1 . 绑定多个事件类型
例如可以为元素一次性绑定多个事件类型。 jQuery 代码如下：
<style>
div{
width:100px;
height:50px;
}
.over{
color:red;
background:#888;
}
</style>
<script type="text/javascript">
$(function(){
$("div").bind("mouseover mouseout", function(){
$(this).toggleClass("over");
});
})
</script>
<body>
<div >滑入.</div>
</body>
当光标滑入<div>元素时，该元素的 class 切换为“ over ”；当光标滑出<div>元素时，class 切换为先前的值。这段代码等同于下面的代码：
<script type="text/javascript">
$(function(){
$("div").bind("mouseover", function(){
$(this).toggleClass("over");
}).bind("mouseout", function(){
$(this).toggleClass("over");
});
});
</script>
很显然，第1种方式能减少代码量，这就是 jQuery 提倡的 “write less，do more”（写得更少，做得更多）理念。
2.添加事件命名空间，便于管理
例如可以把为元素绑定的多个事件类型用命名空间规范起来， jQuery 代码如下：
<script type="text/javascript">
$(function(){
$("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
});
$("div").bind("mouseover.plugin", function(){
$("body").append("<p>mouseover事件</p>");
});
$("div").bind("dblclick", function(){
$("body").append("<p>dblclick事件</p>");
});
$("button").click(function() {
$("div").unbind(".plugin");
})
/*
click,mouseover 事件被删除，
*/
})
</script>
<body>
<div>test.</div>
<button >根据命名空间，删除事件</button>
</body>
在所绑定的事件类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。单击〈button〉元素后，“ plugin” 的命名空间被删除，而不在 “plugin” 的命名空间的 “dbldick” 事件依然存在。
删除多个事件代码也可以写为以下链式代码，但显然上面的方式写得更少。
$("button").click(function() {
$("div").unbind("click").unbind("mouseover");
})
3.相同事件名称，不同命名空间执行方法
例如可以为元素绑定相同的事件类型，然后以命名空间的不同按需调用， jQuery 代码如下：
<script type="text/javascript">
$(function(){
$("div").bind("click",function(){
$("body").append("<p>click事件</p>");
});
$("div").bind("click.plugin", function(){
$("body").append("<p>click.plugin事件</p>");
});
$("button").click(function() {
$("div").trigger("click!"); // 注意click后面的感叹号
});
})
</script>
<body>
<div >test.</div>
<button >根据命名空间，触发事件</button>
</body>
当单击<div>元素后，会同时触发 click 事件和 click.plugin 事件。如果只是单击 <button> 元素，则只触发 click 事件，而不触发 click.plugin 事件。注意， trigger("click!") 后面的感叹号的作用是匹配所有不包含在命名空间中的 click 方法。
如果需要两者都被触发，改为如下代码即可：
$("div").trigger("click"); //去掉click后面的感叹号
jQuery 模拟操作的更多相关文章
- jquery模拟操作——trigger()函数
在页面中很多效果需要触发才能实现,比如click后的弹窗.但有时我们无法点击或是跳过用户触发,就像网页中那些可恶的广告弹窗 trigger函数可以实现模拟操作.譬如常用的点击动作,我们可以这样, $( ...
- jQuery中的模拟操作
jQuery中的模拟操作主要是通过trigger来触发,相当于页面加载完成后不需要用户点击按钮,就可以自动触发页面中的相关事件. trigger(type,[data])可以用来模拟触发自定义事件的触 ...
- 用js或JQuery模拟点击a标签的操作
一.用js模拟点击a标签的操作. jsp代码: <a id="login" href="${pageContext.request.contextPath}/log ...
- 第一百七十一节，jQuery，高级事件，模拟操作,命名空间,事件委托,on、off 和 one
jQuery,高级事件,模拟操作,命名空间,事件委托,on.off 和 one 学习要点: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one jQuery 不但封装了大量常用的事 ...
- Jquery一般操作归纳
一.DOM操作分类 1.DOM Core getElement(s)获得元素 2.HTML-DOM document.对象/操作标签的属性 3.CSS-DOM ...
- jquery模拟点击A标签的问题
我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久. 先看下边的代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <htm ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- IE7中使用Jquery动态操作name问题
问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
随机推荐
- ASP.NET Core WebApi中简单像素转换跟踪实现
像素跟踪虽然是最早用于跟踪营销转换的方法,但它仍然被广泛使用,像Facebook这样的大公司仍然将其视为跟踪网页转换的方法之一. 由于它的简单性,通过像素方法的跟踪转换仍然被广泛使用.它不需要任何复杂 ...
- 《前端之路》之 Cookie && localStorage && Session Storage 缓存相关
08: Cookie && localStorage && Session Storage 缓存相关 客户端.前端 存储 一. 起 因 首先解释下为什么想来写这个关于前 ...
- Asp.Net Core 轻松学-在.Net Core 中使用钩子
前言 Host startup hook,是2.2中提供的一项新的功能,通过使用主机启动钩子,允许开发人员在不修改代码的情况下,在服务启动之前注入代码:通过使用钩子,可以对已部署好的服务在服务 ...
- MySQL 数据库设计总结
本文由云+社区发表 作者:漆洪凯 规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎. 注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索 ...
- SLAM+语音机器人DIY系列：（三）感知与大脑——5.机器人大脑嵌入式主板性能对比
摘要 在我的想象中机器人首先应该能自由的走来走去,然后应该能流利的与主人对话.朝着这个理想,我准备设计一个能自由行走,并且可以与人语音对话的机器人.实现的关键是让机器人能通过传感器感知周围环境,并通过 ...
- js中let和var的区别 不懂得加QQ 2270312758
js中使用let定义变量的时候,是需要使用严格模式的,我看到网上有的博客说:如果在不使用严格模式的情况下,使用let会报错,但是在实验的过程中,我直接定义了let变量而且也没有使用严格模式,并没有报任 ...
- Lucene配置步骤详解
Lucene配置步骤说明: 1.搭建环境: 2.创建索引库: 3搜索索引库. Lucene配置步骤: 第一部分:搭建环境(创建环境导入jar包) 前提:已经创建好了数据库(直接导入book.sql文件 ...
- oracle非正常退出后重启实例
sqlplus /nolog 回车 conn / as sysdba 回车 startup 回车(如果被告知已启动,应先执行 shutdown immediate 回车)
- GridContrl 通用类
using DevExpress.Data; using DevExpress.Utils; using DevExpress.XtraGrid.Views.Grid; using System; u ...
- Hacking HackDay: Albania
概述: Name: HackDay: Albania Date release: 18 Nov 2016 Author: R-73eN Series: HackDay 下载: https://down ...