复杂化JS代码与简单化jQuery代码你会选择哪一个？

Js事件与jQuery事件两者之间的比较

开发工具与关键技术：VS的JavaScript事件与jQuery事件
作者：周欢
撰写时间：2019/1/20

Js事件
1、 页面事件onload 和 onunload
2、 焦点事件onfocus事件
3、 鼠标事件onmouseover 、 onmouseout 、onmousedown、onmouseup 以及 onclick

jQuery事件
1、 页面事件 ready
2、 焦点事件 focus、focusIn、focusOut
3、 鼠标事件mousedown 、mouseup、mouseenter、mouseleave、 mouseout、 mouseover、dbclick、click

页面事件的代码比较截图：

很显然两者比较jQuery代码比较简洁
拓展：（.Window.onload 事件只允许使用一次，而ready页面事件可以无限使用）

焦点事件的代码比较截图：
Js的onfocus事件

jQuery的focus事件

jQuery的focusIn事件、focusOut事件

鼠标事件的代码比较截图：
Js的onmouseover 事件、onmouseout事件

Js的onmousedown事件、onmouseup事件

jQuery的onmouseover 、 onmouseout 、onmousedown、onmouseup事件与js的效果一致就代码不一致。mouseenter、mouseleave事件又与onmouseover 、 onmouseout事件效果一致

代码示意：

js的click事件

jQuery的dbclick事件与click事件

    $("button:eq(0)").click(function () {
        alert("jQuery鼠标事件之click单击事件");            
    });    //第一个按钮的点击事件

    $("button").eq(1).dblclick(function () {
        alert("jQuery鼠标事件之dblclick双击事件");
    });	//第二个按钮的dblclick事件

页面加载事件两者比较得出结论：
JavaScript页面加载事件只能使用一次，jQuery页面加载事件能无限使用；两者的代码量jQuery较少 。

焦点事件两者比较得出结论：
两者是一个包含关系，jQuery包含了JavaScript焦点事件，功能比起JavaScript焦点事件功能较多。

鼠标事件两者比较得出结论：
JavaScript鼠标事件与jQuery鼠标事件的功能大致一样，但jQuery的事件偏多，两者也是一个包含关系。

综合比较，得出结论：
1、 jQuery的代码量简洁。
2、 jQuery“写得少，做的多”。
3、 JavaScript的代码大多在jQuery中都有，其实jQuery 是一个 JavaScript 函数库。

温馨提示：
1、 现在大多软件公司都要求掌握jQuery，为了顺应潮流JavaScript和jQuery之间建议使用jQuery。当然最好是两者都掌握的好，掌握后可以将两者对比学习，你会发现jQuery实际上就是JavaScript的函数库，jQuery“写得少，做的多。
2、 类比学习是一个很不错的学习方法。