这132个特效，是我历时10个多月在油管一个一个跟着敲出来的，为了加强记忆，每个练习，我都录制了视频，在这里分享出来给大家。大家可能又会调侃了，你是工作不饱和吧，有时间做这些。其实，我目前工作还是挺饱和的，都是挤出来的。我们是9点上班，我基本7点半就到公司自学了，这样我就有一个半小时的时间来做这些了。

一、事件概述

事件的基本概念

上一章我们讲解了使用jQuery选择器获取元素，并通过一些方法来操作元素，本章我们讲解事件的概念，通过事件我们可以加强用户与浏览器的交互性，例如可以实现当用户点击某个元素的时候，对元素做一些操作，或是移动鼠标，对元素做一些操作。

事件的分类

事件主要可以分为以下几类：

• 鼠标事件
• 键盘事件
• 文档事件

在JQuery文件中下载，并将其引入html文件。在使用jQuery之前，我们需要到jQuery的官方网站：“
https://jquery.com/download/”

把下载好的文件放到工程根目录下，然后在这个根目录下创建index.html文件。最后，将下载的JQuery文件引入index.html文件，其代码如下：

jQuery EasyUI最新试用版免费下载>

本教程演示了如何冻结一些列，当用户在网格上水平移动滚动条时，冻结列不能滚动到视图的外部。

想要定义冻结列，首先您应该定义frozenColumns属性。frozenColumn属性和columns属性是一样的。

$('#tt').datagrid({
title:'Frozen Columns',
iconCls:'icon-save',
width:500,
height:250,
url:'data/datagrid_data.json',
frozenColumns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:80},
]],
columns:[[
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
]]
});

学习大纲

一、了解Jquery

1.什么是jquery

Jquery 是一款优秀的JavaScript框架，它是一个轻量的JS库，它兼容CSS3，还兼容各种浏览器（IE6.0+,火狐1.5+,谷歌，safari2.0+等），使用Jquery让web开发变得更简单，例如：文档操作、文档选择、制作动画、事件处理、AJAX的使用以及其他的功能。

树形网格组件从数据网格中继承，但是允许在行之间存在父/子节点关系。许多属性继承至数据网格，可以用在树形网格中。为了使用树形网格，用户必须定义 'treeField' 属性，指明哪个字段作为树节点。

本教程将向您展示如何使用树形网格组件设置一个文件夹进行浏览。

创建树形网格

今天接触webpack，就着官网上的教程一步一步的玩，把自己的理解总结以便和大家交流

webpack的主要特点

1. 可以把js,css,image,甚至文本当成模块来处理，并通过require的方法来调用。

2. 能够自动识别模块之间的依赖。

webpack的安装,通常是使用npm。

创建一个文件夹vue-webpack-basic,使用命令行进入该文件夹，输入

jQuery EasyUI最新版下载>

本教程中涉及的示例演示了如何从服务器端加载数据，如何添加分页组件到数据网格中。

创建数据网格

想要从远程服务器端加载数据，首先你应该设置“URL”属性，服务器端会返回JSON格式的数据。查看数据文档可获得更多的数据格式信息。

数据网格经常需要合并多个单元格，本教程将教会您在数据网格中如何合并单元格。

合并数据网格的单元格，您只需要简单地调用'mergeCells'方法并传入合并信息参数，告诉数据网格如何合并单元格。在合并的单元格中，除了第一个单元格以外，其他的单元格在合并后会被隐藏。

创建数据网格

<table id="tt" title="Merge Cells" style="width:550px;height:250px"
url="data/datagrid_data.json"
singleSelect="true" iconCls="icon-save" rownumbers="true"
idField="itemid" pagination="true">
<thead frozen="true">
<tr>
<th field="productid" width="80" formatter="formatProduct">Product ID</th>
<th field="itemid" width="100">Item ID</th>
</tr>
</thead>
<thead>
<tr>
<th colspan="2">Price</th>
<th rowspan="2" field="attr1" width="150">Attribute</th>
<th rowspan="2" field="status" width="60" align="center">Stauts</th>
</tr>
<tr>
<th field="listprice" width="80" align="right">List Price</th>
<th field="unitcost" width="80" align="right">Unit Cost</th>
</tr>
</thead>
</table>