jquery 动态绑定bind()及模拟鼠标点击A链接
2024-08-25 01:00:43
近来自觉前端有小小进步,幸而记之。
1、两个 css class 紧挨在一起
则在html元素中,要同时拥有这两个class,才能起作用
.block.db{
background-image:url(/cas/images/hnhy/db.png);
}
<div class="block db"><div class="btn btn_bg" ></div></div>
2、动态绑定事件
动态绑定,可以节省代码。设想有一张列表,每行都有一个鼠标移入移出的事件处理,假如事先写好,代码得多出不少。用JS脚本动态绑定,则非常简洁:
$(function(){
$(".block div.btn").bind("mouseover",function(){
$(this).removeClass("btn_bg").addClass("btn_bg_on");
});
$(".block div.btn").bind("mouseout",function(){
$(this).removeClass("btn_bg_on").addClass("btn_bg");
});
});
这里有个问题,就是事件处理中,如何知道哪个元素触发了事件?如果是html中预先写好,当然可以将“this”参数传进去。动态绑定呢?酱紫:$(this)。
另外,这里说的是jquery 的 bind(),而不是标准 javascript的bind()。后者与apply,call一样,改变this指针,唯一不同的是,bind()不是立即执行,而是返回一个函数。详见拙作:Javascript中的apply、call、bind
3、代码模拟鼠标点击 a 链接
假设有
<a id="a" href="" target="_blank" style="display:none;">jump</a>
则下面语句不起作用。是点击了a没错,可以触发其click事件,但并没有跳转:
$("#a").click();
原因是,我们在网页中点击链接,其实点击的是链接中的文字或图片什么的,而不是链接本身。因此,应该酱紫写:
$("#a")[0].click();
4、两个符合条件的选择器:
$("#firstmenu li:first,#firstmenu li:last").bind('mouseout', function () {
if ($(this).attr("attr1") == '0') {
$(this).removeClass("hy_mainmenu_active");
}
});
最新文章
- 订制DOM选择器
- 在Linux下的中断方式读取按键驱动程序
- Linux 性能优化工具包 sysstat 以及 sysstat 服务
- Windows 2008 R2 Powershell 3.0
- C# 序列化与反序列化
- POJ 3321 Apple Tree(树状数组)
- ZOJ3778--一道水题
- 关于QT的系统总结
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
- Android Multiple Screens Android 屏幕适配的一些总结
- HDU-4255 BFS 最短路
- Python装饰器(decorator)
- PICT实现组合测试用例(一)
- 公司的SVN服务器改变了IP地址,请问以前下载的代码如何同步,
- JavaScript实例技巧精选(13)—计算在网页上的停留时间
- [ASP.NET MVC]笔记(一)模型和HTML辅助方法
- 一个仿3D的平面游戏页面
- ffdshow 源代码分析 9: 编解码器有关类的总结
- aspectj编程简介
- Confluence 6 导入一个文本文件