步介绍下Qt Designer界面中显示的组件，分别为Layouts、Spaces、Buttons、Item Views、Item Widgets、Containers、Input Widgets、Display Wdigets；

1、Layouts（布局管理组）

（1）盒子布局（QHBoxLayout 和 QVBoxLayout）：

简介：盒子布局用于在水平或垂直方向上排列控件。它们是最常用的布局管理器之一。

QHBoxLayout：将控件按照从左到右的顺序进行横向添加。

QVBoxLayout：将控件按照从上到下的顺序进行纵向添加。

（2）栅格布局（QGridLayout）：

简介：栅格布局将窗口分为若干行和列，可以在指定的行和列位置添加控件。

QGridLayout：用于创建网格布局，可以在指定的行和列位置添加控件。

（3）表单布局（QFormLayout）：

简介：表单布局以两列的形式布局在窗口中，左边为标签，右边为输入控件。

QFormLayout：用于创建表单布局，方便设置标签和输入控件的对应关系。

2、Spaces（空间间隔组）

分隔组件（Spacer）：

水平分隔（Horizontal Spacer）：用于在水平方向上添加额外的空间或填充。可以通过 QSpacerItem 类来实现。

垂直分隔（Vertical Spacer）：用于在垂直方向上添加额外的空间或填充。同样，可以使用 QSpacerItem 类来实现。

3、Buttons（按钮组）

（1）按钮控件（QPushButton）：

简介：按钮控件用于触发特定操作，例如执行函数或打开对话框。在 Qt Designer 设计器中，按钮控件对应 QPushButton 类。

设置按钮文本：可以在创建按钮时直接设置按钮的文本，也可以使用 setText() 方法来更改按钮的显示内容。

设置按钮图标：使用 setIcon() 方法来显示按钮的图标。

设置按钮状态：按钮可以设置为按下后不弹起，使用 setCheckable(True)。

绑定按钮和槽函数：使用 clicked.connect() 来连接按钮点击事件和相应的槽函数。

（2）单选按钮控件（QRadioButton）：

简介：单选按钮用于从多个选项中选择一个。用户只能选择其中一个选项。在 Qt Designer 设计器中，单选按钮控件对应 QRadioButton 类。

设置默认选中状态：使用 setCheckable(True) 来设置按钮是否可以被选中。

绑定按钮状态变化信号：使用 toggled.connect() 来连接按钮状态切换事件和相应的槽函数。

（3）复选框控件（QCheckBox）：

简介：复选框用于选择多个选项。用户可以同时选择多个选项。在 Qt Designer 设计器中，复选框控件对应 QCheckBox 类。

4、Item Views （项目视图组）

（1）清单视图（QListView）：

简介：清单视图用于展示一个简单的列表，适合于显示一系列项，如文本列表或图标集。

应用场景：适用于显示字符串列表、图像集合或其他一维数据。

使用方法：可以与数据模型（如 QStringListModel 或 QStandardItemModel）结合使用，动态地展示和更新数据。

（2）表格视图（QTableView）：

简介：表格视图提供了表格形式的数据展示，适合于展示和编辑结构化数据，如电子表格。

功能特点：支持多行和多列，可以自定义列宽、行高以及单元格的样式。

数据管理：可以与数据模型结合使用，方便管理和展示复杂的数据集。

（3）树视图（QTreeView）：

简介：树视图用于显示树形结构数据，非常适用于展示具有层级关系的信息，如文件系统。

应用场景：适用于展示层级结构数据，例如文件夹和文件的层次关系。

（4）列视图（QColumnView）：

简介：列视图提供了一种独特的方式来浏览树形结构数据，通过连续的列来显示每个层级。

适用情况：特别适合于深层次的层级数据展示。

这些组件都是基于模型-视图-控制器（Model-View-Controller, MVC）设计模式构建的，其中模型（Model）负责存储数据，视图（View）负责显示数据，而控制器（Controller）负责处理用户输入和操作。

除了以上列出的基本视图组件，PyQt 还提供了一些用于定制视图外观和行为的附加组件和类，例如：

1. QAbstractItemView: 用于派生自定义视图的基类，提供了许多方法和信号以管理视图中的项目。
2. QStandardItemModel: 提供了一个通用的模型类，用于存储数据，适用于各种视图组件。
3. QSortFilterProxyModel: 用于对现有模型进行排序和过滤的代理模型。
4. QItemDelegate: 用于定制单元格的外观和编辑行为的代理类。

5、Item Widgets （项目控件组）

（1）List Widget（列表视图）：

QListWidgetItem：用于在列表视图中显示的项目控件。

QListWidget：基于列表视图的控件，用于显示 QListWidgetItem 对象。

（2）Tree Widget（树形视图）：

QTreeWidgetItem：用于在树形视图中显示的项目控件，可以包含子项目。

QTreeWidget：基于树形视图的控件，用于显示 QTreeWidgetItem 对象。

（3）Table Widget（表格视图）：

QTableWidgetItem：用于在表格视图中显示的项目控件。

QTableWidget：基于表格视图的控件，用于显示 QTableWidgetItem 对象。

6、Containers（容器）

（1）GroupBox（组合框）：

简介：GroupBox 是一个容器，可以在内部添加内容，并修改标题头。它通常用于将一组相关的界面元素进行分组，以便在界面中创建有组织的部分。

应用场景：适用于将一组复选框、单选按钮或其他控件组织在一起，以便用户可以更清晰地理解它们之间的关联性。

（2）ScrollArea（滚动区）：

简介：ScrollArea 是一个滚动视图，控件内可以为文本、图片等。当控件内部件超出视图大小时，提供滚动条，这样就可以看到整个部件的大小。

应用场景：适用于需要滚动查看内容的情况，例如文本内容超出显示范围、图片过大等。

（3）ToolBox（工具箱）：

简介：ToolBox 是一个选项卡式的条目，类似于 QQ 联系人列表。它允许您在一个页面上组织多个子控件，每个子控件对应一个选项卡。

应用场景：适用于创建多功能工具箱界面，例如设置选项、功能切换等。

（4）TabWidget（切换卡）：

简介：TabWidget 提供了一系列选项卡的切换，每个选项卡下可以添加其他控件。它通常用于创建多页签式的布局。

应用场景：适用于需要在不同页面之间切换的情况，例如设置界面、多标签文档等。

（5）StackedWidget（层叠窗口）：

简介：StackedWidget 是一个层叠窗口，提供了多页面切换的布局。每个窗口下可以添加其他控件，类似于文档的切换。

应用场景：适用于需要在不同页面之间切换，但一次只显示一个页面的情况。

(6)框架窗口（Frame）：

简介：QFrame 用于添加框架、分割线，帮助划分界面区域。

应用场景：适用于组织界面元素、添加装饰或分隔区域。

(7)窗口（widget）：

简介：QWidget 是 PyQt 中所有用户界面对象的基类，它可以作为容器来包含其他控件，也可以作为顶层窗口使用。

应用场景：用于组织布局、创建自定义部件、提供装饰性功能、实现特定功能以及作为容器等方面

（8）MDI 区域（MDI Area）：

简介：多文档界面区域，用于创建具有多个子窗口的应用程序，每个子窗口可以是一个独立的文档或视图。

应用场景：适用于那些需要在单个应用程序窗口中同时显示和管理多个文档、图形、视图或子窗口的应用场景。

（9）Dock 窗口（Dock Widget）

简介：可停靠窗口，可以附加到主窗口的边缘或浮动。

应用场景：通常用于创建工具栏、调色板、项目浏览器等，允许用户根据需要将它们停靠到主窗口的不同位置。

7 Input(输入部件组)

(1)QLineEdit（单行文本输入框）：

简介：QLineEdit 提供了一个单行文本输入框，用户可以输入和编辑单行文本。

应用场景：适用于获取用户输入的单行文本数据。

(2)QTextEdit（多行文本编辑器）：

简介：QTextEdit 是一个多行文本编辑器，支持富文本和纯文本。

应用场景：适用于编辑和显示多行文本，例如日志、说明文档等。

(3)QSpinBox（整数输入框）：

简介：QSpinBox 是一个带有增减按钮的数字输入框，允许用户选择一个整数值。

应用场景：适用于需要输入整数的场景。

(4)QDoubleSpinBox（浮点数输入框）：

简介：QDoubleSpinBox 类似于 QSpinBox，但用于输入浮点数。

应用场景：适用于需要输入浮点数的场景。

(5)QComboBox（下拉列表）：

简介：QComboBox 允许用户从预定义的选项列表中选择。

应用场景：适用于需要从有限选项中选择一个的场景。

(6)QSlider（滑动条）：

简介：QSlider 提供了一个滑动条，用于选择一个范围内的值。

应用场景：适用于需要滑动选择数值的情况。

(7)QDateEdit（日期）：

简介：用于选择日期的控件，允许用户通过日历选择日期。

（8）QTimeEdit（时间）：

简介：用于选择时间的控件，允许用户输入或选择时间。

（9）QDateTimeEdit（日期和时间）：

用于选择日期和时间的控件，允许用户同时选择日期和时间。

8 Display Wdigets（显示组控组）

（1）QLabel（标签）：

简介：QLabel 用于显示文本或图像，是最基础的显示控件之一。

应用场景：适用于展示静态文本、富文本或图像。

（2）QTextBrowser（文本浏览器）：

简介：QTextBrowser 提供了丰富文本的显示，支持超链接和 HTML 格式。

功能特点：支持显示富文本内容，包括 HTML、图像等。

应用场景：适用于显示复杂文本内容，例如日志、说明文档等。

（3）QGraphicsView（图形视图）：

简介：QGraphicsView 用于展示复杂的 2D 图形界面，适用于游戏、图形编辑等程序。

功能特点：支持自定义绘制、图形交互和动画效果。

应用场景：适用于需要绘制和展示图形的情况。

（4）QCalendarWidget（日历控件）：

简介：QCalendarWidget 提供一个交互式的日历控件，允许用户选择日期。

应用场景：适用于需要选择日期的场景。

（5）QLCDNumber（液晶数字显示器）：

简介：QLCDNumber 用于显示液晶风格的数字，常用于计时器、状态指示等。

应用场景：适用于需要显示数字的情况。

（6）QProgressBar（进度条）：

简介：QProgressBar 展示任务进度，给用户反馈任务完成度。

应用场景：适用于需要展示任务进度的情况。

（7）QOpenGLWidget（OpenGL 视图）：

简介：QOpenGLWidget 集成 OpenGL 用于高性能图形渲染，适用于 3D 图形和动画。

应用场景：适用于需要使用 OpenGL 渲染图形的情况。

控件的具体用法后期再详细说明；

, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20

　　var reg=/^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

　　reg.test("a1a__a1a__a1a__a1a__");

2，截取字符串abcdefg的efg

　　var str="abcdefg";

　　if (/efg/.test(str)) {

　　var efg=str.substr(str.indexOf("efg"), 3);

　　alert(efg);

　　}

3，判断一个字符串中出现次数最多的字符，统计这个次数

　　//将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数

　　var str="abcdefgaddda";

　　var obj={};

　　for (var i=0, l=str.length; i < l; i++) {

　　var key=str[i];

　　if (!obj[key]) {

　　obj[key]=1;

　　} else {

　　obj[key]++;

　　}

　　}

　　/*遍历这个hash table，获取value最大的key和value*/

var max=-1;

　　var max_key="";

　　var key;

　　for (key in obj) {

　　if (max < obj[key]) {

　　max=obj[key];

　　max_key=key;

　　}

　　}

　　alert("max:"+max+" max_key:"+max_key);

　　4，IE与FF脚本兼容性问题

　　(1) window.event：

　　表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

　　(2) 获取事件源

　　IE用srcElement获取事件源，而FF用target获取事件源

　　(3) 添加，去除事件

　　IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

　　FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

　　(4) 获取标签的自定义属性

　　IE：div1.value或div1[“value”]

　　FF：可用div1.getAttribute(“value”)

　　(5) document.getElementByName()和document.all[name]

　　IE;document.getElementByName()和document.all[name]均不能获取div元素

　　FF：可以

　　(6) input.type的属性

　　IE：input.type只读

　　FF：input.type可读写

　　(7) innerText textContent outerHTML

　　IE：支持innerText, outerHTML

　　FF：支持textContent

　　(8) 是否可用id代替HTML元素

　　IE：可以用id来代替HTML元素

　　FF：不可以

　　这里只列出了常见的，还有不少，更多的介绍可以参看JavaScript在IE浏览器和Firefox浏览器中的差异总结

5，规避javascript多人开发函数重名问题

　　(1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀

　　(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就ok

6，javascript面向对象中继承实现

　　javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链，简单的代码如下：

　　function Animal(name) {

　　this.name=name;

　　}

　　Animal.prototype.getName=function() {alert(this.name)}

　　function Dog() {};

　　Dog.prototype=new Animal("Buddy");

　　Dog.prototype.constructor=Dog;

　　var dog=new Dog();

7，FF下面实现outerHTML

　　FF不支持outerHTML，要实现outerHTML还需要特殊处理

　　思路如下：

　　在页面中添加一个新的元素A，克隆一份需要获取outerHTML的元素，将这个元素append到新的A中，然后获取A的innerHTML就可以了。

　　SPANDIV

　　SPAN

　　P

8，编写一个方法 求一个字符串的字节长度

　　假设：

　　一个英文字符占用一个字节，一个中文字符占用两个字节

　　function GetBytes(str){

　　var len=str.length;

　　var bytes=len;

　　for(var i=0; i

　　if (str.charCodeAt(i) > 255) bytes++;

　　}

　　return bytes;

　　}

　　alert(GetBytes("你好,as"));

9，编写一个方法 去掉一个数组的重复元素

　　var arr=[1 ,1 ,2, 3, 3, 2, 1];

　　Array.prototype.unique=function(){

　　var ret=[];

　　var o={};

　　var len=this.length;

　　for (var i=0; i

　　var v=this[i];

　　if (!o[v]){

　　o[v]=1;

　　ret.push(v);

　　}

　　}

　　return ret;

　　};
  alert(arr.unique());

10，写出3个使用this的典型应用

　　(1)在html元素事件属性中使用，如

　　(2)构造函数

　　function Animal(name, color) {

　　this.name=name;

　　this.color=color;

　　}

12，如何显示/隐藏一个DOM元素?

　　el.style.display="";

　　el.style.display="none";

　　el是要操作的DOM元素

13，JavaScript中如何检测一个变量是一个String类型?请写出函数实现

　　String类型有两种生成方式：

　　(1)Var str=“hello world”;

　　(2)Var str2=new String(“hello world”);

　　function IsString(str){

　　return (typeof str=="string" || str.constructor==String);

　　}

　　var str="";

　　alert(IsString(1));

　　alert(IsString(str));

　　alert(IsString(new String(str)));

14，网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”

15，补充代码，鼠标单击Button1后将Button1移动到Button2的后面

16，JavaScript有哪几种数据类型

　　简单：Number，Boolean，String，Null，Undefined

　　复合：Object，Array，Function

17，下面css标签在JavaScript中调用应如何拼写，border-left-color，-moz-viewport

　　borderLeftColor

　　mozViewport

18，JavaScript中如何对一个对象进行深度clone

　　function cloneObject(o) {
　　if(!o || 'object' !==typeof o) {
　　return o;
　　}
　　var c='function'===typeof o.pop ? [] : {};
　　var p, v;
　　for(p in o) {
　　if(o.hasOwnProperty(p)) {
　　v=o[p];
　　if(v && 'object'===typeof v) {
　　c[p]=Ext.ux.clone(v);
　　}
　　else {
　　c[p]=v;
　　}
　　}
　　}
　　return c;
　　};

19，如何控制alert中的换行

　　\n alert(“p\np”);

20，请实现，鼠标点击页面中的任意标签，alert该标签的名称.(注意兼容性)

　　SPANDIV

　　SPAN

　　P

21，请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：

　　var url=“http://witmax.cn/index.php?key0=0&key1=1&key2=2″;

　　function parseQueryString(url){

　　var params={};

　　var arr=url.split("?");

　　if (arr.length <=1)

　　return params;

　　arr=arr[1].split("&");

　　for(var i=0, l=arr.length; i

　　var a=arr[i].split("=");

　　params[a[0]]=a[1];

　　}

　　return params;

　　}

　　var url="http://witmax.cn/index.php?key0=0&key1=1&key2=2";

　　var ps=parseQueryString(url);

　　alert(ps["key1"]);

22，ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?

　　Ajax是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用，并且用收到的数据来更新一个当前web页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术：

　　XHTML：对应W3C的XHTML规范，目前是XHTML1.0。

　　CSS：对应W3C的CSS规范，目前是CSS2.0

　　DOM：这里的DOM主要是指HTML DOM，XML DOM包括在下面的XML中

　　JavaScript：对应于ECMA的ECMAScript规范

　　XML：对应W3C的XML DOM、XSLT、XPath等等规范

　　XMLHttpRequest：对应WhatWG的Web Applications1.0规范(http://whatwg.org/specs/web-apps/current-work/)

　　AJAX交互模型

　　同步：脚本会停留并等待服务器发送回复然后再继续

　　异步：脚本允许页面继续其进程并处理可能的回复

　　跨域问题简单的理解就是因为JS同源策略的限制，a.com域名下的JS无法操作b.com或c.a.com下的对象，具体场景如下：

　　PS：(1)如果是端口或者协议造成的跨域问题前端是无能为力的

　　(2) 在跨域问题上，域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP

　　前端对于跨域的解决办法：

　　(1) document.domain+iframe

　　(2) 动态创建script标签

23，请给出异步加载js方案，不少于两种

　　默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

　　异步加载方式：

　　(1) defer，只支持IE

　　(2) async：

　　(3) 创建script，插入到DOM中，加载完毕后callBack，见代码：

　　function loadScript(url, callback){

　　var script=document.createElement("script")

　　script.type="text/javascript";

　　if (script.readyState){ //IE

　　script.onreadystatechange=function(){

　　if (script.readyState=="loaded" ||

　　script.readyState=="complete"){

　　script.onreadystatechange=null;

　　callback();

　　}

　　};

　　} else { //Others: Firefox, Safari, Chrome, and Opera

　　script.onload=function(){

　　callback();

　　};

　　}

　　script.src=url;

　　document.body.appendChild(script);

　　}

25，请设计一套方案，用于确保页面中JS加载完全。

　　var n=document.createElement("script");

　　n.type="text/javascript";

　　//以上省略部分代码

　　//ie支持script的readystatechange属性(IE support the readystatechange event for script and css nodes)

　　if(ua.ie){

　　n.onreadystatechange=function(){

　　var rs=this.readyState;

　　if('loaded'===rs || 'complete'===rs){

　　n.onreadystatechange=null;

　　f(id,url); //回调函数

　　}

　　};

　　//省略部分代码

　　//safari 3.x supports the load event for script nodes(DOM2)

　　n.addEventListener('load',function(){

　　f(id,url);

　　});

　　//firefox and opera support onload(but not dom2 in ff) handlers for

　　//script nodes. opera, but no ff, support the onload event for link

　　//nodes.

　　}else{

　　n.onload=function(){

　　f(id,url);

　　};

　　}

26，js中如何定义class,如何扩展prototype?

　　Ele.className=“***”; //***在css中定义，形式如下：.*** {…}

　　A.prototype.B=C;

　　A是某个构造函数的名字

　　B是这个构造函数的属性

　　C是想要定义的属性的值

27，如何添加html元素的事件,有几种方法.

　　(1) 为HTML元素的事件属性赋值

　　(2) 在JS中使用ele.on***=function() {…}

　　(3) 使用DOM2的添加事件的方法 addEventListener或attachEvent

28，documen.write和 innerHTML的区别

　　document.write只能重绘整个页面

　　innerHTML可以重绘页面的一部分

29，多浏览器检测通过什么?

　　(1) navigator.userAgent

　　(2) 不同浏览器的特性，如addEventListener

30，js的基础对象有那些, window和document的常用的方法和属性列出来

　　String,Number,Boolean

　　Window:

　　方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open

　　属性：name,parent,screenLeft,screenTop,self,top,status

　　Document

　　方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln

　　属性：cookie,doctype,domain,documentElement,readyState,URL,

31，前端开发的优化问题

　　(1) 减少http请求次数：css spirit,data uri

　　(2) JS，CSS源码压缩

　　(3) 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

　　(4) 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

　　(5) 用setTimeout来避免页面失去响应

　　(6) 用hash-table来优化查找

　　(7) 当需要设置的样式很多时设置className而不是直接操作style

　　(8) 少用全局变量

　　(9) 缓存DOM节点查找的结果

　　(10) 避免使用CSS Expression

　　(11) 图片预载

　　(12) 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

32，如何控制网页在网络传输过程中的数据量

　　启用GZIP压缩

　　保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性

　　33，Flash、Ajax各自的优缺点，在使用中如何取舍?

　　Ajax的优势

　　(1) 可搜索型

　　(2) 开放性

　　(3) 费用

　　(4) 易用性

　　(5) 易于开发

　　Flash的优势

　　(1) 多媒体处理

　　(2) 兼容性

　　(3) 矢量图形 比SVG，Canvas优势大很多

　　(4) 客户端资源调度，比如麦克风，摄像头

Sdd;d’dsdsdsd

Qt 4.2 开始，可以使用样式表编辑器在 Qt Designer 中编辑样式表。

可以通过右键单击小部件并选择更改样式表...来访问样式表编辑器

样式表的基本语法遵循CSS的规则，例如：

QPushButton {
    background-color: yellow; /* 设置按钮背景颜色 */
    border: 2px solid black; /* 设置按钮边框 */
    font-size: 14px; /* 设置按钮字体大小 */
}

你可以为单个控件、一组控件或者整个窗口编写样式表。Qt Designer允许你为控件设置各种属性，包括颜色、字体、边框、间距等。

通过使用样式表，你可以轻松地改变Qt控件的外观，而无需修改底层代码。这使得界面设计更加灵活，可以快速响应设计变更，并且可以为不同的用户或场景提供定制化的界面。