您的当前位置：首页 > 资讯 > JS

JavaScript和Jquery的dom操作对比

2018-07-11 21:35:28 来源：admin 点击：898

JavaScript和Jquery的dom操作对比

规律: "-"去掉,并把-后面的首字母换成大写，而且区分大小写

访问节点

作用	Jquery语法	JavaScript语法
返回对拥有指定id的第一个对象进行访问	$('#id')	document.getElementById('id');
返回带有指定名称的节点集合	$("input[name='mobile']").val()	document.getElementsByName('mobile'); 注意:Elements
返回带有指定标签名的对象集合	$("p")	document.getElementsByTagName(tagname); 注意：Elements
返回带有指定class名称的对象集合	$('.classname')	document.getElementsByClassName(classname); 注意：Elements

创建节点

作用	Jquery语法	JavaScript语法
创建一个节点（无论$(html)中的html代码多复杂都可以这样创建）	var $li_1=$("< li >< / li >");	document.createElement(eName);
对某个节点创建属性	var $li_1=$("< li title= 'a'> a < / li >");	document.createAttribute(attrName);
创建文本节点	var $li_1=$("< li>a< / li>");	document.createTextNode(text);

添加节点

作用	Jquery语法	JavaScript语法
在某个节点前插入节点	$("p").after("你好") $("你好").insertAfter("p") $("p").before("你好") $("你好").insertBefore("p")	document.insertBefore(newNode,referenceChild);
给某个节点添加子节点		parentNode.appendChild(newNode);

复制节点

作用	Jquery语法	JavaScript语法
复制某个节点，参数：是否复制原节点的所有属性	$(this).clone(true).appendTo("body");	cloneNode(true \| false);

删除节点

作用	Jquery语法	JavaScript语法
删除某个节点的子节点；	var $li=$("ul li:eq(1)").remove(); $(“ul li”).remove(“li[title!=a]”)； empty() 清空节点	parentNode.removeChild(node)；node是要删除的节点

修改节点

作用	Jquery语法	JavaScript语法
将data加到文本节点后面	$("p").append("你好"); $("你好").appendTo("p")	appendData(data);
将从start处删除length个字符		deleteData(start,length);
在start处插入字符,start的开始值是0;	$("p").prepend("你好") $("你好").prependTo("p")	insertData(start,data)
在start处用data替换length个字符		replaceData(start,length,data)
在offset处分割文本节点		splitData(offset)
从start处提取length个字符		substringData(start,length)

属性操作

作用	Jquery语法	JavaScript语法
通过属性名称获取某个节点属性的值	attr()	getAttribute(name)
修改某个节点属性的值	attr(name,value) $("p").attr({"title":"your title","name":"your name"})；	setAttribute(name,value);
删除某个属性	removeAttr(name)	removeAttribute(name)

注意： jQuery中很多方法都是同一个函数实现获取和设置的，例如 attr() 技能获取属性的值，也能设置属性的值。类似的还有html()、text()、height()、width()、val()、css()等方法

查找节点

作用	Jquery语法	JavaScript语法
如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用		parentObj.firstChild（parentObj.firstChild.firstChild.....）
获得一个节点的最后一个节点，与firstChild一样也可以进行递归使用		parentObj.lastChild（parentObj.lastChild.lastChild.....）
获得节点的所有子节点，然后通过循环和索引找到目标节点		parentObj.childNodes

获取相邻的节点

作用	Jquery语法	JavaScript语法
获取已知节点的相邻的上一个节点	prev()	neborNode.previousSibling
获取已知节点的下一个节点	next()	nerbourNode.nextSlbling
取得匹配元素前后所有同辈元素	siblings()

获取父节点

作用	Jquery语法	JavaScript语法
得到已知节点的父节点		childNode.parentNode

包裹节点

作用	Jquery语法	JavaScript语法
b标签单个包裹strong标签	$("strong").wrap("< b >< / b >");
b标签整个包裹strong标签wrapAll()	$("strong").wrapAll("< b >< / b >");

替换节点

作用	Jquery语法	JavaScript语法
替换节点	$("p").replaceWith("b"); $("b").replaceAll("p");	replace(new,old) < html> < head> < meta http-equiv="Content-Type" content="text/ html; charset=iso-8859-1" /> < title >HTML DOM< / title > < script type=text/javascript> function replaceMessage() { var oNewp=document.createElement("p"); var oText=document.createTextNode("World Hello"); oNewp.appendChild(oText); var oOldp=document.body.getElementsByTagName("p")[0]; oOldp.parentNode.replaceChild(oNewp,oOldp); } < / script > < / head > < body onload="replaceMessage();"> < p >hello world!< / p > < / body> < / html>

作用

Jquery语法

JavaScript语法

替换节点

$("p").replaceWith("b"); $("b").replaceAll("p");

replace(new,old)

< html>
< head>
< meta http-equiv="Content-Type" content="text/ html; 
charset=iso-8859-1" />
< title >HTML DOM< / title >
< script type=text/javascript>
function replaceMessage()
{
var oNewp=document.createElement("p");
var oText=document.createTextNode("World Hello");
oNewp.appendChild(oText);
var oOldp=document.body.getElementsByTagName("p")[0];
oOldp.parentNode.replaceChild(oNewp,oOldp);
}
< / script > 
< / head >
< body onload="replaceMessage();">
< p >hello world!< / p >
< / body>
< / html>

样式操作

作用	Jquery语法	JavaScript语法
增加样式	$("p").addClass("another");
移除样式	$("p").removeClass("high"); $("p").removeClass();
toggleClass()控制样式的重复切换	$("p").toggleClass("another");
判断是否含有某个样式	$("p").hasClass("another")

设置和获取HTML、文本和值

• text() - 设置或返回所选元素的文本内容 • html() - 设置或返回所选元素的内容（包括 HTML 标记） • val() - 设置或返回表单字段的值

作用	Jquery语法获取	Jquery语法设置
html() 用来读取或设置某个元素中的HTML内容，可用于XHTML文档，不能用于XML文档	$("p").html()	$("p").html("< strong > p < / strong >")
text() 用来读取或设置某个元素的文本内容	获取内容：$("p").text()	设置内容：$("p").text("你最喜欢的水果是？")
val()方法用来获取或设置元素的值另外，val()能使select（下拉列表框）、 checkbox（多选框）和radio(单选框)相应的选项被选中，这在表单操作中经常会用到	$("p").val();	$("p").val(“aaa”);
css()获取元素的样式属性：	$("p").css("color");	$("p").css("color","red") $("p").css({"fontsize":"30px","backgroundColor":"red"})

元素定位有以下几个常用方法

作用	Jquery语法
offset() 　获取元素在当前视窗的相对偏移，其中返回的对象包含top和left两个属性，向右为正，向下为正，只对可见元素有效,返回值为object类型	var offset=$("p").offset(); var left=offset.left; var top=offset.top;
position() 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回对象有两个属性 top与left	var position =$("p").position(); var left=position.left; var top=position.top;
scrollTop()和scrollLeft() 获取滚动条距离左端的距离和顶端的距离	var scrollTop=$("p").scrollTop(); var scrollLeft=$("p").scrollLeft();

WEB资讯

JavaScript和Jquery的dom操作对比

相关文章更多 >