十分钟全面了解JQuery文档操作，新手及面试必读

1 插入

1.1 append()

//在被选中元素的结尾（仍然在内部）插入指定内容
$("#myDiv").append("<b>42du.cn</b>");

1.2 appendTo()

//插入指定内容到被选中元素的结尾（仍然在内部）
$("<b>42du.cn</b>").appendTo($("#myDiv"));

1.3 prepend()

//在被选中元素的开头（仍然在内部）插入指定内容
$("#myDiv").prepend("<b>42du.cn</b>");

1.4 prependTo()

//插入指定内容到被选中元素的开头（仍然在内部）
$("<b>42du.cn</b>").prependTo($("#myDiv"));

1.5 before()

//在被选中元素之前插入指定内容（外部）
$("#myDiv").before("<div>42du.cn</div>");

1.6 insertBefore()

//插入指定内容到被选中元素之前（外部）
$("<div>42du.cn</div>").insertBefore($("#myDiv"));

1.7 after()

//在被选中元素之后插入指定内容（外部）
$("#myDiv").after("<div>42du.cn</div>");

1.8 insertAfter()

//插入指定内容到被选中元素之后（外部）
$("<div>42du.cn</div>").insertAfter($("#myDiv"));

2 类操作

2.1 addClass()

//向被选中元素添加一个或多个类
$("#myDiv").addClass("red");

2.2 hasClass()

//检查被选中元素是否包含指定的类
$("#myDiv").hasClass("red");

2.3 removeClass()

//从被选元素移除一个或多个类
$("#myDiv").removeClass("red");

2.4 toggleClass()

//先检查选中元素是否包含指定的类，如果不存在则添加，如果存在则删除
$("#myDiv").toggleClass("red");

3 属性操作

3.1 attr()

//取得被选中元素的属性值
$("#myDiv").attr("class");
//设置被选中元素的属性值
$("#myDiv").attr("class","red");

3.2 removeAttr()

//从被选中元素移除属性
$("#myDiv").removeAttr("class");

4 包裹

4.1 wrap()

//把被选中元素放置在指定的HTML内容或元素中,语法：$(selector).wrap(wrapper)
//在id为myDiv的元素外面包裹一个新的div元素
$("#myDiv").wrap("<div id='parent'></div>");

4.2 unwrap()

//删除被选中元素的父元素
$("#myDiv").unwrap();

4.3 wrapAll()

//在指定的HTML内容或元素中放置所有被选中元素
//用<div>包裹所有段落
$("p").wrapAll("<div></div>")

4.4 wrapInner()

//使用指定的HTML内容或元素，来包裹每个被选元素中的所有内容
$("#myDiv").wrapInner("<b></b>");

5 克隆

5.1 clone()

//生成被选元素的副本，包含子节点、文本和属性
//复制每个p元素，然后追加到div元素中
$("#myDiv").append($("p").clone());

6 移除

6.1 detach()

//移除选中元素，包括所有文本和子节点，会返回选中元素，并保留绑定事件及附加数据
$("myDiv").detach();

6.2 remove()

//移除选中元素，包括所有文本和子节点，会返回选中元素，不保留绑定事件及附加数据
$("myDiv").remove();

6.3 empty()

//移除选中元素的所有文本和子节点
$("myDiv").empty();

7 其它

7.1 html()

//取得被选中元素的内容（inner HTML）
$("#myDiv").html();
//设置被选中元素的内容（inner HTML）
$("#myDiv").html("Hello <b>42du.cn</b>");

7.2 text()

//取得被选中元素的文本内容
$("#myDiv").text();
//设置被选中元素的文本内容
$("#myDiv").text("Hello <b>42du.cn</b>");

7.3 val()

//取得被选中元素的值
$("#username").val();
//设置被选中元素的值
$("#username").val("毛三胖");

8 总结

本文全面的总结JQuery文档操作的基本方法，希望对大家有所帮助。另本人菜鸟一枚，如有错误，请评论指正。