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中使用GraphQL - 第六章 使用EF Core作为持久化仓储
ASP.NET Core中使用GraphQL ASP.NET Core中使用GraphQL - 第一章 Hello World ASP.NET Core中使用GraphQL - 第二章 中间件 ASP ...
- DeviceUuidFactory【获取设备唯一标识码的UUID（加密）】【需要运行时权限的处理的配合】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 有时需要对用户设备进行标识,所以希望能够得到一个稳定可靠并且唯一的识别码.虽然Android系统中提供了这样设备识别码,但是由于An ...
- js 获取上传视频的时长、大小、后缀名
参考资料:获取时长 var fileName = $("#sectionfileUpload").val(); //C:\fakepath\3.jpeg var exts = fi ...
- c#中如何使用到模糊查询
c#中如何使用到模糊查询,先举个最简单实用的例子,可在vs控制台应用程序中输出: 定义实体类: public class Student { public int ...
- jQuery(四)、文档处理
1 内部插入 1.1 append(content | fn) 向每个匹配的元素内部追加内容. 参数: (1) content:要追加到目标中的内容. (2) function(index, html ...
- Java开发笔记（八十七）随机访问文件的读写
前面介绍了字符流读写文件的两种方式,包括文件字符流和缓存字符流,但是它们的写操作都存在一个问题:不管是write方法还是append方法,都只能从文件开头写入,而不能追加到文件末尾或者在文件中间某个位 ...
- oracle学习笔记（四） DQL数据查询语言和TCL 事务控制语言
DML 数据管理语言 Data manage language insert, update, delete以及select语句,不过,有人也把select单独出来,作为DQL 数据查询语言 data ...
- 单机Qps上限是多少？
现在这个年代,你要是不懂高并发,你都不好意思说自己是搞互联网的! 一.什么是并发,什么是高并发 并发,两个及以上的行为一起发生,比如你一边吃饭一边看电视 高并发,多个行为(至于是多少,这个没有定数,你 ...
- C# 委托还能这样用
一直找不到一种能够让很多对象都能在几乎同时接收到通知的方法.介绍下目前在用的,希望能够抛砖引玉. 首先随便贴一下观察者模式的两接口,观察者模式自行搜索设计模式. public interface IS ...
- Java 原始模型（Prototype）模式
一.什么是原型模式: 通过给出一个原型对象指明所要创建的对象的类型,然后通过复制这个原型对象来获取的更多的同类型的对象. 在Java语言中,支持原型模式,所有的对象都继承自Object对象,Objec ...