js与jQuery对比

<!-- 加载DOM的区别 -->
<script type="text/javascript">
window.onload
$(document).ready


function 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")

//获取标签的TagName
document.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() 获取元素的样式属性