`

JQ 模拟操作

 
阅读更多

demo.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 13px;
	line-height: 130%;
	padding: 60px;
}
p {
	width: 200px;
	background: #888;
	color: white;
	height: 16px;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<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>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
</html>

效果图:

 

demo2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 13px;
	line-height: 130%;
	padding: 60px;
}
p {
	width: 200px;
	background: #888;
	color: white;
	height: 16px;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$('#btn').bind("myClick", function(){
		$('#test').append("<p>我的自定义事件.</p>");
	});
	$('#btn').click(function(){
		$(this).trigger("myClick");
	}).trigger("myClick");
})
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
</html>

效果图:


demo3.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 13px;
	line-height: 130%;
	padding: 60px;
}
p {
	width: 200px;
	background: #888;
	color: white;
	height: 16px;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<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>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
</html>

效果图:

 

demo4.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 13px;
	line-height: 130%;
	padding: 60px;
}
p {
	width: 200px;
	background: #888;
	color: white;
	height: 16px;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$('#old').bind("click", function(){
		$("input").trigger("focus");
	});
	$('#new').bind("click", function(){
		$("input").triggerHandler("focus");
	});
	$("input").focus(function(){
		$("body").append("<p>focus.</p>");
	})
})
</script>
</head>
<body>
<button id="old">trigger</button>
<button id="new">triggerHandler</button>
<input />
</body>
</html>

效果图:

 

 

 

  • 大小: 31.3 KB
  • 大小: 29.8 KB
  • 大小: 29.4 KB
  • 大小: 29.5 KB
分享到:
评论

相关推荐

    H5+JQ模拟支付页面

    在IT行业中,构建一个模拟支付页面是常见的需求,特别是在电商网站和移动应用中。...总的来说,这个“H5+JQ模拟支付页面”提供了一个便捷的起点,帮助开发者快速实现一个功能完备且具有良好用户体验的支付界面。

    jq模拟excel.zip

    标题中的"jq模拟excel.zip"表明这是一个使用jQuery(通常简称为jq)库来模拟电子表格功能的项目。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在这个项目中,它被用来...

    jq写的模拟elementui的select

    标题中的"jq写的模拟elementui的select"意味着有人使用jQuery来仿造ElementUI中的Select组件功能。这通常是因为在某些项目中,可能由于历史原因或者特定需求,开发者选择了jQuery而不是Vue.js作为主要的JavaScript库...

    完整版模拟鼠标移动.rar

    模拟鼠标移动是通过编程方式来模拟真实用户操作鼠标的动作。这通常涉及到操作系统级别的API调用,或者使用特定的库和框架。在Windows平台上,这可能涉及Windows API函数,如`SendInput`;在Linux或MacOS中,可能会...

    jQuery模拟WEB操作系统界面代码.rar

    jmos家猫WEB系统,基于jquery模拟的WEB操作系统界面系统,使用火狐,谷歌,苹果,IE9及以上版本浏览器可获得最佳浏览效果。桌面菜单支持右键,点击后可进入相应的导航,整体风格是模仿Windows桌面,运行效果图请看本站...

    jquery模拟

    **jQuery模拟**是一种...总之,jQuery模拟是一个有价值的练习,可以帮助开发者巩固JavaScript基础,理解DOM操作,以及AJAX通信的工作流程。通过这个过程,我们可以更好地掌握jQuery库,并能更高效地应用到实际项目中。

    JQ8400说明书

    - **U 盘模式 SPI Flash 更新**:支持将 SPI Flash 模拟成 U 盘,可以直接像操作 U 盘一样更新其中的语音文件,极大地简化了内容更新流程。 - **丰富的功能控制**:支持上一曲、下一曲、播放、暂停、停止、选曲等...

    jQuery模拟select效果

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务。在一些场合,由于浏览器兼容性问题或者设计需求,我们可能需要模拟原生HTML `&lt;select&gt;` 标签的功能,例如创建下拉...

    layui问题之模拟select点击事件的实例讲解

    - **自动触发下拉**: 通过JavaScript代码模拟用户操作,触发select的下拉框。 - **选择特定选项**: 自动点击下拉框中的特定选项。 #### 示例代码 - 使用jQuery选择器和`click()`方法来模拟用户点击操作,实现自动...

    JQ8400语音模块使用说明书V1.2.docx

    在使用JQ8400模块时,用户可以通过USB数据线连接模块,电脑会自动识别并允许用户像操作U盘一样拷贝声音文件。对于串口控制,需要在特定文件夹下存放声音文件,并遵循特定的文件命名规则。深圳佳强电子科技有限公司...

    JQ8400-FL语音模块使用说明书V1.5.pdf

    6. **SPIFLASH模拟成U盘**:可以直接把SPIFLASH模拟成U盘进行操作,便于更新语音内容。 7. **播放控制功能**:支持播放、暂停、停止、选曲等常用功能,以及曲目序号获取和总曲目信息查询。 8. **插播和组合播放**:...

    图片查看 -jq插件

    对于老式浏览器,插件可能需要回退到JavaScript的逐像素操作来模拟这些效果。 在实际应用中,开发者需要考虑兼容性和性能优化。例如,大图片的预加载策略可以提高用户体验,避免用户在点击图片后等待加载的时间过长...

    51单片机嵌入式语音模块说明(JQ8900-16P)

    特别是,SPIFLASH可以模拟成U盘,用户可以直接像操作U盘那样更新SPIFLASH中的语音内容。 模块还具有丰富的功能特性,如上一曲、下一曲、播放、暂停、停止、选曲等基本控制,以及曲目序号获取、总曲目信息查询等高级...

    jquery 实现的下拉框模拟

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理、动画设计等任务。在“jquery 实现的下拉框模拟”中,我们讨论的是如何利用 jQuery 来创建功能丰富的、自定义化的下拉选择器,...

    JQ 徘徊轮播LI

    综上所述,JQ-UI-LI徘徊轮播是一个结合了jQuery、DOM操作、数据追加、动画效果和用户交互的复杂组件,它的实现涉及到了前端开发的多个重要方面。通过学习和实践,开发者可以掌握这一技术,为自己的项目增添生动且...

    JQ8400语音模块资料包

    【JQ8400语音模块】是一款广泛应用在电子设备中的语音播放模块,它具有集成度高、操作简便、音质优良等特点。该模块通常用于智能家居、玩具、安防系统、汽车电子等领域,能够实现语音提示、语音交互等功能。在本资料...

    JQ8400-FL语音模块使用说明书V1.3.pdf

    该模块还支持SPIFLASH模拟成U盘,这意味着可以像操作U盘一样更新存储在SPIFLASH里的音频内容,极大地简化了音频更新的过程,用户无需复杂的上位机操作。 多种功能控制也是JQ8400-FL语音模块的一大亮点。用户可以...

    DIV模拟select下拉框

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画等功能,使得开发这样的模拟下拉框变得更加简单。通过jQuery,我们可以轻松地监听用户的行为,如点击事件,然后动态显示或隐藏下拉选项,同时...

    jQuery模拟IOS开关按钮代码.zip

    "jQuery模拟IOS开关按钮代码"就是为实现这一效果而编写的代码资源,它可以帮助开发者在非iOS平台上创建类似iOS的滑动开关,提高网页的交互性和美观性。 首先,这个项目是基于jQuery库来实现的,jQuery是一个广泛...

Global site tag (gtag.js) - Google Analytics