js和jquery的区别—js和jQuery的区别 收藏 0

JS和JQUERY的区别

简单总结：

1、JS是一门前端语言。

2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。

3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便

关系比喻：

若把js比作木头，那么jquery就是木板（半成品）

jQuery与ajax都是js的一个框架，各有各的功能，若js是父亲的话，jquery与ajax就是两个儿子

详细情况：

javaScript的简写形式就是JS，一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能（其编写的程序可以被嵌入到HTML或XML页面中，并直接在浏览器中解释执行）。

• 组成部分：

核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）

Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。

Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。

Javascript短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。

AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。

• 组成：

基于XHTML和CSS标准的表示；

使用Document Object Model进行动态显示和交互；

使用XML和XSLT做数据交互和操作；

使用XML HttpRequest与服务器进行异步通信；

使用JavaScript绑定一切。

• 描述：

Ajax是结合了Java技术、XML以及JavaScript等编程技术，可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的管理。

Ajax技术使用非同步的HTTP请求，在Browser和Web Server之间传递数据，使Browser只更新部分网页内容而不重新载入整个网页。

Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

• 特点：

jQuery是当前很流行的一个JavaScript框架，使用类似于CSS的选择器，可以方便的操作HTML元素，拥有很好的可扩展性，拥有不少插件。

• 描述：

对于程序员来说，简化javascript和ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。

对于用户来说，改善了页面的视觉效果，增强了与页面的交互性，体验更绚丽的网页物资。

javaScript框架实际上是一系列工具和函数。

下面我用一张导图来阐述这三者的关系：

解释：

javaScript是用于Web客户端开发的脚本语言，Ajax是基于JS语言，主要组合JS、CSS、XML三种技术的新技术，是用于创建交互式网页应用的网页开发技术。jQuery是JS的框架，基于JS语言，集合Ajax技术开发出来的JS库，封装JS和Ajax的功能，提供函数接口，大大简化了Ajax，JS的操作。

项目中用jQuery比较多，具体讲讲他。

jQuery能大大简化JavaScript程序的编写

要使用jQuery，首先要在HTML代码最前面加上对jQuery库的引用，比如：

<script language=\”javascript\” src=\”/js/jquery.min.js\”></script> //引用

库文件既可以放在本地，也可以直接使用知名公司的CDN（CDN加载jquery的好处），好处是这些大公司的CDN比较流行，用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了，所以能加快网站的打开速度。另外一个好处是显而易见的，节省了网站的流量带宽。

Google提供的

http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

jQuery官方的

http://code.jquery.com/jquery-1.6.min.js

jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下：

1 定位元素 JS document.getElementById(\”abc\”) jQuery $(\”#abc\”) 通过id定位 $(\”.abc\”) 通过class定位 $(\”div\”) 通过标签定位 需要注意的是JS返回的结果是这个元素，jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。 2 改变元素的内容 JS abc.innerHTML = \”test\”; //现在的项目中有用到jQuery abc.html(\”test\”); 3 显示隐藏元素 JS abc.style.display = \”none\”; //现在的项目中有用到abc.style.display = \”block\”; jQuery abc.hide(); abc.show();

abc.toggle(); //在显示和隐藏之间切换、

4 获得焦点 JS和jQuery是一样的，都是abc.focus();

5 为表单赋值 JS

abc.value = \”test\”;

jQuery abc.val(\”test\”);

6 获得表单的值 JS

alert(abc.value);

jQuery alert(abc.val());

7 设置元素不可用 JS

abc.disabled = true;

jQuery abc.attr(\”disabled\”, true);

8 修改元素样式

JS

abc.style.fontSize=size;

jQueryabc.css(\’font-size\’, 20);

JS

abc.className=\”test\”;

JQueryabc.removeClass();

abc.addClass(\”test\”);

9 判断复选框是否选中

jQuery

if(abc.attr(\”checked\”) == \”checked\”)注意：网上说的.attr(\”checked\”) == true实际上不能用，上面这个测试过能用

①.根据ID取元素

{

JS:取到的是一个DOM对象。

　　例：var div = document.getElementByID(\”one\”);

JQUERY:取到的是一个JQUERY对象。

　　例：var div = $(\”#one\”);——括号里面是根据某个东西来找，相当于一个选择，如果我们要根据ID来找，在样式表里的ID是用#来表示的，所以在这里我们直接带入井号，整句的意思就是根据ID为one的来查找。

}

②.根据class取元素，在数组里面如果要取DOM对象使用索引的方式，如果要取JQUERY对象使用eq()

{

JS:取到的是一个数组

　　例：var div = document.ElementsByClassName(\”test\”);

JQUERY:

　　例：var div = $(\”.test\”);

}

③.根据name取元素

{

JS：返回的是一个数组

　　例：var bd = document.getElementsByName(uid);

JQUERY：的方式是用 方括号，属性=一个值，不限制非要根据name来取值，JQUERY是根据属性来取元素

　　例：$(\”[name=\’uid\’]\”);

}

④.根据标签名取元素

{

JS：返回的也是一个数组

　　例：var div = document.getElementsByTagName(\”div\”);

JQUERY：和样式表里面给所有div加样式的方法一样，在双引号内直接写标签名

　　例：$(\”div\”);

}

附：JQUERY的其他取值方式

组合选取：var div = $(\”div span\”);——有很多组合方式

*******************************************************************

操作内容

　　①.非表单元素（如果是文本就用text方法，如果是html代码就用html方法）

　　　　{

　　　　　　例：div.text();——无参数的情况下是取值

　　　　　　div.text(\”aaaa\”);——有参数的情况下是赋值

　　　　　　div.html();——无参数的情况下是取值

　　　　　　div.html(\”aaaa\”);——有参数的情况下是赋值

　　　　}

　　②.表单元素

　　　　{

　　　　　　JS：div.value;——取值；div.value = xxx;——赋值

　　　　　　JUQERY：div.val();——无参数是取值，有参数是赋值。

　　　　}

*******************************************************************

操作属性

JS里面用来操作属性的方法是

div.setAttribute(\”\”,\”\”);——设置属性、修改属性

div.removeAttribute(\”\”);——移除属性，引号里面写一个属性名

div.getAttribute();——获取属性

JQUERY里面用来操作属性的方法

添加属性：div.attr(\”test\”,\”aa\”);——给这个attr方法加入参数，属性名叫做test，属性的值是aa

移除属性：div.removeAttr(\”test\”);——移除test这条属性

获取属性：div.attr(\”test\”);——在attr方法里面直接写入一个属性的名就可以了

*******************************************************************

操作样式

JS里面操作样式的关键字是style

例：div.style.backgroundColor = \”red\”;——把这个div的背景色设置成为了红色

JQUERY里面操作样式的关键字是css

例：div.css(\”background-color\”,\”yellow\”);——把这个div的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化

　　JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的！！！！！

　　JQUERY操作样式的方法可以是内联的也可以是内嵌的

Java培训：Java与JavaScript，哪个是更好的选择？

　　Java和JavaScript是两种用于创建复杂应用程序的语言，用途广泛。虽然乍一看它们似乎很相似，但这两种语言之间存在许多差异，这使它们变得独一无二。想了解有关java更多详细信息，建议参加Java培训，通过系统全面的学习，可以快速提升自己。

　　这两种语言都很好，但如果谈论最好的一种，这将是相当具有挑战性的。因此，如果你想知道Java和JavaScript中哪一个更好，这篇文章会给你更好的指引，因为在这里你将能够了解更多关于Java和JavaScript的知识，最终帮助你找到web应用程序开发的最佳选择。

　　Java概述

　　Java是一种非常强大的面向对象编程语言。它一直是最受欢迎的语言之一Java web开发，以及其他类型的软件。Java也运行在很多平台上，包括Android和iOS设备、桌面、服务器等。

　　Java的重要特性

　　l 类别：Java中的类提供了创建附加了数据和行为的对象的能力。例如，一个人的类可能包含两个数据字段：姓名和年龄。它还可以有一些方法来获取这个人的当前年龄，或者将他们的名字转换成大写字母。

　　l Javadoc注释：Javadoc注释是一种特殊类型的Java注释，它可以提供关于类及其方法的附加信息，包括它采用什么参数、返回值或异常。

　　l 数据类型：Java有多种数据类型，包括常见的数字和字符串值，还有布尔值、字节(小整数)、字符(单个字符)、长整型(较大的整数)等等。

　　l 操作员：Java中的表达式可以用各种运算符来操作。例如，乘法(*)或除法(/)。在java培训中，有系统全面的理论知识和企业级实战项目，可以让你真正掌握java知识和技能，更好地进行项目开发。

　　JavaScript概述

　　JavaScript (JS)是一种脚本语言，主要是为了使网页更具交互性和动态性而开发的。它还被用于开发其他类型的软件，例如游戏、动画，JavaScript应用程序开发，或者简单的实用程序。借助一个名为“JavaScript引擎”的浏览器插件，JavaScript可以在许多平台上运行，包括桌面、服务器和移动设备。

　　JavaScript的重要特性

　　l 语句循环：可以使用for、while和do等JS语句重复执行一组指令。

　　l 功能：JavaScript函数类似Java的方法，它们提供了一种将代码模块化为可重用部分的方法。调用现有函数很像从浏览器页面调用任何其他脚本，这使得在不同的web页面上重用脚本成为可能。

　　l 对象和类：JavaScript可以创建预定义类的对象，这在某些方面类似于Java的基于类的编程。

　　l 事件处理：事件可以与表单控件一起使用，如输入字段、单选按钮或复选框，使其能够在用户单击时做出响应。例如，一个带有文本字段的表单可能预先配备了一个“确定”按钮，用户单击它就会触发该按钮。

　　很难确定Java和JavaScript哪个更好，因为这两种语言都适合web应用程序开发，而且每种语言都有自己的优缺点。让我们从分析各种因素开始吧。如果你正在考虑如何快速学习java，那么参加java培训掌握更全面的知识和技能将是一个很好的开始。

　　1、性能

　　Java和JavaScript在这方面是相似的，但是一种语言的性能还取决于许多其他因素。

　　JavaScript是一种轻量级编程语言，具有动态类型系统，这使得在开发web应用程序时运行脚本变得很容易。此外，它与不同浏览器的兼容性使开发变得更加容易，因为现在开发人员不必担心他们的代码如何在不同的浏览器上运行。

　　Java是一种面向对象的编程语言，具有静态类型系统，这使得它比JavaScript运行起来更高效、更快，尤其是在大型Java应用程序开发在那里可以找到许多变量/对象。

　　2、程序调试时间

　　就开发时间而言，JS和Java开发一个web应用程序花费的时间是一样的，但Java仍然胜出，因为它开发起来简单快捷。JavaScript的学习曲线非常短;这就是为什么开发人员在开发应用程序时可以很容易地从JS切换到任何其他语言(如果需要的话)。

　　3、数据结构

　　JavaScript带有原始数据结构，即字符串、整数、布尔等。而在Java的情况下，带有像数组和对象类这样的数据结构，它们有自己的数组类型特性，使它更有效。

　　JavaScript在其核心语言中有对函数的原生支持;虽然Java默认没有这样的特性，但是我们仍然可以通过使用JavaScript来实现。如果你也打算从事java行业，可以参加java培训来提升自己，有老师带你快速入门，很快就能掌握java知识和技能。

　　4、前端开发

　　对于web应用的前端开发，JavaScript非常有帮助。这背后的原因在于，JavaScript就是为此而开发的，并且有许多开源库可用，如jQuery，这使得开发人员在处理HTML/CSS元素时更加容易。虽然Java没有任何与前端开发相关的特殊特性，但是Java和JavaScript都可以用于相同的目的。

　　5、后端开发

　　JavaScript有Node.js，它有一个开源的运行时环境，可以用来开发像Google Apps脚本这样的服务器端应用，甚至是一个使用Express JS(节点包管理器)的简单web应用。

　　类似地，对于Java来说，它自带了一套用于后端开发的工具和框架。Java是一种编译型编程语言，它允许开发人员编写更少的代码，但它也使整个调试过程变得缓慢。

　　6、浏览器兼容性

　　Java是一种跨平台语言，而JavaScript只在客户端运行，与浏览器兼容。然而，我们可以在NodeJS中使用JS，使它也能作为服务器端脚本语言工作，但是这项技术仍然有Java中没有的局限性。想要快速学会java技能，建议报名参加java培训，有明确清晰的学习路线，系统规范的课程，专业讲师面授指导教学，可以在短时内获得很大提升。

　　简而言之，如果你想让你的web应用程序兼容旧的浏览器，你必须用Java，但如果你想制作一个兼容所有现代和最新浏览器的web应用程序，JavaScript将是你的最佳选择。此外，这项技术可以在Android等其他平台上运行，这使得它对于移动应用程序开发也更加有用。

　　7、社区支持

　　与JavaScript相比，Java拥有巨大的社区支持。因此，Java开发人员更容易解决与开发相关的问题。但是，JS社区的数量每天都在增加。这将很快增加它在全球软件工程师和web应用程序开发人员中的受欢迎程度。

　　8、流行

　　Java在世界范围内拥有大量的支持者，因为它被认为是最好的面向对象编程语言。它在开发、性能和其他技术方面提供了许多优势，使得Java在软件工程师中很受欢迎。相反，与Java相比，JavaScript可能没有那么高效，但是，它的可用性使它在开发者中很受欢迎。

　　结语

　　JavaScript和Java都是流行的语言，各有千秋。但是哪一个最适合开发web应用呢?这个问题的答案取决于你正在做的开发类型、你的预算和其他因素，比如业务需求。想掌握 Java 技术的同学不妨报个Java培训班，可以节省学习时间，提高学习效率，在短时间内学有所成，还能找到一份不错的工作。

浅谈JS和jQuery优劣

现在各种类库满天飞，说jQuery有多快多快，可是对前端大牛来说，更定不会止步于jQuery，因而常常听到高级的前端工程师追求原生js，为何？答案是原生JS要更快，原因是JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西，考虑通用性必然会导致性能的损耗。

当然，我不是提倡写代码纯用原生JS实现，请记住：“框架能够让我们走的更快，但只有了解原生的JS才能让我们走的更远”。

下面直接用代码示例：流行的常用的JQuery功能用原生JS实现。

选择器

JQuery选择器的强大无需赘言，然而在大多数的情况下，我们可以使用相同的代码量用原生JS轻易实现。

1.获取页面所有的div

/* jQuery */ $(\”div\”) /* native equivalent */ document.getElementsByTagName(\”div\”)

2.获取某类名相同的一群元素

/* jQuery */ $(\”.my-class\”) /* native equivalent */ document.querySelectorAll(\”.my-class\”) /* FASTER native equivalent */ document.getElementsByClassName(\”my-class\”)

3.更复杂的一些选择器

/* jQuery */ $(\”.my-class li:first-child\”) /* native equivalent */ document.querySelectorAll(\”.my-class li:first-child\”) /* jQuery */ $(\”.my-class\”).get(0) /* native equivalent */ document.querySelector(\”.my-class\”)

DOM操作JQuery频繁功能就是操作DOM元素，诸如插入或删除一个元素。当然，如果使用原生JS实现这些功能，代码量肯定是会有所增加的，不过我们也可以将这些功能封装成函数，下面是一些常用的DOM操作的原生JS实现。

1.插入HTML元素

/* jQuery */ $(document.body).append(\”<div id=\’myDiv\’><img src=\’im.gif\’/></div>\”); /* CRAPPY native equivalent */ document.body.innerHTML += \”<div id=\’myDiv\’><img src=\’im.gif\’/></div>\”; /* MUCH BETTER native equivalent */ var frag = document.createDocumentFragment(); var myDiv = document.createElement(\”div\”); myDiv.id = \”myDiv\”; var im = document.createElement(\”img\”); im.src = \”im.gif\”; myDiv.appendChild(im); frag.appendChild(myDiv); document.body.appendChild(frag);

CSS操作

在JQuery中可以轻松实现对css的操作，增加属性、删除属性或是检测是否存在某个类。那么你是否觉得使用原生JS实现会很麻烦呢？其实不然，因为有classList。下面是一些关于JQuery css操作的JS原生实现。

// get reference to DOM element var el = document.querySelector(\”.main-content\”); //—-Adding a class—— /* jQuery */ $(el).addClass(\”someClass\”); /* native equivalent */ el.classList.add(\”someClass\”); //—-Removing a class—– /* jQuery */ $(el).removeClass(\”someClass\”); /* native equivalent */ el.classList.remove(\”someClass\”); //—-Does it have class— /* jQuery */ if($(el).hasClass(\”someClass\”)) /* native equivalent */ if(el.classList.contains(\”someClass\”))

当我们简单地逐个设置Css的属性，而并非将它们全部传递给JQuery的Css函数时，性能明显会快很多。而且，真的不会添加什么额外的代码。

// get reference to a DOM element var el = document.querySelector(\”.main-content\”); //—-Setting multiple CSS properties—- /* jQuery */ $(el).css({ background: \”#FF0000\”, \”box-shadow\”: \”1px 1px 5px 5px red\”, width: \”100px\”, height: \”100px\”, display: \”block\” }); /* native equivalent */ el.style.background = \”#FF0000\”; el.style.width = \”100px\”; el.style.height = \”100px\”; el.style.display = \”block\”; el.style.boxShadow = \”1px 1px 5px 5px red\”;

show与hideshow()与hide()应该也是JQuery中十分常用的方法，原生JS实现同样轻松。

// get reference to a DOM element var el = document.querySelector(\”.main-content\”); //—-show() or hide()—- /* jQuery */ $(el).show(); $(el).hide(); /* native equivalent */ el.style.display = \’\’; el.style.display = \’none\’;

事件绑定

// get reference to a DOM element var el = document.querySelector(\”.main-content\”); //—-Event Listener off—- /* jQuery */ $(el).off(eventName, eventHandler); /* native equivalent */ el.removeEventListener(eventName, eventHandler); //—-Event Listener on—- /* jQuery */ $(el).on(eventName, eventHandler); /* native equivalent */ el.addEventListener(eventName, eventHandler);

jQuery的确是个了不起的库，如果同样轻松的使用JS实现jQuery，尽量使用JS。即使优化有点吹毛求疵，由于html5游戏的迅速崛起，这点优化就显得格外的宝贵。

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com