写在前面
jQuery可以进行链式操作,但最多3-4个链,尽量避免多链
$("ul").css().attr().addClass();
$("ul").css().addClass().children().addClass()
1. jQuery元素查找
next/nextAll/prev/prevAll
方法取得的都是元素集合,而不是单个元素
方法 |
描述 |
children(expr) |
若无参代表查找父元素的所有子元素。若有参,参数为匹配条件 |
next(expr) |
匹配当前元素的下一个紧邻的满足条件的同胞元素 |
nextAll(expr) |
匹配当前元素之后的所有满足条件的同辈元素 |
prev(expr) |
匹配当前元素的前一个紧邻的满足条件的同胞元素 |
parent(expr) |
匹配当前元素的满足条件的父元素 |
parents(expr) |
匹配当前元素的满足条件的祖先元素 |
siblings(expr) |
匹配当前元素的满足条件的同辈元素(之前之后的都会匹配到) |
each() |
|
map() |
|
add(expr|ele|html|obj) |
将括号里匹配到的元素添加到最终的匹配结构集中 |
<p>Hello</p><span>Hello Again</span>
<p>Hello</p><p><span id="a">Hello Again</span></p>
<javascript>
$("p").add("span")
$("p").add(document.getElementById("a"))
</javascipt>
2. jQuery事件
[]
内的内容可不写
- 该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生
- 所有事件中绑定的data可通过e.data来获取
- 只有在鼠标离开被选元素时才会触发
mouseleave
事件。若鼠标离开任何子元素,仍会触发mouseout
事件
- 不论鼠标指针穿过被选元素或其子元素,都会触发
mouseover
事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter
事件。
事件 |
描述 |
blur([data],fn) |
表单元素失去焦点时触发 |
change([data],fn) |
当元素的值发生改变时,会发生 change 事件 |
click([data],fn) |
点击 |
dbclick([data],fn) |
双击元素 |
focus([data],fn) |
获取焦点 |
keydown([data],fn) |
键盘按键下 |
keyup([data],fn) |
键盘按键起 |
keypress([data],fn) |
键盘按键下和起的衔接处 |
mousedown([data],fn) |
当鼠标移动到某一元素后按下,与mouseup 搭配使用 |
mouseup([data],fn) |
当鼠标移动到某一元素后松开 |
mouseover([data],fn) |
进入子元素时也会触发某一元素的mouseover 事件。一般与mouseout 搭配使用 |
mouseout([data],fn) |
离开某一元素的子元素时也会触发mouseout 事件 |
mouseenter([data],fn) |
进入某一个元素,大多数会和mouseleave([data],fn)一起使用 |
mouseleave([data],fn) |
离开某一个元素 |
mousemove([data],fn) |
在某一个元素上移动。mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标 |
hover([over],out) |
事件切换。over为鼠标移到元素上要触发的函数。out为鼠标移出元素要触发的函数。若只写一个函数,则代表移入和移出时都触发该函数 |
bind(type,[data],fn) |
type中可写多个事件,且不同事件用空格分隔开.一般与unbind 事件搭配 |
unbind(type,[data|fn]) |
从每一个匹配的元素中删除绑定的事件。若没有参数,则删除所有绑定的事件。若有两个参数,则删除该处理函数,即该函数不会再触发(一个类型的事件可以有多个绑定函数) |
on(events,[selector],[data],fn) |
该方法中,若绑定多个事件,需要用空格间隔开。可以使用该方法实现事件委托(只能将事件委托给后代)。也可以使用该方法定义自定义事件 |
off(events,[selector],[fn]) |
seletor 用来找到事件委托的对象 |
one(type,[data],fn) |
为某一个元素绑定一次性事件函数 |
trigger(type,[data]) |
自动触发指定类型事件(可在type处写用on方法定义的自定义事件的名称) |
$("p").click( function (event, a, b) {
} ).trigger("click", ["foo", "bar"]);
$("input").select(function () {
$(this).css("color", "red");
}).trigger("select").on("my", function () {
console.log("自定义事件");
}).trigger("my");
3. 事件的执行参数
参数 |
描述 |
timeStamp |
时间戳(从打开浏览器到触发事件之间的毫秒数) |
currentTarget |
最终冒泡到的最高级元素 |
target |
最初触发事件的dom元素 |
data |
传递的参数 |
stopPropagation() |
阻止事件冒泡 |
preventDefault() |
阻止事件的默认行为 |
return false |
阻止冒泡+阻止默认行为 |
4. 文档处理
方法 |
描述 |
append(content|fn) |
向每个匹配的元素内部追加内容。若content 为标签或function 返回值为html,则是向每个匹配的元素内部追加一个dom元素。写选择器当做字符串处理。写jQuery对象无效。fn返回html字符串 |
appendTo(content) |
向content 内部追加调用该方法的对象集合中的每个元素。content为jQuery对象、已经在页面存在的dom元素 |
prepend(content|fn) |
content 为要插入到目标元素内部最前面的内容。content可为jQuery对象、标签元素。fn只能返回html字符串! |
prependTo(content) |
向content 匹配的元素的初始处插入调用该方法的元素 |