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也有类似的 ...
随机推荐
- ZooKeeper 03 - ZooKeeper集群的脑裂问题 (Split Brain问题)
目录 1 ZooKeeper的主从机制 2 什么是ZooKeeper的脑裂 2.1 脑裂现象的表现 2.2 为什么会出现脑裂 3 ZooKeeper如何解决"脑裂" 3.1 3种可 ...
- 【Python3爬虫】使用异步协程编写爬虫
一.基本概念 进程:进程是一个具有独立功能的程序关于某个数据集合的一次运行活动.进程是操作系统动态执行的基本单元. 线程:一个进程中包含若干线程,当然至少有一个线程,线程可以利用进程所拥有的资源.线程 ...
- View的绘制流程
这是年假最后一篇笔记了,本篇文章的内容主要来自<android开发艺术探索>,在文章的最后有这本书的网上版本. 项目源码 目录 MeasureSpec SpecMode分类 UNSPECI ...
- 数据分析之matplotlib.pyplot模块
首先都得导模块. import numpy as np import pandas as pd import matplotlib.pyplot as plt from pandas import S ...
- C#写一个简单爬虫
最近研究C#的爬虫写法,搞了半天,才在网上很多的写法中整理出了一个简单的demo(本人菜鸟,大神勿喷).一是为了自己记录一下以免日后用到,二是为了供需要朋友参考. 废话不多说,上代码 using Ht ...
- &，^，|，的简化计算与理解
(全部和2进制有关 , 凡是2的次方数都是独立数列,都要先分解再计算的,该计算方式仅供手工计算理解,电脑会自动进行换算的) (第二个等号后面为2进制的结果,不够位在前面补0,1为真,0为假) A^ ...
- Spring Cloud 系列之 Eureka 实现服务注册与发现
如果你对 Spring Cloud 体系还不是很了解,可以先读一下 Spring Cloud 都有哪些模块 Eureka 是 Netflix 开源的服务注册发现组件,服务发现可以说是微服务架构的核心功 ...
- 了解一下 - Base64
Base64编码是最常见的编码方式(使用64个字符表示任意8bit字节序列),是一种基于64个可打印字符来表示任意二进制数据的方法,是从二进制转换到可见字符的过程. 使用场景 数据加密后通过Base6 ...
- html meta标签使用及属性介绍
自学前端开始,我对meta标签接触不多,主要把精力都集中在能显示出来的标签上,比如span.button.h1等等.有时候去查看一些知名网站的源码,发现head标签里有一大摞的meta. 今天就来学习 ...
- 从APP跳转到微信指定联系人聊天页面功能的实现与采坑之旅
起因: 最近做的APP中有一个新功能:已知用户微信号,可点击直接跳转到当前用户微信聊天窗口页面. 当时第一想法是使用无障碍来做,并且觉得应该不难,只是逻辑有点复杂.没想到最终踩了好多坑,特地把踩过的坑 ...