JavaScript和JQuery的区别
一、本质上的区别
1.JavaScript 是通过<script></script>标签插入到HTML页面，可由所有的现代浏览器执行的一种轻量级的编程语言。
2.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 官方
二、语法上的差异
1.操作元素节点
a.JavaScript使用
getElement系列、query系列
<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>
b.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 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>
2.操作属性节点
a.JavaScript使用
getAttribute("属性名") 、 setAttribute("属性名","属性值")
<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>
b.JQuery使用
.attr()传入一个参数获取，传入两个参数设置
.prop()
prop和attr一样都可以对文本的属性进行读取和设置；
两者的不同 在读取checked，disabled，等属性名=属性值的属性时
attr返回属性值或者undefined，当读取的checked属性时不会根据是否选中而改变
prop返回true和false 当读取的checked属性时会根据是否选中而改变
也就是说attr要取到的属性必须是在标签上写明的属性，否则不能取到
<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>
3.操作文本节点
a.JavaScript使用
innerHTML：取到或设置一个节点的HTML代码,可以取到css，以文本的形式返回
innerText：取到或设置一个节点的HTML代码，不能取到css
value:取到input[type='text']输入的文本
<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>
b.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 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>
4.操作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",
});
5.操作层次节点
JavaScript:
*1.childNodes：获取当前节点的所有子节点（包括元素节点和文本节点）
* children：获取当前节点的所有元素子节点（不包括文本节点）
*2.parentNode:获取当前节点的父节点
*3.firstChild:获取第一个元素节点，包括回车等文本节点
* firstElementChild:获取第一个元素节点，不包括回车节点
* lastChild、lastElementChild 同理
*4.previousSibling：获取当前元素的前一个兄弟节点
* previousElementSibling：：获取当前元素的前一个兄弟节点
* nextSibling、nextElementSibling
JQuery:
1.提供了大量的选择器：
- :first-of-type1.9+
- :last-of-type1.9+
- :nth-last-child()1.9+
- :nth-last-of-type()1.9+
- :nth-of-type()1.9+
- :only-child
- :only-of-type
1.9+
2.除此之外也提供了对应的函数：
first() last() children() parents() parent() siblings()
6.给一个节点绑定事件
JavaScript:
使用了Dom0事件模型和Dom2事件模型，具体内容见我上一篇博客
JQuery：
①.事件绑定的快捷方式
<body>
<button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
$("button:eq(0)").click(function () {
alert();
});
</script>
②：使用on进行事件绑定
<body>
<button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
//①使用on进行单事件的绑定
$("button:eq(0)").on("click",function () {
alert();
});
//②使用on同时给同一对象绑定多个事件
$("button:eq(0)").on("click dblclick mouseover",function () {
console.log();
});
//③使用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":},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>
7.JQuery的文档就绪函数和window.onload的区别
*①.window.onload必须等待网页资源（包括图片等）全部加载完成后，才能执行；
* 而文档就绪函数只需要等到网页DOM结构加载完成后，即可执行
*②.window.onload在一个页面中，只能写一次，写多次会被最后一次覆盖
* 而文档就绪函数在一个页面中可以有N个
三、JavaScript对象和JQuery对象的方法不能混用。
1.JavaScript对象和JQuery对象
① 使用$("")取到的节点为JQuery对象，只能调用JQuery方法，不能调用JavaScript方法；
* $("#div").click(function(){})√
* $("#div").onclick = function(){}× 使用JQuery对象调用JavaScript方法
*
* 同理，使用、document.getElement系列函数取到的对象为JavaScript对象，也不能调用JQery函数
2.JavaScript对象和JQuery对象互转
*① JQuery ---> JavaScript :使用get(index)或者[index]选中的就是JavaScript对象
* $("div").get(0).onclick = function(){}
* $("div").[0].onclick = function(){}
* ② JavaScript ---> JQuery :使用$()包裹JavaScript对象 (我们发现JQuery不管获得几个对象都是一个数组，可以直接给整个数组都添加某一事件)
* var div = document.getElementById("div");
* $(div).click(function(){}); 声明：此博客为博主原创如需转载请注明初出:http://www.cnblogs.com/ytsbk/p/9033837.html
JavaScript和JQuery的区别的更多相关文章
- php课程---JavaScript与Jquery的区别（转）
jQuery能大大简化Javascript程序的编写,我最近花时间了解了一下jQuery,把我上手过程中的笔记和大家分享出来,希望对大家有所帮助.要使用jQuery,首先要在HTML代码最前面加上对j ...
- php课程---JavaScript与Jquery的区别
使用Jquery必须在页面内引入一个Jquery包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- javascript与jquery的区别
- Jquery 复习练习（02）Javascript 与jquery 互转 onclick 与click区别
Javascript 与jquery 互转 jquery 为<script src="jquery-1.8.3.js"></script> 以checkbo ...
- Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别
官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...
- JQuery和JavaScript常用方法的一些区别
jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单,为了说明区别,下面与大家分享下JavaScript 与JQuery 常用方法比较 jquery 就 ...
- 【Ajax 4】Ajax、JavaScript和JQuery的联系和区别
导读:在之前,就分别学习了Ajax.JavaScript和JQuery,然后对于这三者之间的关系,是一直云里雾里的.尤其是后来学到了Ajax,就更是不明白了.现在,就给总结总结. 一.基本概述 1.1 ...
- jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- JavaScript、Jquery选择题
尚学堂Java EE软件工程师认证考试 试题库-选择题 一. 选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是( )(选择一项) A. numb_1 ...
随机推荐
- 【翻译】了解Ext JS 5的小部件
原文:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件.同时,还在Ext ...
- javascript语法之函数的定义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 10_Android中通过HttpUrlConnection访问网络，Handler和多线程使用，读取网络html代码并显示在界面上，ScrollView组件的使用
编写如下项目: 2 编写Android清单文件 <?xml version="1.0" encoding="utf-8"?> <mani ...
- 【Linux学习笔记】关于ubuntu开机菜单栏和任务栏不见了的有效解决方法
(一) 问题描述 ubuntu开机只有桌面,没有菜单栏和任务栏,如下图: (二) 问题解决 刚学习ubuntu,总有些像我这样不折腾就不舒服的人,今天改了一下主题,图标什么的,重启开机后就发现!咦!我 ...
- Linux内核中SPI总线驱动分析
本文主要有两个大的模块:一个是SPI总线驱动的分析 (研究了具体实现的过程): 另一个是SPI总线驱动的编写(不用研究具体的实现过程). 1 SPI概述 SPI是英语Serial Peripheral ...
- 2015/12/24:嵌入式C语言的位操作随笔
今晚是平安夜,首先祝大家平安夜快乐,明天是圣诞,祝大家圣诞快乐!! 好了,这周都特别有空,上班也非常轻松,基本就是看看内核驱动,学学安卓,没什么正事的开发活干.今晚,我们来总结一例在现实 ...
- 自定义ViewGroup添加布局动画
声明几个属性值: <declare-styleable name="GridImageViewGroup"> <attr name="childVert ...
- cocapods 使用及问题
一.CocoaPods的安装 (1)使用淘宝的Ruby镜像替换官方的ruby源,在终端输入命令 $ gem sources --remove https://rubygems.org/ $ gem s ...
- miniUI中弹出框问题
---恢复内容开始--- 设置页面弹出框并提交弹出框内容 弹出按钮 <a class="btn_color_1" onclick="onEdit(0)"& ...
- for 循环为何可恨？
Java的闭包(Closure)特征最近成为了一个热门话题. 一些精英正在起草一份议案,要在Java将来的版本中加入闭包特征. 然而,提议中的闭包语法以及语言上的这种扩充受到了众多Java程序员的猛烈 ...