js与jQuery对比

<!-- 加载DOM的区别 --><script type="text/javascript">window.onload$(document).readyfunction first(){    console.log(1);}function second(){    console.log(2);}window.onload=first;$(document).ready(){    function first(){        console.log(2)    }}window.onload=second;$(document).ready(){    function second(){        console.log(1);    }}//下面2个方法都会执行window.onload=function(){    first();    second();}//$(document)ready(){    function first(){        console.log(1);    }    function second(){        console.log(2)    }}//获取id的方式不同document.getElementById("idName")$("#idName")//获取class的不同js没有直接获取class的方法$(".className")//获取标签的TagNamedocument.getElementsByTagName("tagName")$("tagName")//创建对象并加入到文档中var para=document.createElement("p")document.body.appendElement("para")//说明下默认加载到最后一个元素的后面//下面2组输出结果相同$("p").append("<b>Hello</b>") $("<b>Hello</b>").appendTo("p")//下面2组输出结果相同$("p").prepend("<b>Hello</b>")$("<b>Hello</b>").prependTo("p")//插入新的元素parentElement.insertBefore(newElement,targetElement)//把一个img元素插入到段落之前var imgs=document.getElementById("imgs");var para=document.getElementsByTagName("p");para.parentNode.insertBefore(imgs,para);//下面的输出相同$("p").after("<b>Hello</b>") $("<b>Hello</b>")insertAfter("p")//下面的输出结果相同$("p").before("<b>Hello</b>") $("<b>Hello</b>").insertBefore("p")//复制节点reference=node.cloneNode(deep)clone()//复制节点后,被复制的新元素不具有任何行为clone(true) 复制节点及其绑定事件//删除节点reference=element.removeChild(node)remove()删除节点empty()清空节点//包裹节点js无该特性wrap()将匹配元素使用其他元素包裹起来wrapAll()将所有的元素用一个元素包裹起来warpInner()将匹配元素使用其他结构化的标记包裹起来//属性操作document.getElementsByTagName("tagName")$("p").attr("title")//获取p元素的title属性$("p").attr("title","my title") 设置p元素的title属性$("p").attr("title":"my title","class":"myclass")添加多个属性//替换节点reference=element.replaceChild(newChild,oldChild)//把p元素替换为h标签$("p").replaceWith("<h2>hi<h2>")$("<h2>Hi</h2>").replaceAll("p")//css-Dom操作element.style.property 只能读取style对象的属性$("selector").css() 获取元素的样式属性