http://www.w3school.com.cn/b.asp
一、事件
1、常规事件——把js事件前面的on去掉
比如:js:onclick——JQuery:click
下面是 jQuery 中事件方法的一些例子:
2、复合事件
(1)hover(function(){},functiaon(){})——相当于把mouseover()mouseout()合二为一
(2)toggle(function(){},function(){},....)——点击事件循环执行,具体看下面的代码用法展示
3、事件冒泡
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
在事件执行完后添加return false
4、未来元素
对象.live("事件名",function(){});
方法 | 描述 |
---|---|
bind() | 向匹配元素附加一个或更多事件处理器 |
blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
change() | 触发、或将函数绑定到指定元素的 change 事件 |
click() | 触发、或将函数绑定到指定元素的 click 事件 |
dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
die() | 移除所有通过 live() 函数添加的事件处理程序。 |
error() | 触发、或将函数绑定到指定元素的 error 事件 |
event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
event.pageX | 相对于文档左边缘的鼠标位置。 |
event.pageY | 相对于文档上边缘的鼠标位置。 |
event.preventDefault() | 阻止事件的默认动作。 |
event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
event.target | 触发该事件的 DOM 元素。 |
event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
event.type | 描述事件的类型。 |
event.which | 指示按了哪个键或按钮。 |
focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
load() | 触发、或将函数绑定到指定元素的 load 事件 |
mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
ready() | 文档就绪事件(当 HTML 文档就绪可用时) |
resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
select() | 触发、或将函数绑定到指定元素的 select 事件 |
submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
toggle() | 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 |
trigger() | 所有匹配元素的指定事件 |
triggerHandler() | 第一个被匹配元素的指定事件 |
unbind() | 从匹配元素移除一个被添加的事件处理器 |
undelegate() | 从匹配元素移除一个被添加的事件处理器,现在或将来 |
unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
二、DOM操作
(1)、操作属性
1、获取属性:$(“选择器名”).attri("属性名")
2、设置属性:$("选择器名").attri("属性名","属性值")
3、删除属性:$(“选择器名”).removeAttri("属性名")
(2)操作样式
1、获取样式:$(“选择器名”).css(“样式名”)
2、设置样式:$(“选择器名”).css(“样式名”,“值”)
3、添加class
$("选择器").addClass("class名") -向被选元素添加一个或多个类
4、移除class
$("选择器").removeClass("class名") -从被选元素删除一个或多个类
5、添加移除交替class
$("选择器").toggleClass("class名") -对被选元素进行添加/删除类的切换操作
CSS 属性 | 描述 |
---|---|
css() | 设置或返回匹配元素的样式属性。 |
height() | 设置或返回匹配元素的高度。 |
offset() | 返回第一个匹配元素相对于文档的位置。 |
offsetParent() | 返回最近的定位祖先元素。 |
position() | 返回第一个匹配元素相对于父元素的位置。 |
scrollLeft() | 设置或返回匹配元素相对滚动条左侧的偏移。 |
scrollTop() | 设置或返回匹配元素相对滚动条顶部的偏移。 |
width() | 设置或返回匹配元素的宽度。 |
(3)操作内容
1、表单样式:取值:$("选择器名").val()
赋值:$("选择器名").val(“值”)
2、非表单元素:取值:$("选择器名").html()或$("选择器名").text()
赋值:$("选择器名").html(“值”)或$("选择器名").text(“值”)
(4)操作相关元素
查找:1、上几级:
父级:parent()-- 返回被选元素的直接父元素。
祖级:parents(选择器)-- 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
2、后几级:
子级:children(选择器)-- 方法返回被选元素的所有直接子元素。
后级:find(选择器)-- 方法返回被选元素的后代元素,一路向下直到最后一个后代。
3、同级:
哥哥级:prev()--返回被选元素的上一个同胞元素,该方法只返回一个元素。
prevAll(选择器)--返回被选元素的所有前面的同胞元素。
例:var p = $(this).prev();//查找该元素的哥哥,可以prev().prev() var p = $(this).prevAll("#div6");//prevtAll("选择器"),前提知道需要查找的哥哥的选择器
弟弟级:next()--返回被选元素的下一个同胞元素。
nextAll(选择器)--方法返回被选元素的所有跟随的同胞元素。
例:var p = $(this).next();//查找该元素的弟弟,可以next().next() var p = $(this).nextAll("#div6");//nextAll("选择器"),前提知道需要查找的弟弟的选择器
操作:
1、新建:$(“HTML字符串”)
例:$("选择器名").append("$('<div></div>')")
2、添加
append(jquery对象):在被选元素的结尾插入内容。
prepend() :在被选元素的开头插入内容。
after(,..):在被选元素之后插入内容。
before("..."):在被选元素之前插入内容
3、移除:empty()--清空内部全部元素
remove()--移除元素
4、复制:clone()
var a=$("选择器名").clone()
$("选择器名").append(a)