JS与JQuery的本质上的区别
- js是一种脚本语言，常用于网页客户端编程，使网页在客户端浏览器中，实现更多地动态功能，表现出更加丰富的视觉效果。
- jquery是一个快速、简洁的JavaScript框架，极大的简化了javascript编程。
- jquery与js最直观的区别就是外观上jQuery对象比js对象多了"$()"
JS与JQuery的操作上的区别
1.入口函数不同
js：window.onload = function(){内部放js}
实质就是一个事件，拥有事件的三要素，事件源，事件，事件处理程序。等到所有内容，以及我们的外部图片之类的文件加载完了之后，才会去执行。只能写一个入口函数。
jQuery:
(document).ready(function(){})
是在 html所有标签都加载之后，就回去执行。可以写多个。
window.onload=function(){
//js代码
}
//等同于↓↓↓↓↓
$(window).load(function(){
//jquery代码
});
2.创建DOM元素
利用DOM方法创建元素节点，通常要将document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻烦。
而jQuery使用$就可以直接创建DOM元素。
//使用jQuery创建DOM
<script type="text/javascript">
$(function(){
var oNewP = $("<p>使用jQuery创建的内容</p>");
oNewP.insertAfter("#display"); //insertAfter方法
})
</script>
//以上代码等同于javascript↓↓↓↓↓
var oNewP2 = document.createElement("p");
var oText = document.createTextNode("这是使用javascript方法创建的内容");
oNewP2.appendChild(oText);
3.获取元素
jquery：
//通过id获取，jquery的语法更为简练
$("#id").event;
//通过class获取
$(".css").event()
//通过属性html标签获取,选中所有的p标签元素
$("p").event()
//通过属性值获取,选中div的属性为csdn的元素
$("div[csdn]").event()
js：
//返回一个元素，按元素的ID名称来访问
document.getElementById("elementId");
//返回一组元素，按元素的name名称来访问
document.getElementsByName("elementName");
//返回一组元素，按标签来访问
document.getElementsByTagName("tagName");
//返回一组元素，按class来访问
document.getElementsByClassName("classname");
4.操作属性节点
//JavaScript使用
<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>
//JQuery使用
<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>
5.操作文本节点
JavaScript使用
innerHTML：取到或设置一个节点的HTML代码,可以取到css，以文本的形式返回
innerText：取到或设置一个节点的HTML代码，不能取到css
value:取到input[type=‘text’]输入的文本
JQuery使用
.html()取到或设置节点中的html代码
. text()取到或设置节点中的文本
.val()取到或设置input的value属性值
//JavaScript实现
<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>
//JQuery实现
<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>
6.操作css样式的时候
//JavaScript实现:
//1.使用setAttribute设置class和style
document.getElementById("first").setAttribute("style","color:red");
//2.使用.className添加一个class选择器
document.getElementById("third").className = "san";
//3.使用.style.样式直接修改单个样式。注意样式名必须使用驼峰命名法
document.getElementById("four_times").style.fontWeight = "900";
//4.使用.style或.style.cssText添加一串行级样式：
document.getElementById("five_times").style = "color: blue;";//IE不兼容
document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";
//JQuery实现:
$("#div2").css("color","yellow");
$("#div2").css({
"color" : "white",
"font-weight" : "bold",
"font-size" : "50px",
});
总结
- Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。
- Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内。
- Javascript短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。
- jquery 就对javascript的一个扩展，封装，就是让javascript更好用，更简单。人家怎么说的来着，jquery就是要用更少的代码，漂亮的完成更多的功能。JavaScript 与JQuery 常用方法比较
