jQuery基础2 —— 元素查找与事件

写在前面

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>Hello</p>, <span>Hello Again</span> ]-->
	$("p").add(document.getElementById("a"))<!--输出结果：<p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span> -->
</javascipt>

2. jQuery事件

1. []内的内容可不写
2. 该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生
3. 所有事件中绑定的data可通过e.data来获取
4. 只有在鼠标离开被选元素时才会触发mouseleave事件。若鼠标离开任何子元素，仍会触发mouseout事件
5. 不论鼠标指针穿过被选元素或其子元素，都会触发 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) {
  // 一个普通的点击事件时，a和b是undefined类型
  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).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匹配的元素的初始处插入调用该方法的元素