jquery中的事件及动画

一.事件

页面加载

$(document).ready(function(){xxxxx})

简写

$(function(){
//do something
})

元素绑定事件

bind()   on()

bing(事件类型，可选参数：事件对象的额外的数据对象，绑定处理函数)；

hover（）  toggle（）//1.91版本后去除 解决办法 详见我另一篇文章

自定义事件

事件冒泡

<script type="text/javascript">

$(function(){

    // 为span元素绑定click事件

    $('span').bind("click",function(){

        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";

        $('#msg').html(txt);

    });

    // 为div元素绑定click事件

    $('#content').bind("click",function(){

        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";

        $('#msg').html(txt);

    });

    // 为body元素绑定click事件

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";

        $('#msg').html(txt);

    });

})

</script>

</head>

<body>

<div id="content">

    外层div元素

    <span>内层span元素</span>

    外层div元素

</div>

<div id="msg"></div>

阻止默认事件

event.stopPropagation();  或者 rturn  false
<script type="text/javascript">

             $('#content').bind("click",function(event){

        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";

        $('#msg').html(txt);

        event.stopPropagation();

    });

移除事件

unbind

模拟事件

trigger（）与 one（）

二.动画

跳过show  hide

animate（）方法

【锋利的Jquery】读书笔记四的更多相关文章

  1. 锋利的jQuery读书笔记---选择器

    前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...

  2. 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

    serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...

  3. 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法

    load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...

  4. 锋利的jQuery读书笔记---jQuery中Ajax--load方法

    第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  5. 锋利的jQuery读书笔记---jQuery中动画

    jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> < ...

  6. 锋利的jQuery读书笔记---jQuery中的事件

    jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...

  7. 锋利的jQuery读书笔记---jQuery中操作DOM

    一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...

  8. 锋利的jQuery--Ajax(读书笔记四)

    1.表单值得序列化 <1>serialize() 例子: html: <form action=""> First name: <input type ...

  9. <锋利的jQuery>读书笔记

  10. 【转】Verilog HDL常用建模方式——《Verilog与数字ASIC设计基础》读书笔记(四)

    Verilog HDL常用建模方式——<Verilog与数字ASIC设计基础>读书笔记(四) Verilog HDL的基本功能之一是描述可综合的硬件逻辑电路.所谓综合(Synthesis) ...

随机推荐

  1. Forget Java to learn Javascript from 0.--Day 1

    The first day,when I read 'we need practice so we need a Javascript Interpreter.','Every browser has ...

  2. swfupload多文件上传[附源码]

    swfupload多文件上传[附源码] 文件上传这东西说到底有时候很痛,原来的asp.net服务器控件提供了很简单的上传,但是有回传,还没有进度条提示.这次我们演示利用swfupload多文件上传,项 ...

  3. JavaScript插件——弹出框

    (JavaScript插件——弹出框) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.htm ...

  4. pydev去掉右边的预览栏minimap

    eclipse pydev: preferences > PyDev > Editor > Overview Ruler Minimap

  5. windows phone 8环境搭建

    windows phone 8 开发系列(一)环境搭建   一:前奏说明 本人一名普通的neter,对新玩意有点小兴趣,之前wp7出来的时候,折腾学习过点wp7开发,后来也没怎么用到(主要对微软抛弃w ...

  6. 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  7. mmDeferred

    前端异步解决方案——mmDeferred Deferred是前端解决异步操作的一种编程范式,后来出现的Promise规范更是让其普适性大大提高.不过Promise规范也存在分岐.现在最流行的是Prom ...

  8. 创建简单的响应式HTML5模版

    创建简单的响应式HTML5模版 HTML5目前发展势头良好,已经逐渐得到大部分浏览器不同程度的支持.许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页.与此 ...

  9. Caffe Ubuntu14.04 64位 的最快安装 （cuda7.5 + cudnn7.0 2016最新）

    最近因为各种原因,装过不少次Caffe,安装过程很多坑,为节省新手的时间,特此总结整个安装流程. 关于Ubuntu 版本的选择,建议用14.04这个比较稳定的版本,但是千万不要用麒麟版!!!比原版体验 ...

  10. django model Foreign key usage 关系型数据库 ORM

    django 的模型 from django.db import models""" A model pair to map car and its manufactur ...