JQuery对象操作(附对应JS方法)

JQuery作为一种JS库，继承并优化了JS访问DOM对象的特性，更加方便的操作DOM对象，在本文，结合《JQuery内核详解》这本书，罗列了一系列JQuery中对文档对象的操作方法，并附有对应的JS方法，作为一份参考资料，日后查询

大类	JQ方法	备注
创建元素	var $h1 = $(“<h1></h1>”)	将内含的HTML包装为JQuery对象，并返回
创建文本	var $h1 = $("<h1>DOM模型</h1>")	可以用任何HTML代码创建文本
创建属性	var $h1 = $(“<h1 class = ‘red’>DOM模型</h1>”)	可以用任何HTML代码创建文本
节点内插入元素	$("body").append("ul")	向与前者匹配的元素内追加新内容（插在最后一个子元素）
	$("ul").appendTo("body")（具有破坏性）	把与前者匹配的元素追加到后者中（插在最后一个子元素）
	$("body").prepend("ul")	向与前者匹配的元素内追加新内容（插在第一个子元素）
	$("ul").prependTo("body"）（具有破坏性）	把与前者匹配的元素追加到后者中（插在第一个子元素）
节点外插入元素	$("div").affter("<p>lyo<p>")	向与前者匹配的元素之后插入新内容
	$("<p>lyo<p>").insertAffter("div")（具有破坏性）	把与前者匹配的元素插入到另一个指定元素集合的后面
	$("div").before("<p>lyo<p>")	向与前者匹配的元素之前插入新内容
	$("<p>lyo<p>").insertBefore("div")（具有破坏性）	把与前者匹配的元素插入到另一个指定元素集合的前面
删除元素	var $p=$("p").remove()	从DOM中删除所有匹配的元素，并可以返回被删除的元素
	var $p=$("p").emtpy()	删除匹配的元素集合中所有的子节点
复制元素	var $div = $("div").clone()	复制匹配的dom元素并选中这些复制副本
替换元素	$("p").replaceWith("<div>lyo</div>")	把所有与前者匹配的元素替换成后面的HTML或DOM元素
	$("<div>lyo</div>").replaceAll("p")	把所有与后者匹配的元素替换成前面的HTML或DOM元素
包裹元素	$("p”).wrap(<span class ‘wrap’ /")	匹配前者的每个元素外被后者包裹
	$("p”).wrapInner(<span class ‘wrap’ /")	匹配前者的每个元素内包裹后者
	$("p”).wrapAll(<span class ‘wrap’ /")	匹配前者的元素集外被后者包裹
设置属性	$("p”).attr(“title”,"段落文本")	可以批量设置属性，两个参数分别为  1、指定属性名 2、指定属性值
获取属性	alert（$("p”).attr(“title”))	只设定一个参数表示读取该属性值
删除属性	$(“p”).removeAttr(“title”)	删除指定的元素属性
追加样式	$("p”).addClass(“lyo”)	为元素追加新的样式，指定类名即可，但需要先定义CSS类样式
移除样式	$("p”).removeClass(“lyo”)	若要删除多个类样式，可以用空格将其分隔，移除所有的话，可以不传递参数
切换样式	$("p”).toggleClass(“lyo”)	1、做为开关的类样式名 2、是否打开样式（true/false/表达式返回bool值），若没有设置该参数，系统会根据该元素是否存在自动切换显示隐藏
判断样式	alert（$("p”).hasClass(“lyo”)）  或  alert（$("p”).is(“lyo”)）	判断元素是否包含指定的类样式，返回bool值
读写HTML	var s =$(“div”).html() //读  $(“p”).html(s)              //写	1、不含参数表读取指定节点下结构  2、包含参数表向指定节点写入字符串，覆盖指定节点原来包含的所有内容
读写文本	var s =$(“div”).text() //读  $(“p”).text(s)              //写	同上
读写表单值	$(this).val(“lyo”)	1、不含参数表示读取值  2、含参数表示写入值,参数可以是选项值，也可以是value属性值
读写CSS样式	$("p").css(“color”,"red")  $("p").css({color:"red",fontsize:”2px”})	注意单个样式与多个样式设置时的符号区别
绝对偏移	var o1=$(“div”).eq(0).offset()	获取相对窗口左上角的相对偏移，返回top和Left属性
相对偏移	var o1=$(“div”).eq(0).position()	该指定元素与距离最近的父级元素左上角的偏移距离，但如果父级元素的Position没有定义为absolute/fixed/relative，则当前元素最近的父级定位元素应为body
元素高宽	$("div”).height(140px)  $("div”).width()	1、无参，读取高宽，返回Px  2、有参，设置高宽
元素遍历	var li = $(“body”).children()	获取当前元素包含的所有子元素，返回集合，可以用~.eq()筛选，或是用数组~[1]
	var li = $(“body”).parent()	获取当前元素包含的父元素
	var li = $(“body”).next()	获取当前元素相邻的下一个同级元素
	var li = $(“body”).parent()	获取当前元素相邻的上一个同级元素

相关文章：

JQuery