jquery 学习笔记 (2)--write less,do more
$(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.单击“提交”按钮后表单会提交
对表单提交前验证
$(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 学习笔记 (2)--write less,do more的更多相关文章
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记之插件开发(4)
jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
- jQuery学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
随机推荐
- 【CSS】定位元素居中显示
1.利用margin div { width: 100px; height: 100px; background-color: skyblue; position: absolute; top: 50 ...
- java获取登陆用户的IP地址
/** * 通过HttpServletRequest返回IP地址 * @param request HttpServletRequest * @return ip String * @throws E ...
- C语言之switch
一 switch的语法 switch(表达式){ case 常量表达式1: 代码块1 break; case 常量表达式2: 代码块2 break; case 常量表达式3: 代码块3 break; ...
- 7 -- Spring的基本用法 -- 10...
7.10 高级依赖关系配置 组件与组件之间的耦合,采用依赖注入管理:但基本类型的成员变量值,应直接在代码中设置. Spring支持将任意方法的返回值.类或对象的Field值.其他Bean的getter ...
- windows 下安装mongodb及其配置环境
MongoDB的安装很简单,设置好安装路径后,一直Next直到安装结束,最大的坑就是MongoDB服务的安装,下面具体说下MongoDB安装之后的一些配置操作 一.下载 首先到官网(http://ww ...
- maven项目添加websocket
最近由于项目业务需求,需要用到websocket来实现即时信息的推送,学习了一下websocket,网上搜了一下学习教程,很多版本看的我云里雾里,最后选择用tomcat提供的最新版本(tomcat 启 ...
- C# CacheHelper
using System; using System.Collections; using System.Collections.Generic; using System.Linq; using S ...
- Bucket Sort - leetcode [桶排序]
桶排序(Bucket sort)或所谓的箱排序,是一个排序算法,工作的原理是将数组分到有限数量的桶里.每个桶再个别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排序).桶排序是鸽巢排序 ...
- 关于RDD
1. transform操作返回的是rdd, action操作返回其它数据类型,可以以此来区分操作类型: 2. Spark懒加载,懒到直到Action操作的时候才会加载数据计算,RDD的create和 ...
- css 开发心得
1.一个 div内的行内 元素 如何水平对齐 将内部的元素设为 float ,然后设置 margin-top 对齐,然后 用伪类清楚浮动的影响