在现代web开发中，JavaScript不仅仅是网页语言。它也用于开发桌面和移动应用程序。尽管网络上有许多现成的GUI控件，但有时可能找不到完全符合需求的控件。本文将介绍如何从头开始构建一个自定义控件，使用jQuery来辅助DOM操作。
首先，定义一些简单的需求：
接下来，定义一个简单的类结构，列出控件的方法、变量和处理程序，并简要描述它们的含义。
在JavaScript面向对象编程中，使用函数来定义对象的构造函数。以下是MyDiv控件的构造函数示例：
var MyDiv = function(pId, pParent, pWidth, pHeight, pText) {
this.id = pId;
this.parent = pParent;
this.width = pWidth;
this.height = pHeight;
this.text = pText;
this.upperClickCount = 0;
this.lowerClickCount = 0;
this.init();
};
构造函数允许创建MyDiv控件的实例，并传递参数以实现更多自定义功能。以下是创建实例的示例：
var myDivInstance = new MyDiv('myDiv1', 'body', 450, 120, '好，是MyDiv1，一个GUI控件实例，很高兴见到！');
为了改变控件的行为，定义了一些公共方法。以下是代码中的一个示例方法：
MyDiv.prototype.addCssClass = function(ppCssClass) {
$('#' + this.id).addClass(ppCssClass);
};
创建控件实例后，可以调用该方法来改变控件的CSS类：
myDivInstance.addCssClass('myCSSClass');
事件处理程序允许用户与控件交互。以下是代码中的一个示例事件处理程序：
function div1_click_Handler(event) {
if (event.target.classList.contains('upper-part')) {
myDivInstance.upperClickCount++;
var message = myDivInstance.upperClickCount === 1 ? '次' : '次';
$('.upper-part', '#' + myDivInstance.id).html('点击了' + myDivInstance.upperClickCount + message + '黑色区域之外！');
} else {
myDivInstance.lowerClickCount++;
var message = myDivInstance.lowerClickCount === 1 ? '次' : '次';
$('.lower-part', '#' + myDivInstance.id).html('点击了' + myDivInstance.lowerClickCount + message + '在黑色区域！');
}
}
事件处理程序负责统计点击非黑色区域的次数，并打印一些消息以响应点击。