jquery 学习笔记 (2)--write less,do more
2015-12-21 18:11
666 查看
$(window).load(function(){ }) window.onload=function(){ }
toggle()方法
toggle()方法的语法结构:
toggle(fn1,fn2,...,fnN);
作用1.toggle()方法用于模拟鼠标连续单击事件
控制元素的隐藏与显示
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
});
作用2.切换元素的可见状态
$("#panel h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})
});
阻止默认行为
网页中的元素有自己默认的行为,如
1.单击超链接后会跳转
2.单击“提交”按钮后表单会提交
对表单提交前验证
如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false
event.preventDefault(); //阻止默认行为
event.stopPropagation(); //停止事件冒泡
jQuery不支持事件捕获
event.target 获取到触发事件的元素
event.target.nodeName 元素名称 P H3 SPAN等等
trigger()方法
trigger()方法触发事件后,会执行浏览器默认操作,例如:
$("input").trigger("focus");
不仅会触发为<input>元素绑定的focus事件,也会使<input>元素本身得到焦点(浏览器的默认操作)
解决办法:triggerHandler()方法
$("input").triggerHandler("focus");
会触发<input>元素上绑定的特定事件,同时取消浏览器对此事件的默认操作。即文本框只触发绑定的focus事件,不会得到焦点。
绑定多个事件类型
$(function(){
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
});
});
当光标滑入<div>元素时,该元素的class切换为"over";当光标滑出<div>元素时,class切换为先前的值。这段代码等同于:
$(function(){
$("div").bind("mouseover",function(){
$(this).toggleClass("over");
}).bind("mouseout",function(){
$(this).toggleClass("over");
});
});
toggle()方法
toggle()方法的语法结构:
toggle(fn1,fn2,...,fnN);
作用1.toggle()方法用于模拟鼠标连续单击事件
控制元素的隐藏与显示
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
});
作用2.切换元素的可见状态
$("#panel h5.head").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
})
});
阻止默认行为
网页中的元素有自己默认的行为,如
1.单击超链接后会跳转
2.单击“提交”按钮后表单会提交
对表单提交前验证
$(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); if(username == ""){ $("#msg").html("<p>文本框的值不能为空.</p>"); event.preventDefault(); } }); }) <form action=""> username:<input type="text" id="username" /> <input type="submit" value="提交" id="sub" /> </form> <div id="msg"></div>
如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false
event.preventDefault(); //阻止默认行为
event.stopPropagation(); //停止事件冒泡
jQuery不支持事件捕获
event.target 获取到触发事件的元素
event.target.nodeName 元素名称 P H3 SPAN等等
trigger()方法
trigger()方法触发事件后,会执行浏览器默认操作,例如:
$("input").trigger("focus");
不仅会触发为<input>元素绑定的focus事件,也会使<input>元素本身得到焦点(浏览器的默认操作)
解决办法:triggerHandler()方法
$("input").triggerHandler("focus");
会触发<input>元素上绑定的特定事件,同时取消浏览器对此事件的默认操作。即文本框只触发绑定的focus事件,不会得到焦点。
绑定多个事件类型
$(function(){
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
});
});
当光标滑入<div>元素时,该元素的class切换为"over";当光标滑出<div>元素时,class切换为先前的值。这段代码等同于:
$(function(){
$("div").bind("mouseover",function(){
$(this).toggleClass("over");
}).bind("mouseout",function(){
$(this).toggleClass("over");
});
});
相关文章推荐
- jQuery:获取浏览器中的分辨率
- jQuery插件开发教程
- jquery jsonp跨域调用接口
- jQuery deffered和promise对象方法
- JQuery—display和Show()方法
- jquery 设置css margin-left
- 分页处理 jquery ajax
- JQ中判断list是否含有元素
- jquery 使用过程中,iso 与 安卓 ,chrome ,ie 的差异性
- jquery中的$(document).ready(function(){})和$(window).load()比较
- 推荐5个应用 jQuery 特效的精美特效
- JQuery__jquery控制select的text/value值为选中状态
- JQuery—手机号码验证
- jQuery Validate验证框架详解
- jQuery实现的全选、反选和不选功能
- jQuery插件开发的两种方法及$.fn.extend的详解
- 关于jquery的rorate插件在IE7,8下不转动的问题
- 【转】jquery获取页面跳转的传值
- jquery selectize插件使用
- jQuery实践树(2)