jQuery——操作

文档操作

方法	例句	描述	性质
after()	$("button").click(function(){ $("p").after("<p>Hello world!</p>"); });	在匹配的元素之后插入内容 可包含HTML标签	增加
append()	$("button").click(function(){ $("p").append(" <b>Hello world!</b>"); }); //添加到p标签内，相当于增加儿子	匹配元素向下添加指定HTML元素 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 appendTo方法执行任务相同，不同之处在于，内容的位置和选择器	增加
before()	$("button").click(function(){ $("p").before("<p>Hello world!</p>"); });	在每个匹配的元素之前插入内容。	增加
clone()	$("button").click(function(){ $("body").append($("p").clone()); });	生成被选元素的副本，包含子节点、文本和属性 横向进行副本创建	增加
detach()	$(document).ready(function(){ $("button").click(function(){ $("body").append($("p").detach()); }); //当点击button事件发生后，先是删除body中的p标签 //然后再body后增加一个原来的p元素。	移除被选元素，包括所有文本和子节点 会保留jQuery对象中的匹配的元素，因而可以在将来再使用这些匹配的元素 会保留所有绑定的事件、附加的事件，这点与remove不同，remove会将节点和事件一并删除。 可用于将元素从一端删除后，在另一端重新添加。	删除
empty()	$(".btn1").click(function(){ $("p").empty(); });	删除被选元素的所有内容，包括所有文本和子节点	删除
insertAfter()	$(document).ready(function(){ $("button").click(function(){ $("h1").insertAfter("p"); }); //在匹配的元素横向进行添加，就相当于找哥们	对匹配所有元素的横向后进行添加 如果需要添加一个空标签，并且该标签已经存在时，将会把已有标签和内容移走至匹配元素后再进行添加。	添加
prepend()	$(".btn1").click(function(){ $("p").prepend("<b>Hello world!</b>"); });	向匹配元素集合中的每个元素开头插入由参数指定的内容。	添加
replaceAll()	$(".btn1").click(function(){ $("p").replaceAll("<b>Hello world!</b>"); });	用匹配的元素替换所有匹配到的元素。 replaceWith可以使用函数进行替换。	替换
text()	$(document).ready(function(){ $(".btn1").click(function(){ $("p").text("Hello world!"); }); });	替换或增加匹配元素的内容 空元素匹配后，也可进行添加	替换
unwrap()	$("button").click(function(){ $("p").unwrap(); });	移除并替换指定元素的父元素。	删除
wrap()	$(document).ready(function(){ $(".btn1").click(function(){ $("p").wrap("<div></div>"); }); });	把匹配的元素用指定的内容或元素包裹起来。 进行逐一包裹	添加
wrapinner()	$(".btn1").click(function(){ $("p").wrapInner("<b></b>"); }); //查找p标签，在p标签内加入b标签。	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。	添加

属性操作

方法	例句	描述	性质
addClass()	$("button").click(function(){ $("p:first").addClass("intro"); });	向匹配后的元素添加一个或多个类 不会移除已存在的class属性 如果添加多个类，请用空格分隔类名	添加
attr()	$("button").click(function(){ $("img").attr("width","180"); //添加一个 $("img").attr({"a":1,"b":2}); //添加多个 }); //如果想要获取值，那么只写width即可。	设置或返回匹配元素的属性和值。	添加
hasClass()	$("button").click(function(){ alert($("p:first").hasClass("intro")); });	检查匹配的元素是否拥有指定的类。 返回true或false	判断
html()	$(".btn1").click(function(){ $("p").html(); }); //获取p元素下的内容信息	设置或返回匹配的元素集合中的 HTML 内容。（inner HTML） 当使用该方法设置一个值时，它会覆盖所有匹配元素的内容	查询
removeAttr()	$("button").click(function(){ $("p").removeAttr("id"); });	从所有匹配的元素中移除指定的属性。	删除
removeClass()	$("button").click(function(){ $("p").removeAttr("id"); });	从所有匹配的元素中删除全部或者指定的类。	删除
toggleClass()	$(document).ready(function(){ $("button").click(function(){ $("p").toggleClass("main",switch); }); }); //switch参数可以规定只添加或只移除class	添加和删除一体的对属性更改 通过	添加、删除
val()	$("button").click(function(){ $(":text").val("Hello World"); });	设置或返回文value属性设置的值 大多用于input元素 如果未设置，则返回被选元素的当前值	查询、更改

CSS操作

方法	例句	描述
css()	$(document).ready(function(){ $("button").click(function(){ $("p").css("color",function(){ return "red"; }); }); //不需要用到函数时，可直接在color后写颜色。 //如果想获取p标签内的颜色属性，就只写color即可。 //如果需要设置多个CSS属性. //使用css({'color':'white','font-size':'20px'})	设置或返回匹配元素的样式属性。
height()	$(".btn1").click(function(){ $("p").height(50); });	设置或返回匹配元素的高度。
offset()	$(".btn1").click(function(){ x=$("p").offset(); $("#span1").text(x.left); $("#span2").text(x.top); });	返回第一个匹配元素相对于文档的位置。
offsetParent()	$("button").click(function(){ $("p").offsetParent() .css("background-color","red"); });	返回最近的向上两级的定位元素
position()	$(".btn1").click(function(){ x=$("p").position(); $("#span1").text(x.left); $("#span2").text(x.top); });	返回第一个匹配元素相对于父元素的位置。 该方法返回的对象包含两个整形属性top和left，以像素计 此方法只对可见元素有效
scrollLeft()	$(".btn1").click(function(){ $("div").scrollLeft(100); });	设置或返回匹配元素的滚动条的水平位置 当滚动条在最左侧时，位置是0
scrollTop()	$(".btn1").click(function(){ $("div").scrollLeft(100); });	设置或返回匹配元素的滚动条的垂直位置 如果未设置参数，则返回以像素计的相对滚动条顶部的偏移 该方法对可见元素和不可见元素均有效 获取值时，该方法只返回第一个匹配元素的scroll top offcet  设置时，该方法设置所有匹配元素的scroll top offset
width()	$(".btn1").click(function(){ $("p").width(200); });	设置或返回匹配元素的宽度。 如果不设置参数，则返回以像素的匹配元素的宽度