搜索

我zfxcms ！ ^回到顶部

您的当前位置：首页 > web资讯 > JS > JavaScript和Jquery的dom操作对比

JavaScript和Jquery的dom操作对比

所属分类: JS   2018-07-11 21:35:28  编辑：admin  浏览次数 1039 次

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").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与leftvar position =$("p").position(); var left=position.left; var top=position.top;
scrollTop()和scrollLeft() 获取滚动条距离左端的距离和顶端的距离var scrollTop=$("p").scrollTop(); var scrollLeft=$("p").scrollLeft();

猜你喜欢

Web文章检索

Web文章目录

网站地图   联系我哦   用户协议   法律声明   QQ：171780793

水水网版权所有 ©2016-2024 All Rights Reserved 晋ICP备17001334号