一、本质上的区别

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-child
- :first-of-type^1.9+
- :last-child
- :last-of-type^1.9+
- :nth-child
- :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 ...

随机推荐

volley请求原理
Volley 实现原理解析本文为 Android 开源项目实现原理解析中 Volley 部分项目地址:Volley,分析的版本:35ce778,Demo 地址:Volley Demo 分析者:g ...
STL - set和multiset
set/multiset的简介 set是一个集合容器,其中所包含的元素是唯一的,集合中的元素按一定的顺序排列.元素插入过程是按排序规则插入,所以不能指定插入位置. set采用红黑树变体的数据结构实现, ...
Oracle EBS BOM模块常用表结构
表名: bom.bom_bill_of_materials 说明: BOM清单父项目 BILL_SEQUENCE_ID NUMBER 清单序号(关键字)ASSEMBLY_ITEM_ID NUMBE ...
01_Nginx安装,nginx下部署项目，nginx.conf配置文件修改，相关文件配置
1.下载Nginx,进入Nginx下载地址:http://nginx.org/ 点击nginx-1.8.0,进入:http://nginx.org/en/download.html,下载文件: ...
Netflix公布个性化和推荐系统架构
Netflix的推荐和个性化功能向来精准,前不久,他们公布了自己在这方面的系统架构. 3月27日,Netflix的工程师Xavier Amatrain和Justin Basilico在官方博客发布文章 ...
GCC/gcc/g++/CC/cc区别
平常在Linux上经常会用到gcc或者g++来编译程序,但对这两者的理解也就停留在一个是用来编译C程序,另一个是用来编译C++程序的(请注意:这种说法是有问题的,待会改进). 1. GCC GCC,是 ...
C++之IO操作
可参考自: C++之标准设备IO操作流 C++之预定义类型IO格式控制 C++之文件IO操作流
MongoDB 3.0新增特性一览
转自:http://blog.sina.com.cn/s/blog_48c95a190102vedr.html 引言在历经版本号修改(2.8版本直接跳到3.0版本)和11个rc版本之后,MongoD ...
asp.net session分布式共享解决方案
Session共享是分布式系统设计时必须考虑的一个重要的点.相比较java中的session共享解决方案,.net中的解决方案还是比较少,MemcachedSessionProvider类库是比较优秀 ...
(function(){xxx})(); 写法解释
常见格式:(function() { /* code */ })(); 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿 ...

JavaScript和JQuery的区别

一、本质上的区别

1.JavaScript 是通过<script></script>标签插入到HTML页面，可由所有的现代浏览器执行的一种轻量级的编程语言。

2.JQuery是一个JavaScript函数库。或者说是JavaScript中最流行的一种框架。

二、语法上的差异

1.操作元素节点

2.操作属性节点

3.操作文本节点

4.操作css样式的时候

5.操作层次节点

6.给一个节点绑定事件

7.JQuery的文档就绪函数和window.onload的区别

三、JavaScript对象和JQuery对象的方法不能混用。

1.JavaScript对象和JQuery对象

2.JavaScript对象和JQuery对象互转

JavaScript和JQuery的区别的更多相关文章

随机推荐

热门专题