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 ...
随机推荐
- [置顶] 使用sping AOP 操作日志管理
记录后台操作人员的登陆.退出.进入了哪个界面.增加.删除.修改等操作 在数据库中建立一张SYSLOG表,使用Sping 的AOP实现日志管理,在Sping.xml中配置 <!-- Spring ...
- 方法输出C++输出斐波那契数列的几种方法
PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 定义: 斐波那契数列指的是这样一个数列:0, 1, 1, 2, 3, 5, ...
- 利用GeneratedKeyHolder获得新增数据主键值
Spring利用GeneratedKeyHolder,提供了一个可以返回新增记录所对应的主键值的方法: int update(PreparedStatementCreator psc, KeyHold ...
- Springmvc @CookieValue实用
页面直接请求, Controller代码 @RequestMapping("/testCookieValue") public String testCookieValue(@C ...
- Node.js学习笔记(一):快速开始
最近接了一个node项目,虽然最后顺利完成了,但是由于第一次实战,整个过程是赶出来的,许多地方一知半解.现在项目结束了,就静下心来系统地学一学,理一理,读书不忘拿笔,既然读书了,当然就要记点东西.一方 ...
- Python批量重命名
某无聊的下午的一个小需求 import os dirPath = r'' #路径 format = r'' #后缀 name = 0 for file in os.listdir(dirPath): ...
- SUSE linux升级perl及openssl
一.perl安装: 1.下载并解压软件:tar zxvf perl-5.24.0.tar.gz 2.运行./configure.gnu -help查看帮助,运行./configure.gnu -des ...
- 【Time系列五】个性时钟与秒表升级版
从昨天到现在,一直在研究这个看起来超级简单的时钟.界面非常简洁大方. 虽然是简单,可是这个对齐的问题还是把我整得一塌糊涂.谁叫作者不解释清楚的. 参考:http://bbs.fishc.com/thr ...
- Android中设定EditText的输入长度
方法一:可以在layout xml中加上属性android:maxLength 比如: <EditText android:id="@+id/editTextShow& ...
- 2.开启TFTP,NFS,SAMBA,SSH服务
一.TFTP (1)dpkg -s tftp-hpa查看服务器端是否安装 (2)如果没安装 sudo apt-get install tftpd-hpa sudo apt-get install tf ...