Day03jQuery事件绑定
来源:互联网 发布:linux入门教程下载 编辑:程序博客网 时间:2024/06/16 02:12
事件绑定
`
- 基于HTML实现的事件绑定
存在耦合
//HTML: <input type="button" value="按钮" id="btn" onclick="test()"/>//Script: function test(){ alert("按钮点击了"); }
2.基于编程的方式给标签添加事件
注意:页面从上到下加载,将写function方法的那个script标签放于body标签里下面,防止未加载就出来
1)js:
//HTML:<input type="button" value="按钮" id="btn"/>//script:var btn = document.getElementById('btn');btn.onclick = test;//对监听属性赋值一个functionfunction test(){ alert('按钮点击');}
2)jq:
function test(){ alert("按钮点击了"); } $('#btn').click(test);//对id为btn的按钮绑定单击事件//或者$('#btn').click(function(){ alert("按钮点击了"); } );//对id为btn的按钮绑定单击事件
3.在文档加载完毕之后执行代码
若写function的script标签放在上面,则写上window.onload
js:
window.onload = function(){//加载完页面之后执行 }//eg:window.onload = function(){ var btn = document.getElementById('btn'); btn.onclick = test; } function test(){ alert("按钮点击了"); } ;
jq:
①jq完整版:
$(document).ready(function(){//文档加载完毕后运行}//eg:$(document).ready(function(){ $('#btn').click(function(){ alert("按钮点击了"); } ); })
②jq简化版:
$(function(){})eg:$(function(){ $('#btn').click(function(){ alert("按钮点击了"); } ); })
4)其他单击事件
①toggle(); //绑定单击事件,可以绑定多个function,每次触发一个函数,且函数依次循环出现
toggle(test1,test2,test3……);
function test1(){ alert(1); } function test2(){ alert(2); } function test3(){ alert(3); } $(function(){ $('#btn').toggle(test1,test2,test3);//每次点击按钮,触发一个函数,且函数依次循环出现 })
②hover(fn1,fn2); //绑定两个function 相当于mouseover+mouseout(鼠标移入移出)
当鼠标移入时执行fn1,鼠标移出时执行fn2
③submit(); //提交form
form对象(jq).submit();将该表单提交
阅读全文
0 0
- Day03jQuery事件绑定
- 绑定事件
- 绑定事件
- 绑定事件
- 事件绑定
- 事件绑定
- 事件绑定
- 事件绑定
- jquery绑定事件和去除事件绑定
- JS事件之绑定事件
- 事件绑定与事件委托
- jquery事件与绑定事件
- jquery事件与绑定事件
- jquery事件与绑定事件
- jquery事件与绑定事件
- jquery事件与绑定事件
- jquery事件篇-事件绑定
- jQuery基础事件-绑定事件
- 多态 2 polymorphism
- 关于./configure 出错的问题解决
- bzoj2243染色
- OpenCV Error: Insufficient memory
- 逆元概念与模板
- Day03jQuery事件绑定
- Error:Execution failed for task ':app:mergeDebugResources'. > Error: Some file crunching failed, see
- JAVA字符串操作
- 【dfs(深搜)模板】
- (十二)服务雪崩-熔断器
- keil ucosiii工程改为 iar工程
- 方法的调用以及用过super.的方式来调用。三种
- 调用activity.finish()和System.exit(0)的区别
- 排序大综合