相信大家对于jquery以及javascript应该都是不会陌生的，但是，这两者之间的区别你都知道吗?下面的文章就是要给大家介绍一下这两者的区别，一起来看看吧。
1、语法
语法上存在差异
一个就是操作元素节点，javascript使用getElement系列、query系列;jquery使用大量的选择器同时使用$()包裹选择器。
<body>
<ul>
<li id="first">哈哈</li>
<li class="cls" name="na">啦啦</li>
<li class="cls">呵呵</li>
<li name="na">嘿嘿</li>
</ul>
<div id="div">
<ul>
<li class="cls">呵呵</li>
<li>嘿嘿</li>
</ul>
</div>
</body>
<script>
document.getElementById("first"); //是一个元素
document.getElementsByClassName("cls"); //是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
document.getElementsByName("na"); //是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用 document.getElementsByTagName("li"); //是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用 document.querySelector("#div"); //是一个元素 document.querySelectorAll("#div li"); //是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
</script><body>
<ul>
<li id="first">哈哈</li>
<li class="cls" name="na">啦啦</li>
<li class="cls">呵呵</li>
<li name="na">嘿嘿</li>
</ul>
<div id="div">
<ul>
<li class="cls">呵呵</li>
<li>嘿嘿</li>
</ul>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script>
//使用JQuery取到的是jquery对象都是一个数组，即使只有一个元素被选中,但是在使用时候不一定需要使用:eq(0)来拿到这一个在使用可以直接使用
$("#first");
$(".cls");
$("li type[name='na']");
$("li");
$("#div");
$("#div li");
</script>二个就是操作属性节点，jquery使用.attr()传入一个参数获取，传入两个参数设置.prop()，prop和attr相同，都能够对文本的属性进行读取和设置。
两者之间的不同在于，读取checked，disabled，等属性名=属性值的属性的时候，attr返回属性值或者是undefined，当读取的checked属性的时候，不会根据是否选中而发生改变，prop返回true和false，在读取的checked属性的时候，会根据是否选中而发生改变，也就是说，attr要取到的属性一定要是在标签上写明的属性，否则的话，就不可以取到。
<body>
<ul>
<li id="first">哈哈</li>
</ul>
</body>
<script>
document.getElementById("first")
.getAttribute("id");
document.getElementById("first")
.setAttribute("name", "nafirst");
document.getElementById("first")
.removeAttribute("name");
</script><body>
<ul>
<li id="first">哈哈</li>
</ul>
</body>
<script src="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>三个就是操作文本节点，javascript使用 innerHTML：取到或设置一个节点的HTML代码,可以取到css，以文本的形式返回;innerText：取到或设置一个节点的HTML代码，不能取到css;value:取到input[type='text']输入的文本。
JQuery使用.html()取到或设置节点中的html代码;.text()取到或设置节点中的文本;.val()取到或设置input的value属性值。
<body>
<ul>
<li id="serven_times"><span style="color: chartreuse">嘿嘿</span></li>
<li id="eight_times"><span style="color: chartreuse">嘿嘿</span> </li>
</ul>
姓名：<input type="text" id="input">
</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><body>
<ul>
<li id="serven_times"><span style="color: chartreuse">嘿嘿</span></li>
<li id="eight_times"><span style="color: chartreuse">嘿嘿</span> </li>
</ul>
姓名：<input type="text" id="input">
</body>
<script src="/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>四个就是操作css样式时
五个就是操作层次节点方面
而jquery，一个是提供了大量的选择器:first-child、:first-of-type1.9+、:last-child、:last-of-type1.9+、:nth-child、:nth-last-child()1.9+、:nth-last-of-type()1.9+、:nth-of-type()1.9+、:only-child、:only-of-type1.9+;还有一个就是提供了对应的函数first()、last()、children()、parents()、parent()、siblings()。
六个就是给一个节点绑定事件
javascript:使用了Dom0事件模型和Dom2事件模型;而jquery可以有两种，一个是事件绑定的快捷方式
<body>
<button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
$("button:eq(0)")
.click(function () {
alert(123);
});
</script>另外一个是使用on进行事件绑定
<body>
<button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
//①使用on进行单事件的绑定
$("button:eq(0)")
.on("click", function () {
alert(456);
});
//②使用on同时给同一对象绑定多个事件
$("button:eq(0)")
.on("click dblclick mouseover", function () {
console.log(123);
});
//③使用on，给一个对象绑定多个事件
$("button:eq(0)")
.on({
"click": function () {
console.log("click");
}
, "mouseover": function () {
console.log("mouseover");
}
, "mouseover": function () {
console.log("mouseover2");
}
});
//④使用on给回调函数传参，要求是对象格式，传递的参数可以在e.data中取到；jquery中的e只能通过参数传进去，不能用window.event
$("button:eq(0)")
.on("click", { "name": "zhangsan", "age": 15 }, function (e) {
console.log(e);
console.log(e.data);
console.log(e.data.name);
console.log(e.data.age);
console.log(window.event); //js中的事件因子
});
</script>七就是JQuery的文档就绪函数和window.onload的区别
一个是，window.onload必须等待网页资源(包括图片等)全部加载完成之后，才可以执行;而文档就绪函数只需要等到网页DOM结构加载完成后，就可以执行;二个是，window.onload在一个页面中，只能写一次，写多次会被最后一次覆盖，而文档就绪函数在一个页面中可以有N个。
2、本质
两者从本质上来说存在着区别
javascript是通过
标签插入到HTML页面，可由所有的现代浏览器执行的一种轻量级的编程语言。
jquery是一个javascript函数库，也可以说是javascript中最流行的一种框架。
使用jquery首先要在HTML代码最前面加上对jquery库的引用。
<script src="js/jquery.min.js"></script>
库文件可以放在本地，也能够直接使用知名公司的CDN，好处就是这些大公司的CDN比较流行，用户早访问你的网站之前，很有可能在访问别的网站的时候就已经缓存在浏览器中了，所以能加快网站的打开速度，除此之外，还有一个好处就是节省了网站的流量带宽。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> //Google 或者： <script src="http://code.jquery.com/jquery-1.6.min.js"></script> //jQuery 官方
3、javascript对象和jquery对象的方法不可以混用
以上的内容就是对于jquery和javascript的区别的介绍了，你都了解了吗?更多java项目中常见问题请继续关注奇Q工具网来进行了解吧。
推荐阅读：