【锋利的Jquery】读书笔记四
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】读书笔记四的更多相关文章
- 锋利的jQuery读书笔记---选择器
前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 锋利的jQuery读书笔记---jQuery中动画
jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> < ...
- 锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
- 锋利的jQuery读书笔记---jQuery中操作DOM
一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...
- 锋利的jQuery--Ajax(读书笔记四)
1.表单值得序列化 <1>serialize() 例子: html: <form action=""> First name: <input type ...
- <锋利的jQuery>读书笔记
- 【转】Verilog HDL常用建模方式——《Verilog与数字ASIC设计基础》读书笔记(四)
Verilog HDL常用建模方式——<Verilog与数字ASIC设计基础>读书笔记(四) Verilog HDL的基本功能之一是描述可综合的硬件逻辑电路.所谓综合(Synthesis) ...
随机推荐
- jsp连接MySQL数据库显示GIS地理数据乱码问题的解决(select AsText(the_geom))
oh,fuck,经过我昨天下午到今天的努力,终于将这一问题成功解决了,哈哈哈 问题详细描述: 我通过jsp页面连接上MySQL数据库,取出存在表中的地理数据(类型是geometry,具体有POINT. ...
- .NET 相依性注入
发布<.NET 依賴注入>电子书 beta 版 书籍进度 本书目前已经开始发行 beta 版,完成进度约 70%.(我希望这本书不要超过 200 页,目前看起来应该没问题.) 简介 本书内 ...
- 题目要求:建立一个类Str,将一个正整数转换成相应的字符串,例如整数3456转换为字符串"3456".
题目要求:建立一个类Str,将一个正整数转换成相应的字符串,例如整数3456转换为字符串"3456". 关键:怎么将一个数字转换为字符? [cpp] view plaincopy ...
- LInux 2.6 编译内核出现Question
问:在make menuconfig配置完之后(选的默认配置),然后就make出现如下错误:root@org:/usr/src/linux-2.6.32.27# make CHK include/li ...
- CSLA .NET是一个.NET软件开发框架
CSLA .NET是一个.NET软件开发框架,帮助开发者“为Windows.Web.面向服务和工作流等应用构建强大和可维护的业务逻辑层”. CSLA是Component-based, Scalable ...
- TDD单元测试驱动
使用IdleTest进行TDD单元测试驱动开发演练(2) [前言] 1. 有关上篇请参见<使用IdleTest进行TDD单元测试驱动开发演练(1)>,有关本篇用到Entity Fram ...
- c语言:最长对称子串(3种解决方案)
问题描述: 输入一个字符串,输出该字符串中最大对称子串的长度.例如输入字符串:“avvbeeb”,该字符串中最长的子字符串是“beeb”,长度为4,因而输出为4. 解决方法:中序遍历 一,全遍历的方法 ...
- jQuery获取checkbox选中项等操作及注意事项
jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...
- 【ADO.Excel】ADO获取excel的Sheet集合
using (OleDbConnection connection = new OleDbConnection(GetConnectionString())) { connection.Open(); ...
- 我的JQuery复习笔记之①——text(),html(),val()的区别
text():①可匹配多个元素 ②过滤其中的标签(只显示文字) ③只适用于双标签 html():①只匹配选中元素中的第一个 ②不过滤其中标签 ③只适用于双标签 val():①只匹配选中元素中的第一个 ...