### jQuery拖动改变div大小的核心知识点
1. **jQuery基础**
jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过提供一个API来简化HTML文档遍历和操作、事件处理、动画和Ajax，使得Web开发变得更加简单。
2. **HTML与CSS定位**
在本示例中，用于拖动和改变大小的div元素，使用了绝对定位（`position: absolute;`）。绝对定位允许你将元素放置到页面的任何位置，通过`top`和`left`属性来确定位置。这个技术是实现拖动功能的基础之一。
3. **事件监听与绑定**
jQuery的核心是其事件处理机制。`$(el).mousedown(function(e){...})`这行代码将一个事件监听器绑定到元素上，当用户按下鼠标时执行传入的函数。这里绑定的是`mousedown`事件，它是拖动操作的起始信号。
4. **鼠标坐标和元素尺寸计算**
在`mousedown`事件的回调函数中，代码通过`clientX`和`clientY`获取鼠标的坐标，并结合元素的当前宽度和高度，计算出鼠标与元素边缘的距离。这些坐标被用于后续的鼠标移动事件中，以计算元素的新位置或新尺寸。
5. **捕获鼠标事件**
IE浏览器有一个特有的`setCapture`方法，可以捕获后续的鼠标事件，这在拖动操作中很有用，因为它可以防止鼠标在拖动过程中离开元素时事件丢失。如果浏览器支持`setCapture`方法，就会使用这个方法来确保鼠标事件能够正确处理。
6. **动态更新元素样式**
在`mousemove`事件中，通过修改元素的`style.width`和`style.height`属性来动态更新元素的尺寸。这些属性直接控制了元素在页面上的显示效果。
7. **移除事件处理器**
当鼠标松开时，`mouseup`事件被触发。在这个事件的回调函数中，如果之前捕获了事件，将会释放捕获，并且从`document`对象上移除`mousemove`和`mouseup`事件的监听器。这样可以防止内存泄漏和确保拖动操作结束后不再触发不必要的事件。
8. **元素的默认行为**
通过`e.preventDefault()`阻止了默认行为。在这里，它的作用是阻止元素在被拖动时发生的默认行为，比如文本选择或其他默认鼠标事件行为。
9. **样式定义**
通过`<style>`标签定义了元素的样式。在这里，`#test` div的样式被定义为具有特定的宽、高、背景色、文本居中和边框。此外，通过`cursor:move;`设置了鼠标悬停在元素上方时显示为移动光标，这是让用户知道该元素是可以被拖动的一个重要信号。
10. **跨浏览器兼容性**
由于不同浏览器可能有不同的行为或API，代码中的条件语句检查了`setCapture`和`releaseCapture`等方法的支持情况，并根据支持与否执行不同的代码分支。这样的检查确保了代码可以在不同浏览器中以相似的方式工作。
本示例中演示的技术不仅适用于简单页面元素的拖动和调整大小，还可以扩展到更复杂的用户界面元素，如表格列的调整、窗口框架的缩放等。掌握这些知识点，对于进行Web前端开发和界面设计是非常重要的。
