jQuery事件、CSS 类、HTML代码/文本/值、文档处理

事件：

事件	描述	支持元素或对象
blur( )	元素失去焦点	a, input, textarea, button, select, label, map, area
change( )	用户改变域的内容	input, textarea, select
click( )	鼠标点击某个对象	几乎所有元素
dblclick( )	鼠标双击某个对象	几乎所有元素
error( )	当加载文档或图像时发生某个错误	window, img
focus( )	元素获得焦点	a, input, textarea, button, select, label, map, area
keydown( )	某个键盘的键被按下	几乎所有元素
keypress( )	某个键盘的键被按下或按住	几乎所有元素
keyup( )	某个键盘的键被松开	几乎所有元素
load( fn )	某个页面或图像被完成加载	window, img
mousedown( fn )	某个鼠标按键被按下	几乎所有元素
mousemove( fn )	鼠标被移动	几乎所有元素
mouseout( fn )	鼠标从某元素移开	几乎所有元素
mouseover( fn )	鼠标被移到某元素之上	几乎所有元素
mouseup( fn )	某个鼠标按键被松开	几乎所有元素
resize( fn )	窗口或框架被调整尺寸	window, iframe, frame
scroll( fn )	滚动文档的可视部分时	window
select( )	文本被选定	document, input, textarea
submit( )	提交按钮被点击	form
unload( fn )	用户退出页面	window

属性

attr(name|pro|key,val|fn)

$("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性 /值，参数是 map
$("img").attr("src","test.jpg"); 给某个元素添加属性 /值
$("img").attr("title", function() { return this.src }); 给某个元素添加属性 /值

CSS 类
addClass(class|fn)

$("p").addClass(css中定义的样式类型（独立的css样式） ); 给某个元素添加样式

removeClass([class|fn])

$("元素名称 ").removeClass("class") 给某元素删除指定的样式

toggleClass(class|fn[,sw])
$("元素名称 ").toggleClass(class) 当元素存在参数中的样式的时候取消 ,如果不存在就设置此样式

HTML代码/文本/值
html([val|fn])

$("元素名称 ").html(); 获得该元素内的内容（元素，文本等）
$("元素名称 ").html("<b>new stuff</b>"); 给某元素设置内容
text([val|fn])

$("元素名称 ").text(); 获得该元素的文本
$("元素名称 ").text(value); 设置该元素的文本值为 value
val([val|fn|arr])

$("input元素名称 ").val(); 获取 input元素的值
$("input元素名称 ").val(value); 设置 input元素的值为 value

文档处理

内部插入

append（）
向每个匹配的元素内部添加内容

$("p").append("<b>Hello</b>");
appendTo（）
把所有匹配的元素追加到另一个指定的元素集合中

$("p").appendTo("div"); //把p的内容追加到div中
prepend()
向每个匹配的元素内部前置内容

<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>"); //结果为<p><b>Hello</b>I would like to say: </p>
prependTo()
把所有匹配的元素前置到拎一个指定的元素集合中

<p>I would like to say: </p><div id="foo"></div>
$("p").prependTo("#foo"); //结果为<div id="foo"><p>I would like to say: </p></div>

外部插入
after()
向每个匹配的元素之后插入内容

<p>I would like to say: </p>
$("p").after("<b>Hello</b>"); //结果是：<p>I would like to say:</p><b>Hello</b>
insertAfter()
把所有段落插入到一个元素之后。与 $("#foo").after(“p”)相同

<p>I would like to say: </p> <div id="foo">Hello</div>
$("p").insertAfter("#foo");//结果为<div id="foo">Hello</div><p>I would like to say: </p>
上述两个的区别
$("span").insertBefore($("div")).css("backgroundColor", 'red'); //设置的是span的样式
$("div").before($("span")).css("backgroundColor", 'red'); //设置的是div的样式
before()
向每个匹配的元素之前插入内容

<p>I would like to say: </p>
$("p").before("<b>Hello</b>"); //结果是：[ <b>Hello</b><p>I would like to say: </p> ]
insertBefore()
把所有段落插入到一个元素之前。与 $("#foo").before(“p”)相同。

<div id="foo">Hello</div> <p>I would like to say: </p>
$("p").insertBefore("#foo");//结果: <p>I would like to say: </p><div id="foo">Hello</div>

包裹
wrap(html|element|fn)
把所有的段落用一个新创建的div包裹起来

$("p").wrap("<div class='wrap'></div>");
用ID是"content"的div将每一个段落包裹起来

$("p").wrap(document.getElementById('content'));
用原先div的内容作为新div的class，并将每一个元素包裹起来

unwrap()
这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。

<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
$("p").unwrap()
结果:
<p>Hello</p>
<p>cruel</p>
<p>World</p>
wrapAll()
将所有匹配的元素用单个元素包裹起来

$("p").wrapAll("<div></div>");
$("p").wrapAll(document.createElement("div"));
wrapInner(htm|element|fnl)
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

$("p").wrapInner("<b></b>");
$("p").wrapInner(document.createElement("b"));

替换
replaceWith(content|fn)
将所有匹配的元素替换成指定的HTML或DOM元素。

<p>Hello</p> <p>cruel</p> <p>World</p>
$("p").replaceWith("<b>Paragraph </b>");
//结果：<b>Paragraph</b><b>Paragraph</b><b>Paragraph</b>
replaceAll(selector)
用匹配的元素替换掉所有 selector匹配到的元素。

<p>Hello</p> <p>cruel</p> <p>World</p>
$("<b>Paragraph</b>").replaceAll("p");
//结果：<b>Paragraph</b><b>Paragraph</b><b>Paragraph</b>

删除
empty()
删除匹配的元素集合中所有的子节点

$("p").empty(); //删除p元素中的所有子节点
remove()
从DOM中删除所有匹配的元素。

$("p").remove(); //删除所有的p
$("p").remove(".hello"); //删除所有class为hello的p
detach()
从DOM中删除所有匹配的元素。同remove用法相同，remove直接删除节点，detach删除节点，但是会保留之前的行为。

clone([Even[,deepEven]])
克隆匹配的DOM元素，添加到其他位置

$("b").clone().prependTo("p"); //克隆所有的b前置到所有的p标签前