1.$("#id").bind("click",function(){
//dosomething
});
2.$(".className").mouseover(function(){
//dosomethind(简写)
});
3.$(function(){
$("xx xx.className").hover(function(){
//进入这个元素的时候
},function(){
//离开这个元素的时候
});
});
4.$("#idName").toggle(function(){},function(){},function(){});可以有N个参数,每单击一下元素，就触发第一个，然后第二个，第N个，再第一个
事件冒泡
5.event.stopPropagation();停止冒泡事件
6.event.preventDefault(); 阻止默认行为
###################也可以return false停止冒泡事件和阻止默认行为,而不调用上面的方法
jquery不支持事件捕获
7.event.type获得事件的类型如click
$(function(){
$("a").click(function(event){
alert(event.type);
event.preventDefault();
});
});
8.event.target获得触发事件的元素
$(function(){
$("a").click(function(event){
alert(event.target);
alert(event.target.href); //a要转到的连结地址
event.preventDefault();
});
});
9.event.pageX,event.pageY方法
$(function(){
$("p").click(function(event){
alert(event.pageX);
alert(event.pageY)
event.preventDefault();
});
});
10.event.which 鼠标单击中获得左，中，右键，分别为1,2,3
$(function(){
$("body").mousedown(function(e){
alert(e.which);
event.preventDefault();
});
});
11.键盘按下事件
$("body").keydown(function(e){
alert(e.keyCode)
});
12.删除以前注册的事件
$("input[type=button][value=submit]").unbind();//删除注册的所有事件
$("input[type=button][value=submit]").unbind("click");//删除注册的所有click事件
$("input[type=button][value=submit]").unbind("click",langhua);//只删除注册的函数名叫langhua的click事件
13.注册的事件只发生一次然后就不再发生了(one方法)
$("input[value=Click]").one("click",function(){
alert("AAAAAAAAAAAAAA");
});
模拟操作
14.常规模拟
$("input[id=langhua]").trigger("focus").trigger("select"); //模拟文本框得到焦点,并模拟全选事件
也可以简写成$("input[id=langhua]").focus().select();
15.触发自定义事件
$("input[type=button][value=submit]").bind("myClick",function(){
alert("自定义事件");
});
$("input[type=button][value=submit]").trigger("myClick");//这样就触发了自己定义的事件
16.触发要传递数据的事件
$("input[type=button][value=submit]").bind("myClick",function(field1,field2){
alert(field1+"__"+field2);
});
$("input[type=button][value=submit]").trigger("myClick",["value1","value2"]);//这样就触发了自己定义的事件
17.
$("input[id=langhua]").trigger("focus") //不仅会触发focus事件,还会触发默认的得到焦点事件
//所以如果只想单纯的触发一个事件就用$("input[id=langhua]").triggerHandler("focus");
动画
18.Jquery做的动话都要求在标准模式下,即头部的DTD为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
不然的话会有可能产生动画抖动
19. show(),hide()方法
有三个可用的参数slow,normal,fast分别是600,400,200毫秒
还可以直接用毫秒数
20. fadeIn(),fadeOut()方法,改变透明度
也可以传时间
21.slideDown()[这个是显示],slideUp()[这个是隐藏]改变高度
22.自动简单动画
animate(params,speed,callback);
(1)params:一个包含样式属性及值的映射,如{property1:"value1",property2:"value2".....}
(2)speed:速度参数,可选
(3)callback:动画完成时执行的函数,可选
例如:
#langhua{
position: relative;
width: 100px;
height: 100px;
border: 1px solid #0050d0;
background:#96E555;
cursor: pointer
}
页面DIV
<div id="langhua"></div>
为了使元素动起来必须先设置DIV的position: relative;或position: absolute;
然后加截click事件
$(function(){
$("#langhua").click(function(){
$(this).animate({left:"500px",top:"300px"},3000);
});
});
累加累减写法
$(function(){
$("#langhua").click(function(){
$(this).animate({left:"+=500px",top:"-=300px",height:"-=10px"},3000);
});
});
多重动画(动画队列,一个一个的运行)
$(function(){
$("#langhua").click(function(){
$(this).animate({left:"+=500px"},3000);
$(this).animate({top:"-=300px"},2000);
$(this).animate({height:"-=10px"},100);
});
});
$(function(){
$("#langhua").click(function(){
$(this).animate({left:"+=500px"},3000).animate({top:"-=300px"},2000)
.animate({height:"-=10px"},100)
.fadeOut();
});
});
23.停止动画stop()
停止动画对列stop(true);(page 129)
24.判断元素是否处于动画状态
if(!$("#langhua").is(":animated")){
//没有处于动画状态的就加上动画状态
}
25.toggle()方法,切换元素可见状态,如果元素是可见的,就换成不可见的,如果是不可见的,就换成可见的.
26.slideToggle()方法,同上面的方法,这个是高度变化
27.fadeTo()方法,把元素的不透明度,以渐进的方法调整到指定值
$("#panel h5.head").click(function(){
$(this).next("div.content").fadeTo(600,0.2);
});
分享到：
相关推荐
**jQuery学习笔记--1** jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本篇笔记将深入探讨jQuery的基础知识，包括其核心概念、选择器、DOM操作、事件...
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
总结来说，《jQuery学习笔记源码1-3章》提供了从基础到实践的全面教程，通过学习和实践这些源码，你将能够熟练掌握jQuery的基本操作，如选择元素、处理事件和创建动画，为后续的Web开发工作打下坚实基础。...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念，通过实例代码来加强理解和应用。 1. **jQuery选择器**:...
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库，它简化了网页文档对象模型（DOM）操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在...
**jQuery学习笔记** jQuery，作为一个轻量级的JavaScript库，极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧，帮助初学者快速上手。 ## 一...
《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源，由知名讲师韩顺平的课程实录整理而成，旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...
这里，我们有针对这两个主题的学习笔记和参考资料，包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先，`JavaScript培训.zip`可能包含的是对...
《jQuery学习笔记详解》 jQuery，作为一款广泛应用于前端开发的JavaScript库，因其简洁的语法和强大的功能，深受开发者喜爱。这份"jQuery学习笔记.rar"包含的资源旨在帮助你全面掌握jQuery，无论你是初学者还是有...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记，以HTML页面的形式呈现，方便阅读和...
以下是对JQuery学习笔记的详细解析： 首先，JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异，导致开发跨浏览器的网页应用变得复杂。为了统一这些...
### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax？** Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用来创建快速动态网页的技术，通过在后台与服务器进行少量数据...
### JQuery学习笔记（技术文档） #### 一、JQuery能做什么？ JQuery 是一款轻量级的 JavaScript 库，它的设计宗旨是“write less, do more”，即“写得更少，做得更多”。通过JQuery，可以实现以下功能： 1. **...
**jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分，旨在帮助开发者从初级到高级...
**jQuery学习笔记 jQuery API** jQuery，作为一款广泛使用的JavaScript库，极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本笔记旨在帮助开发者快速上手并深入理解jQuery的核心概念和API。 ### 1. jQuery...
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
了解如何通过JavaScript选择元素、添加/删除元素、修改属性和事件监听等是jQuery学习的前提。 3. HTML和CSS：熟悉基本的HTML标签结构和CSS样式规则，能编写常见的HTML页面和CSS样式，有助于更好地理解jQuery对页面...
《jQuery学习笔记详解》 jQuery，作为一款广泛应用于Web开发的JavaScript库，以其简洁的API、强大的功能和广泛的社区支持，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...
这份"js&jquery学习笔记"应该包含对这些概念的详细解释，以及示例代码和练习，帮助读者理解和掌握这两种技术。对于初学者来说，这是一份宝贵的资源，能够快速上手JavaScript和jQuery，提升Web开发技能。
在深入探讨jQuery的知识点之前，首先需要理解jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。jQuery的核心特性是其选择器，它允许开发者通过CSS样式的语法轻松选取HTML...