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 读取appsettings.json配置文件
Asp .Net Core 如何读取appsettings.json配置文件?最近也有学习到如何读取配置文件的,主要是通过 IConfiguration,以及在Program中初始化完成的. ...
- WebUtils【MD5加密（基于MessageDigest）】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 用于MD5加密,主要场景是在调用登录接口时对密码进行MD5加密处理. 效果图 暂不需要 代码分析 基于Java.security.M ...
- Abp框架之执行Update-Database 命令系列错误
废话不多说,直接开门见山.首先的 第一个错误:一般都是,碰到这个问题不要慌,先不要急着去查看sql服务是否开启,首先按F5启动项目,报错之后直接终止项目,然后再执行Update-Database命令 ...
- Python自省
自省就是通过一定机制查询到对象的内部结构,也就是运行时获取对象内部的属性以及类型,在Python中dir(),type(), hasattr(), isinstance()都是很好的自省例子 #!/u ...
- SQL优化 MySQL版 - 索引分类、创建方式、删除索引、查看索引、SQL性能问题
SQL优化 MySQL版 - 索引分类.创建方式.删除索引.查看索引.SQL性能问题 作者 Stanley 罗昊 [转载请注明出处和署名,谢谢!] 索引分类 单值索引 单的意思就是单列的值,比如说有 ...
- 西安活动 | 4月20日「拥抱开源，又见.NET ：云时代 • 新契机」
云计算日渐兴起,成为提升企业效率和生产力的最终解决方案,而云时代也为软件开发模式带来了翻天覆地的变化.可以说 .NET Core就是这个时代催生的产物.自2016年 .NET Core 1.0 发布以 ...
- MySQL性能基准测试对比：5.7 VS 8.0
本文由云+社区发表 作者:数据库 版权声明:本文由腾讯云数据库产品团队整理,页面原始内容来自于severalnines英文官网,若转载请注明出处.翻译目的在于传递更多全球最新数据库领域相关信息,并不意 ...
- Java基础系列-Enum深入解析
原创文章,转载请标注出处:https://www.cnblogs.com/V1haoge/p/10755129.html 一.概述 枚举就是一个语法糖效果. 定义一个枚举,其实就是定义一个继承抽象类E ...
- MySQL 笔记整理（16） --“order by”是怎么工作的？
笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 16) --“order by”是怎么工作的? 在林老师的课程中,第15 ...
- InnoSetup 以命令行自动编译打包
本章介绍,在新建Innosetup的编译脚本iss文件后,在不运行Innosetup软件的基础上,以bat自动编译运行打包. 一.添加Innosetup软件包 下载InnoSetup软件包并解压到bu ...