1.入口函数不同
js：window.onload = function(){内部放js}
实质就是一个事件，拥有事件的三要素，事件源，事件，事件处理程序。等到所有内容，以及我们的外部图片之类的文件加载完了之后，才会去执行。只能写一个入口函数。
jQuery:$(function(){})或者$(document).ready(function(){})
是在 html所有标签都加载之后，就回去执行。可以写多个。
window.onload=function(){
//js代码
}
等同于
$(window).load(function(){
//jquery代码
});
2.创建DOM元素
利用DOM方法创建元素节点，通常要将document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻烦。
而jQuery使用$就可以直接创建DOM元素
var oNewP = $("<p>使用jQuery创建的内容</p>");
以上代码等同于javascript
var oNewP2 = document.createElement("p");
var oText = document.createTextNode("这是使用javascript方法创建的内容");
oNewP2.appendChild(oText);
例：使用jQuery创建DOM
<script type="text/javascript">
$(function(){
var oNewP = $("<p>使用jQuery创建的内容</p>");
oNewP.insertAfter("#display"); //insertAfter方法
})
</script>
<div></div>
3.获取元素
jquery：
通过id获取，jquery的语法更为简练$("#id").event;
通过class获取，$(.“css”).event()
通过属性html标签获取，$(“p”).event()是选中所有的p标签元素
通过属性值获取，$(“div[csdn]”).event()是选中div的属性为csdn的元素
event是对选中的元素的操作。
$(“div.p1”)和 $(“div .p1”)的区别。
$(“div.p1”)是对所有div进行筛选，选出class="p1"的div。
$(“div .p1”)是选中div下面的class="p1"的元素，不是这个div
js：
document.getElementById("elementId");//返回一个元素，按元素的ID名称来访问
document.getElementsByName("elementName");返回一组元素，按元素的name名称来访问
document.getElementsByTagName("tagName");返回一组元素，按标签来访问
document.getElementsByClassName("classname");返回一组元素，按class来访问
4.操作属性节点
a.JavaScript使用
object.getAttribute(attribute) 获取元素属性
object.setAttrbute(attribute，value) 设置元素属性
<body>
<ul>
<li>哈哈</li>
</ul>
</body>
<script>
document.getElementById("first").getAttribute("id");
document.getElementById("first").setAttribute("name","nafirst");
document.getElementById("first").removeAttribute("name");
</script>
b.JQuery使用
.attr()传入一个参数获取，传入两个参数设置
.prop()
prop和attr一样都可以对文本的属性进行读取和设置；
两者的不同 在读取checked，disabled，等属性名=属性值的属性时
attr返回属性值或者undefined，当读取的checked属性时不会根据是否选中而改变
prop返回true和false 当读取的checked属性时会根据是否选中而改变
也就是说attr要取到的属性必须是在标签上写明的属性，否则不能取到
<body>
<ul>
<li>哈哈</li>
</ul>
</body>
<script src="http://www.likecs.com/js/jquery.js"></script>
<script>
$("#first").attr("id");
$("#first").attr("name","nafirst");
$("#first").removeAttr("name");
$("#first").prop("id");
$("#first").prop("name","nafirst");
$("#first").removeProp("name");
</script>
5.操作文本节点
a.JavaScript使用
innerHTML：取到或设置一个节点的HTML代码,可以取到css，以文本的形式返回
innerText：取到或设置一个节点的HTML代码，不能取到css
value:取到input[type=\'text\']输入的文本
<body>
<ul>
<li ><span>嘿嘿</span></li>
<li ><span>嘿嘿</span> </li>
</ul>
姓名：<input type="text">
</body>
<script>
document.getElementById("serven_times").innerHTML;
document.getElementById("serven_times").innerHTML = "<span style=\'color: #ff3a29\'>呵呵</span>";
document.getElementById("eight_times").innerText;
document.getElementById("eight_times").innerText = "啦啦";
document.getElementById("input").value;
</script>
b.JQuery使用
.html()取到或设置节点中的html代码
. text()取到或设置节点中的文本
.val()取到或设置input的value属性值
<body>
<ul>
<li ><span>嘿嘿</span></li>
<li ><span>嘿嘿</span> </li>
</ul>
姓名：<input type="text">
</body>
<script src="http://www.likecs.com/js/jquery.min.js"></script>
<script>
$("#serven_times").html();
$("#serven_times").html("<span style=\'color: #ff3a29\'>呵呵</span>");
$("#eight_times").text();
$("#eight_times").text("啦啦");
$("#input").val();
$("#input").val("哈哈");
</script>