从JS到JQuery

本是古典何须时尚 2022-08-06 11:20 165阅读 0赞

JQuery、JS很相似的两个名字，这两者之间一定有莫名的联系。在学习这两个知识之前，就有了这样的想法。学完之后，发现自己的猜测没错！

先来从概念上分析JQuery和JS。

JS全称JavaScript，是一种具有面向对象能力的、解释型的程序设计语言，一种直译式脚本语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的Web客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加Web互动、加强用户体验度等。

在介绍JQuery之前，我们先来看一下什么叫JavaScript库。

把各种常用的代码片段，组织起来放在一个js文件里，组成一个包，这个包就是JavaScript库。简单来说，就是将常用的代码进行有效地封装。

回想JQuery，这个概念和JQuery的概念很像。对，JS包就是我们所说的JQuery。

Jquery 就是把JS中常用的方法进行了封装，是基于JS语言的一个框架。JQuery封装的这些方法是通过JS实现的，就好比把JS写作了一个class类，还是js代码,调用它就像调用类那样。

每个东西的使用，都是由于它的优点。JQuery的优点就是能将JS代码和HTML代码分离，便于代码和维护和修改。

小Demo：分别用js和jquery把数据填充到div里面显示出来。

Html代码：

首先，引入JQuery，使用JQuery的js代码Jq.js和没有使用的Js.js。

Body中的代码段：

要填充的数据为“这是一个测试例子”。  
使用JQuery的代码段：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">$(function(){
    
          vardata="这是一个测试例子";
    
          $("#show").html(data);
    
    });</span></span>

未使用JQuery的代码段：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">window.onload = function () {
    
        var data ="这是一个测试例子";
    
        document.getElementById("show").innerHTML= data;
    
    };</span></span>

对比这两段代码，那个代码更容易写？那个代码量更少？当然，是使用了JQuery后的了（少量效果不明显，有兴趣的朋友可写个长的Demo进行比较）。但，我们可以看出，使用了JQuery的代码段就好像在写CSS代码一样，很容易记住。没有使用的，就不那么容易写了。