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

Posted on 2017-03-20 by 毛三胖

摘要

本文全面的总结JQuery文档操作的基本方法,分类描述了各个方法的简单使用和区别。大家花上十分钟来全面了解一下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文档操作的基本方法,希望对大家有所帮助。另本人菜鸟一枚,如有错误,请评论指正。