$(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的更多相关文章

  1. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  2. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  3. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  4. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  5. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  6. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  7. jQuery 学习笔记:jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  8. jQuery学习笔记之插件开发(4)

    jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...

  9. jQuery学习笔记之jQuery的Ajax(3)

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  10. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

随机推荐

  1. [置顶] 使用sping AOP 操作日志管理

    记录后台操作人员的登陆.退出.进入了哪个界面.增加.删除.修改等操作 在数据库中建立一张SYSLOG表,使用Sping 的AOP实现日志管理,在Sping.xml中配置 <!-- Spring ...

  2. 方法输出C++输出斐波那契数列的几种方法

    PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 定义: 斐波那契数列指的是这样一个数列:0, 1, 1, 2, 3, 5, ...

  3. 利用GeneratedKeyHolder获得新增数据主键值

    Spring利用GeneratedKeyHolder,提供了一个可以返回新增记录所对应的主键值的方法: int update(PreparedStatementCreator psc, KeyHold ...

  4. Springmvc @CookieValue实用

    页面直接请求,  Controller代码 @RequestMapping("/testCookieValue") public String testCookieValue(@C ...

  5. Node.js学习笔记(一):快速开始

    最近接了一个node项目,虽然最后顺利完成了,但是由于第一次实战,整个过程是赶出来的,许多地方一知半解.现在项目结束了,就静下心来系统地学一学,理一理,读书不忘拿笔,既然读书了,当然就要记点东西.一方 ...

  6. Python批量重命名

    某无聊的下午的一个小需求 import os dirPath = r'' #路径 format = r'' #后缀 name = 0 for file in os.listdir(dirPath): ...

  7. SUSE linux升级perl及openssl

    一.perl安装: 1.下载并解压软件:tar zxvf perl-5.24.0.tar.gz 2.运行./configure.gnu -help查看帮助,运行./configure.gnu -des ...

  8. 【Time系列五】个性时钟与秒表升级版

    从昨天到现在,一直在研究这个看起来超级简单的时钟.界面非常简洁大方. 虽然是简单,可是这个对齐的问题还是把我整得一塌糊涂.谁叫作者不解释清楚的. 参考:http://bbs.fishc.com/thr ...

  9. Android中设定EditText的输入长度

    方法一:可以在layout xml中加上属性android:maxLength 比如: <EditText         android:id="@+id/editTextShow& ...

  10. 2.开启TFTP,NFS,SAMBA,SSH服务

    一.TFTP (1)dpkg -s tftp-hpa查看服务器端是否安装 (2)如果没安装 sudo apt-get install tftpd-hpa sudo apt-get install tf ...