【慎思堂】之议家长里短：Javascript与JQuery

桃扇骨 2022-09-20 05:46 71阅读 0赞

>     
> 
>     本文的主要内容为：Javascript的由来、特性、功能。JQuery的由来、优势。以及Javascript和JQuery之间的区别和联系。
> 
>   
> 
> 
> # 一Javascript篇 #
> 
>   
> 
> 
> ## 1、为什么会出现Javascript？ ##
> 
>     以前的网页过于枯燥无法满足网民的需要。因此诞生了Javascript使得网页更绚丽了、更酷了。 
> 
>      JS的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。同时，缓解服务器的压力，及时响应用户的事件，提高用户体验。
> 
>   
> 
> 
> ## 2、JS有哪些特性呢？ ##

>   JS是一种**解释型**的**网页脚本语言**。其作用是**控制**浏览器的行为和内容。
> 
> > **客户端运行**，可以减轻服务器的压力。
> 
> > **不能独立运行**，需要由Web浏览器进行解释和执行。
> 
> > **解释性语言**，代码执行不进行预编译。

> ### 思维拓展： ###

> > ### 问：JS语言和我们曾经学过的C\#、VBScript有什么区别。能否代替JS？ ###

> >     JavaScript是一种脚本语言，需要由Web浏览器进行解释和执行，不能独立运行。而Java、C\#是汇编语言，编译型语言。
> > 
> >     C\#取代不了JS， 因为C\#不能在前台，也就是浏览器里运行。而 javascript 和 vbscript 的作用基本一样，它两都可以用来写 asp 的后台代码， 也都可以运行在前台浏览器里。不同的是 javascript 可以运行在非 IE 浏览器，但是 vbscript 只能在 IE 里面运行。
> > 
> >   
> >

> ## 3、JS能实现哪些功能 ##

> ###     1）实现网页特效 ###

>       JS能实现很多网页特效，如图片文字的滚动，图片的动态变换等。
> 
> ###     2）操作HTML元素 ###

> >   通过JS，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。

> ####  思维扩展： ####

> > **问：JS是如何操作HTML的？**

> >     要改变页面的某个东西，JS 就需要获得对 HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过**文档对象模型（****DOM****）**来获得的。DOM可被JS用来读取、改变 HTML、XHTML以及 XML文档。也就是说DOM可以帮助JavaScript更好的和页面进行交互。

> ###     3）[表单验证][Link 1] ###

> >   JS可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证。

> > ####   验证表单常用的两种方式： ####
> 
> >     1、手动写方法，在表单提交或者触发了某个事件的时候，调用这个JS方法，再通过JS代码提取这个控件的属性，判断它是否满足条件。
> 
> >     2、利用正则表达式，验证输入的数据是否符合某种格式。

>   
> 
> ###     4）检查客户浏览器和创建cookies ###

> >   使用JS验证用户浏览器的版本，信息等。

>  
> 
> # 二 JQuery篇 #
> 
>   
> 
> 
> ## 1、JQuery来源   ##
> 
>   随着JS的弊端也慢慢浮现出来了，JS自身的三大弊端：

> > 1）复杂的文档对象模型（Dom问题） 
> 
> > 2）不一致的浏览器实现（浏览器问题） 
> 
> > 3）缺乏便捷的开发，调试工具（工具问题）

>     Jquery是轻量级（很小）的JS库，并避免了上述现状。详细请参加[**《【慎思堂】之JQuery实战总结》**][JQuery]
> 
>   
> 
> ##  2、JQuery的优势 ##
> 
> ###     1）轻量级 ###

> >      体积小，减轻服务器压力，友好的用户体验。

> ###     2）强大的选择器； ###

> >     由于JS对DOM的选择：每一个都是getelementbyid或者getelementbytagname或者getelementbyname之类的，过长的提取方法和每一次单一的提取，让很多程序员都很抓狂。相对JS的选择操作，JQuery的强大的选择器绝对是精简高效。

> ###     3）出色的dom操作的封装 ###

> >     JQuery封装了大量常用的dom操作，使开发者在编写DOM操作相关程序的时候能够得心应手.

> ###     4）可靠的事件处理机制 ###
> 
> ###     5）完善的AJAX ###

> >     JQuery将所有的AJAX操作封装到一个函数$.(ajax)里，使得开发者处理AJAX的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题

> ###     6）出色的浏览器兼容性 ###
> 
>      
> 
> # 三 JQuery和JS之间是什么关系？ #

> > **为什么有了JS以后，还要有JQuery？JS和JQuery之间是什么关系？**

> > > **JQuery是对JS的一个进一步的总结。**

> >     JS是比较细的颗粒，非常多，非常基础。为了解决某一类问题，你得需要很多的JS才能解决。因此，有的人为了解决这一类问题，把JS打成一个包。直接用这个包来解决问题，就省事了。JS能解决很多的问题，JQuery解决了JS中特定的几个问题，把JS封装起来了。但是底层的东西还是JS。但是你需要知道它解决的是那几个问题，才能做到在什么时候能用。

> > **举个例子：**

> >      JS就像是一个铁板，JQuery是用铁矿中的一些铁制成的铁锹。我现在需要做的耕地。如果我要使用JS来耕地可以实现：第一步，把铁炼化了；第二步，放在模子里面，制成铁锹的形状；第三步，用木头棍做扶手组装在一起；第四步，把铁锹打磨快了；第五步，耕地。虽然可以实现耕地的功能，但是却很麻烦。而如果我们使用JQuery的话，只需要最后一个步骤就可以了。
> > 
> >   
> >

> > **放到代码中来讲的话：**

> >     比如：JQuery解决了DOM的问题，如果用JS写DOM的话，就会比较麻烦。需要写好多句。而用JQuery只需要写一两句就可以。因为可以看出，JQuery的特点：写得少，做得多。

>  
> 
> ** 四 总结**

> >     HTML定义了页面的结构，CSS美化了页面的样式，那么JS则用来控制页面的行为，它是用来增加页面与用户的交互性的。目前，大多数网页的动态效果，都离不开JavaScript.

> >     JQuery解决了JS中特定的几个问题，如：DOM 问题、浏览器兼容问题……JQuery是把JS封装起来，以达到简单复用的目的，但是底层的东西还是JS。因此，JS是不可替代的。

> >      有关HTML部分和CSS部分的知识，小编同样会采用对比学习的方式进行讲解：下一期的精彩内容为：CSS+DIV与Table页面布局的比较。

>   
> 
> 
>   
>

[Link 1]: http://baike.baidu.com/view/8476796.htm
[JQuery]: http://blog.csdn.net/zhaolijing2012/article/details/17394845