❶ 前端页面的插件有哪些
工具类
方便操作对象，数组等的工具库
underscore.js
lo-dash与underscore.js的api基本一致。与underscore比其优势是，效率高；可自定义构建
Sugar在原生对象上增加一些工具方法
functional.js提够了一些Curry的支持
Watch.js监视对象或属性的变化
bacon.js函数式编程，cool
streamjs用流的方式来对数组，对象进行系列操作
异步流程控制
eventproxy朴灵出品
Arbiter.js详细
发布订阅
qPromise风格的
Async.js
mock
Mock.js生成随机数据和mock Ajax 请求
jquery-mockjaxmockajax请求
时间库
moment
datejs
浏览器探测
Bowser探测具体浏览器和版本
ua-parser-js探测具体浏览器和版本，操作系统，设备类型等
调试
console-polyfill能放心的使用 console.log()之类的console方法
log让控制台输出的log有样式
Konsole.js在页面的一个元素里输出log信息详细
uri.jsuri操作
cookie增删改cookie的工具库
director前端路由库详细
BigDecimal.js提高精度的数字操作
JSDoc根据javascript文件中注释的信息，生成API文档详细
hotkeys键盘事件的封装
MD5用 MD5 的方式加密文件的库
浏览器增强类
让一些旧浏览器变牛逼的库
Selectivizr让IE 6-8一些的css3选择器
ieBetter让ie6-8有高级浏览器的特性
ExplorerCanvas让IE8-的浏览器支持canvas
CSS3 Pie让IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js时，box-radious的元素有背景色时，不显示背景色。。。
formFive让旧的浏览器支持HTML5表单的一些特性，如 placeholder,autofocus
https://github.com/anselmh/object-fit让浏览器支持object-fit这css规则
HTML5 Cross Browser Polyfills一堆Polyfills
flexibility让旧的 IE 也支持 Flexbox
选择器增强
Lining.js让浏览器实现类似::nth-line(), ::nth-last-line()的效果
未归类
prefixfree用了它，写css时，就不需要加浏览器的前缀了
表单类
jquery-file-upload上传文件组件详细
zTree文件树形视图控件
Treed树编辑器。感觉展示的感觉很像思维导图
FileAPI对文件选择框内的文件的一些处理
表单验证
.Validate详细
jQuery-Validation-Engine
表单元素美化
uniform提供对下拉框，单，复选框，按钮等表单元素的美化
select2多选下拉框
selectivity和unfirom比较类似
DropKick下拉框，单，多选。外观比uniform好
switcheryios7风格的开关组件
nouislider用滚动条来设置/控制（音量等）
range.css美化input[type=range]元素的外观
图片类
holderjs生成占位图片
lazyload
imagesLoaded选取的图片都加载好后执行调回
CSSgram用CSS3的Filter实现Instagram滤镜的库
图标类
Icon Font汇总
SVG做的图标
svgicons
iconic
HYBICON带交互效果。如 hover, click
HTML字符实体图标
http://www.amp-what.com/
transformicons图标点击时，会有一些变换效果。如，加号变成叉号
css3patternscss3 做的可平铺纹理。浏览器兼容性不好。
浏览图片
fancybox弹出查看图片，视屏等等demo
yoxview弹出查看图片，图片尺寸缩放很自然
图片墙
wookmark
UI 框架
WeUI由微信官方设计团队为微信 Web 开发量身设计。
Framework7
UI 组件类
拖拽
dragula支持Draggable，Dropable和Sortable。感觉比jqueryUI的轻量级，好用的样子
angular-draguladragular 官方的 angular 版本
数据可视化(图表)
Echarts网络出品
highcharts功能强大。是收费的。
Plottable.JS基于D3的一个图表库
flot文档不给力
chartJs中文文档demo很漂亮，很清晰。比较轻量级。
ichartJs中国的一个家伙搞的，感觉还不错。
时间选取组件
foundation-datepicker
DatePicker一个简单的日历详细
full calendar支持脱放的方式来改变待办事宜的时间
Simple Events Calendar外观很喜欢。收费 5$
jQuery ui datepicker经典，不是很好看
pickadate轻量级，手机友好的，漂亮。但貌似只能在弹出层中显示，而没有下拉这种方式显示。
zebra-datepicker可配置性很强。但貌似只能在弹出在右上方。。。
bootstrap-datepickerbootstrap风格。
dateRangePicker选取时间段。bootstrap风格。该组件依赖Twitter Bootstrap, Moment.js和jQuery.
自定义滚动条
perfect scrollbar轻量级的滚动条。外观与mac上chrome的滚动条一样。
iscroll在移动设备上用不错
加载(Loding)效果
CSS SpinnersCSS做的
Loaders.cssCSS做的
表格组件
jsGridData Grid。详细
backgrid基于Backbone.js的DataGrid
excellentexport把表格的内容生成excel。兼容 Firefox, Chrome, IE6+
datatables表格可交互（对内容进行排序，删除等）
handsontable生成Excel外观的数据
JSpreadsheets表格数据的组件库
选取颜色
Spectrum
分享到SNS
JiaThis生成分享代码。
编辑器
ace代码编辑器，可以用来做demo演示
ckeditor
ueditor网络做的
tinymce对html内容进行实时的编辑
summernote在移动设备上用不错
通知组件
notie.js
HTML5播放器
jwplayer被大量网站使用
html5media简单的h5player，轻量级
jplayer功能强太，可换肤
展示
Impress.js各种旋转，和奇特的体验
fullPage全屏显示。用滚轮来翻页详细
zepto.fullpage专注于移动端的fullPage.js，依赖Zepto
pagePiling和fullPage类似
turn.js做一本书，带漂亮的翻页的效果
幻灯
slidesjs挺好用的，只是那幻灯导航的CSS都要自己写，呵呵详细
iSlider无任何插件依赖的手机平台javascript滑动组件详细
bgstretcher全屏幻灯，会随着页面大小的变化而变化。
Swiper开源、免费、强大的移动端触摸滑动插件Swiper中文网
coin-slider兼容IE6。蛮好的~。不过其切换方式是一块块的。不能配置切换方式。。。
wowslider幻灯切换时各种很炫的效果。收费。
cycle2普通的幻灯，竟然不支持垂直滚动。。。
jcarousel普通的幻灯，不兼容IE6
reveal3d滚动。做ppt相当不错
nodePPT国人做的，做ppt也相当不错。有些方面比 reveal做的还好。但生成导出的html有些问题
roundabout3d切换，看的后面图片的边
弹出框
Magnific-Popup兼容PC，Mobile。还不错，有5k+的star
layer国人开发的，兼容ie6+。不喜欢其调用方式。
动画效果
mixitup用漂亮的动画效果来完成排序和筛选
jQuery.Marquee跑马灯效果
quickflip卡片翻转效果
卡片翻转效果2兼容性可以。写的比较简单：1，只支持x方向翻转 2,类名都是规定好的 3，只能被调用一次。 需要改写一下。我的改进版见这里
TheaterJS模拟两个人在屏幕上对话
midnight.js文字颜色随着背景变，屌炸了
color-animationjquery的颜色渐变动画插件。jquery的动画不支持颜色值的变化。改库提供了这个支持。
transit对元素进行css的变换
tagcanvas3D标签云效果详细
iconate图片切换动画
Snap.js左/右侧导航的出现效果
CSS shake抖动动画
ClickSpark.js点击后的一些酷炫的效果
视觉差插件
scrollorama比较简单
superscrollorama能做的效果更多，但要用第三方Tween的库，使用起来比较复杂。
scrolldeck
flash
swfobj能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外，它能够避免您的HTML、XHTML中出现object、embed等非标准标签，从而符合更加标准。详细
抽奖
wScratchPad刮刮卡刮奖效果
jqueryrotate旋转插件。可以用来做转盘抽奖效果
Intro.js用来介绍网站的功能很不错。也可以做新手引导。
blockUILolding组件。
simple-hint提示信息。用css做的。兼容性IE 9+。
dotdotdot文字溢出时，添加在文字末尾加省略号
jQuery-menu-aim二级菜单的切换如Amazon主页上一样迅速
AnythingZoomer放大镜功能
美化/高亮语法代码
google-code-prettify
DlHighlight仅支持JavaScript、CSS、XML、HTML 这4语法高亮
please按要求随机舒服的颜色
Awesomplete输入的智能提示，自动补全
proTip提示。感觉比 Bootstrap 的 tip 好
Hammerjs手势库。封装了 Swipe, Tap, Pinch, Pan等手势
用户体验增强类
动画
velocity提高Jquery动画的性能。以及颜色动画之类的新特性。
Snap.svg操作 SVG 的 JS 库。号称 SVG 的 jQuery。demo
walkway以动画的方式，渐渐地画出 SVG 的路径。
SVG
测试
Mocha
Chai
Should
Snoion
DeviceMock.jsmock 设备。
其他类
ZeroClipboard将内容复制到剪切板兼容主流浏览器的解决方案详细
html2canvashtml转化成canvas，可以用来做截图。详细
Ink响应式html邮件框架
性能测试
抓取，解析RSS内容（不能跨域，所以后台要做代理，所谓的解析Rss其实就是解析xml）
jFeed
jRss简单版的jFeed
scriptcam与摄像头交互
cylon.js机器人框架，支持35个平台
Masonry一个瀑布流框架
devices.css移动设备边框的外观。做原型的时候用不错。
Bootbox.js对bootstrap的弹出框做的一些封装
免费皮肤
AdminLTE
Bootstrap相关类
JS Plugins仓库
jQuery Cards高质量的 jQuery 插件网站
jster
node moles
npmrankSort npm packages by page rank
YOU MIGHT NOT NEED JQUERY PLUGINS不依赖 jQuery 的 js 插件。
awesome-nodejs
Libraries.io各种语言的库
OniUI去哪儿网做的一套基于Avalon的框架
常用的移动端框架
zepto.js
语法与jquery几乎一样，会jquery基本会zepto~
最新版本已经更新到1.16
iscroll.js
解决页面不支持弹性滚动，不支持fixed引起的问题~
实现下拉刷新，滑屏，缩放等功能~
最新版本已经更新到5.0
underscore.js
笔者没用过，不过听说好用，推荐给大家~
该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。
最新版本已经更新到1.8.2
滑屏框架
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js
fullpage.js
swiper.js
flex布局
flex布局目前可使用在移动中，并非所有的语法都全兼容，效果良好~
❷ java 如何读取指定文件夹内的所有文件夹及文件，然后在页面上以树的形式显示出来。
我给你一个读取指定文件夹下面的所有文件夹，和文件的代码。
至于页面上用树来显示，html的话，这个有点麻烦。
swing的话，你就只需要用DefaultTreeModel.add(new TreeNode("XXX"));
public class GetAllFiles{
private String filePath = "C:/windows"; // 读取C:/windos文件
private File f = null;
public GetAllFiles(){
f = new File(filePath);
}
public List<File> getAllFile(){
File[] fileInF = f.listFiles(); // 得到f文件夹下面的所有文件。
List<File> list = new List<File>();
for(File file : fileInF){
list.add(file);
}
return list;
}
public static void main(String[] args){
new GetAllFiles().getAllFile();
}
}
❸ DropDownList控件如何在前端显示出后端赋的值
DropDownList控件可以做如下修改
<asp:DropDownList ID="lstSex" runat="server" Width="150px">
<asp:ListItem Value="B">男</asp:ListItem>
<asp:ListItem Value="A">女</asp:ListItem>
</asp:DropDownList>
注：VALUE值改成男：A 女：B
在后面可以这样写
string sex;
//(给这个SEX赋值)
lstSex.SelectedValue=sex
PS:这种方法对于这种数据比较少的情况适用，如果数据项多的不建议
❹ antv G6 分层树怎么将图片插入作为树节点
你看下这个代码能不能套用 不是完全复制哈
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.ComponentModel;
usingKingdee.BOS;
usingKingdee.BOS.Util;
usingKingdee.BOS.Core;
usingKingdee.BOS.Core.DynamicForm;
usingKingdee.BOS.Core.DynamicForm.PlugIn;
usingKingdee.BOS.Core.DynamicForm.PlugIn.Args;
usingKingdee.BOS.Core.DynamicForm.PlugIn.ControlModel;
usingKingdee.BOS.Core.Metadata;
namespaceJDSample.FormPlugIn.DynamicForm
{
///<summary>
///分批分层加载树节点
///</summary>
///<remarks>
///案例背景：
///界面上使用树控件，需显示大量的节点；
///如果一次性加载到客户端，显示渲染会非常慢；
///因此，需要分层、分批下载
///
///案例说明：
///新增一个动态表单，挂上本插件，并在界面有一个树控件F_JD_TreeView；
///界面初始化时，仅加载第一层节点；
///用户点击节点时，才加载其包含的子节点，而且每次最多加载10个；
///单层超过10个节点，通过"点击加载更多..."节点，分批下载
///</remarks>
[Description("分批分层加载树节点")]
publicclassS160107TreeEdit:AbstractDynamicFormPlugIn
{
///<summary>
///本地变量，存储需加载到前端的所有节点信息，以及其是否已经加载标志
///</summary>
privateDictionary<string,NodeInfo>_dctNodes=newDictionary<string,NodeInfo>();
///<summary>
///本地变量，存储已经被加载过的父节点Id，避免重复搜索其子节点，浪费时间
///</summary>
privateHashSet<string>_loadedNodeIds=newHashSet<string>();
///<summary>
///界面初始化结束，触发此事件，通知插件开始加载树节点：在此事件，加载第一层节点
///</summary>
///<paramname="e"></param>
publicoverrideList<TreeNode>GetTreeViewData(TreeNodeArgse)
{
if(e.Key.EqualsIgnoreCase("F_JD_TreeView")==false)
{
//需加载是其他树控件的节点，略过
returnnewList<TreeNode>();
}
//加载全部节点信息到内存
this.LoadNodes();
//记录已经加载过根节点
this._loadedNodeIds.Add("0");
//展开树控件节点
TreeViewtv=this.View.GetControl<TreeView>("F_JD_TreeView");
tv.SetExpanded(true);
//构造根目录下的第一层节点并返回
List<TreeNode>nodes=this.BuildTreeNodes("0");
returnnodes;
}
///<summary>
///用户点击节点时触发此事件：加载更多子节点
///</summary>
///<paramname="e"></param>
(TreeNodeArgse)
{
if(e.Key.EqualsIgnoreCase("F_JD_TreeView")==false)
{
//点击的是其他树控件，略过
return;
}
//判断是否已经加载过此节点的子节点，如果加载过，则不再加载
if(this._loadedNodeIds.Contains(e.NodeId))
{
return;
}
this._loadedNodeIds.Add(e.NodeId);
TreeViewtv=this.View.GetControl<TreeView>("F_JD_TreeView");
stringparentId=e.NodeId;
if(parentId.StartsWith("more"))
{//当前点击的节点，是"点击加载更多..."
string[]keys=parentId.Split('|');
parentId=keys[1];//第2部分为父节点部分
//"点击加载更多..."节点已经被点击过，不再需要了，移除之
tv.RemoveNode(e.NodeId);
}
//开始加载更多的子节点
List<TreeNode>childNodes=this.BuildTreeNodes(parentId);
if(childNodes.Count>0)
{
tv.AddNodes(parentId,childNodes);
}
}
///<summary>
///构建树控件所需要的节点对象
///</summary>
///<paramname="parentId">父节点Id，为0表示第一层节点</param>
///<returns></returns>
privateList<TreeNode>BuildTreeNodes(stringparentId)
{
List<TreeNode>nodes=newList<TreeNode>();
//遍历全部节点，找指定节点中，未加载的子节点的子节点
intcount=0;
intindex=0;
foreach(varitemin_dctNodes)
{
NodeInfonodeInfo=item.Value;
if(nodeInfo.Loaded==false
&&nodeInfo.ParentId==parentId)
{
nodeInfo.Loaded=true;
count++;
TreeNodenode=newTreeNode()
{
id=nodeInfo.Id,
text=nodeInfo.Caption,
parentid=nodeInfo.ParentId,
};
nodes.Add(node);
}
if(count>=10)
{//本次加载超过了10个
//生成一个特殊的节点（加载更多...），并停止本批加载更多子节点
TreeNodenode=newTreeNode()
{
//需要基于如下需求，生成一个特殊的节点Id
//1.需要与其他普通节点进行区分：以more为前缀
//2.需要能够提取出父节点Id：包含父节点Id
//3.每次产生的特殊节点Id不能重复：需包含当前节点索引
id=string.Format("more|{0}|{1}",parentId,index),
text="点击加载更多...",
parentid=parentId,
};
nodes.Add(node);
break;
}
index++;
}
returnnodes;
}
///<summary>
///到数据库加载全部节点信息：本示例直接手工构建一批有层次的节点信息
///</summary>
privatevoidLoadNodes()
{
//节点名称，包含其子节点的数量，以提示用户，可以展开查看子节点
//第一层节点
_dctNodes.Add("1",newNodeInfo(){Id="1",ParentId="0",Caption="江西(100)"});
_dctNodes.Add("2",newNodeInfo(){Id="2",ParentId="0",Caption="广东(3)"});
//循环添加100个第一层节点
for(inti=3;i<=100;i++)
{
_dctNodes.Add(i.ToString(),newNodeInfo()
{Id=i.ToString(),ParentId="0",Caption=string.Format("省份{0}(0)",i)});
}
//第二层节点：
_dctNodes.Add("1.1",newNodeInfo(){Id="1.1",ParentId="1",Caption="南昌(0)"});
_dctNodes.Add("1.2",newNodeInfo(){Id="1.2",ParentId="1",Caption="九江(0)"});
_dctNodes.Add("1.3",newNodeInfo(){Id="1.3",ParentId="1",Caption="赣州(0)"});
//循环添加100个第二层节点
for(inti=4;i<=100;i++)
{
_dctNodes.Add(string.Format("1.{0}",i),
newNodeInfo()
{
Id=string.Format("1.{0}",i),
ParentId="1",
Caption=string.Format("城市{0}(0)",i)
});
}
_dctNodes.Add("0201",newNodeInfo(){Id="0201",ParentId="02",Caption="广州(0)"});
_dctNodes.Add("0202",newNodeInfo(){Id="0202",ParentId="02",Caption="深圳(2)"});
_dctNodes.Add("0203",newNodeInfo(){Id="0203",ParentId="02",Caption="惠州(0)"});
//第三层节点：
_dctNodes.Add("020201",newNodeInfo(){Id="020201",ParentId="0202",Caption="南山区"});
_dctNodes.Add("020202",newNodeInfo(){Id="020202",ParentId="0202",Caption="宝安区"});
}
}
///<summary>
///节点信息对象
///</summary>
classNodeInfo
{
///<summary>
///本节点Id
///</summary>
publicstringId{get;set;}
///<summary>
///父节点Id
///</summary>
publicstringParentId{get;set;}
///<summary>
///本节点标题
///</summary>
publicstringCaption{get;set;}
///<summary>
///是否已经加载标志：默认为false，未加载到前端
///</summary>
publicboolLoaded{get;set;}
}
}
❺ web前端 和java
举个例子，对于广告系统的来说， 我们先不管一些job，CACHE，config ... 这些优化，些框架和分层可以是这样的，
MVC的技术选型：
V: FreeMarker vs JSP / Velocity
C: SpringMVC vs Struts / Webwork
M: SPRING/JPA/Hibernate vs iBatis
2 前端V的架构
前端开发刚兴起的阶段，前端开发人员的工作经常穿插在后端开发过程中担任辅助作用的，随着业务越来越复杂，前端必须有自己的开发框架和流程，使得后端专注于服务类的开发，前端专注于与用户交互类的开发。
WEB前端从概念上划分为三个层次：结构、表现、和行为。三层相对独立，互不影响。在物理上层面上分别对应HTML、CSS、JS三种不同的的文件格式。
HTML：负责定义网页的结构，内容
CSS：负责内容的展现方式
JS：负责网页关于动态的行为反应
好的层次划分对前端的开发也很关键。显示内容问题的唯一来源应该是html文件定义的，内容展示问题的唯一来源应该是CSS文件定义的，行为问题的唯一来源应该是javascript文件定义的，各司其职相互独立。但是他们是相关的，因为行为和样式无法与结构分离，必须写在同一个文件里。这种情况下，首先还是你要把行为和样式从html标签中分开，然后在html文件中引入。
前端开发的核心是HTML + CSS + JavaScript。本质上它们构成一个MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。
1）结构层
在java领域，表现层技术主要有三种：jsp、freemarker、velocity。
(1) jsp(Java Server Pages)
它是在传统的网页HTML文件(.htm，.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，它实现Html语法中的java扩展（以 <%, %>形式）。从而形成JSP文件，后缀名为(.jsp)。因为java具有跨平台特点， 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。JSP与Servlet一样，是在服务器端执行的，最终都要变.class文件，通常返回给客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。
优点：
可以写java代码
支持jsp标签（jsp tag）
支持表达式语言（el）
官方标准，用户群广，丰富的第三方jsp标签库
性能良好，jsp编译成class文件执行，有很好的性能表现
缺点：
编写java代码，如使用不当容易破坏mvc结构。
(2) Freemarker
它生成静态页面，首先需要使用自己定义的模板页面，这个模板页面可以是最最普通的html，也可以是嵌套freemarker中的 取值表达式， 标签或者自定义标签等等，然后后台读取这个模板页面，解析其中的标签完成相对应的操作， 然后采用键值对的方式传递参数替换模板中的的取值表达式，做完之后 根据配置的路径生成一个新的html页面， 以达到静态化访问的目的。
模板+数据模型=输出，模板只负责数据在页面中的表现，不涉及任何的逻辑代码，而所有的逻辑都是由数据模型来处理的。用户最终看到的输出是模板和数据模型合并后创建的。
FreeMarker与Web容器无关，即在Web运行时，它并不知道Servlet或者其他。
优点：
可以彻底的分离表现层和业务逻辑，使用JSP 开发过程中在页面中大量的存在业务逻辑的代码，使得页面内容凌乱，在后期大量的修改维护过程中就变得非常困难。FreeMarker根本不支持Java代码。
可以提高开发效率，JSP在第一次执行的时候需要转换成Servlet类，开发阶段进行功能调适时，需要频繁的修改JSP，每次修改都要编译和转换 。FreeMarker模板技术不存在编译和转换的问题，开发过程中，后端不必在等待界面设计开发人员完成页面原形后，再来开发程序。
对jsp标签支持良好
内置大量常用功能，比如html过滤，日期金额格式化等等
使用表达式语言 (EL)
缺点：
不是官方标准
用户群体和第三方标签库没比jsp丰富
使用FreeMarker后，作为界面开发人员，只专心创建HTML文件、图像以及Web页面的其他可视化方面，不用理会数据；而程序开发人员则专注于系统实现，负责为页面准备要显示的数据。
还有一些像velocity这样较早出现的用于代替jsp的模板语言 ... ...
2) 表现层CSS
结构搭建之后，就是为他们添加样式表属性。它实现的是页面内容和现实样式分离，所有的CSS都是非必需的，就算无法应用CSS或CSS冲突，网页也能够正常访问。
为了管理的方便，可以将不同样式进行拆分，比如可以拆分为全局样式，结构布局样式，色彩样式，文字样式和重置样式。css在开发时代码采用了规范的形式，比如有注释，缩进等，这样，这些文件的大小比较大，为了减少网络流量，提高网页的下载速度，一般发布时需要对javascript和css进行压缩处理，我们将样式文件进行合并压缩，目的是减少与服务器交互的时间和次数。如http://www.jb51.net/tools/cssyasuo.shtml可以在线进行压缩。
样式混合使用选择：
有关整个网站统一的样式代码，放置在独立的样式文件中.css
某些样式不同的页面，除了链接外部样式文件，还需要自定义的样式
某张网页中，部分内容如果需要一种不同，采用内行样式
) 行为层 javaScript
常见的也是最有名的javascript 框架，其实准确来说应该是库：
（http://www.ibm.com/developerworks/cn/web/1404_wangfx_jsframeworks/）
jQuery
jQuery 是目前用的最多的前端 JAVASCRIPT 类库，它是比较轻量级的类库，对 DOM 的操作也比较方便到位，支持的效果和控件也很多。同时，基于 jQuery 有很多扩展项目，包括 jQuery UI(jQuery 支持的一些控件和效果框架)、jQuery Mobile(移动端的 jQuery 框架)、QUnit(JavaScript 的测试框架)。这些补充使得 jQuery 框架更加完整，而且这些扩展与目前的框架基本都是兼容的，可以交叉使用，使得前端开发更加丰富。
Ext
相比 jQuery，Ext JS 更重量级，有几个兆的文件，使得 Ext 在开发中成为的弊端和累赘。但是，另一方面，在 Ext JS 庞大的文件背后是 Ext JS 强大的功能。Ext JS 的控件和功能可以说强大和华丽到的程度。图表、菜单、特效，Ext JS 的控件库非常丰富，同时它的交互也非常强大，独立靠 Ext JS 几乎就可以取代控制层完成于客户的交互。强大的功能，丰富的控件库，华丽的效果也使得 Ext JS 成为内网开发利器。
YUI
YUI 也有自己的 JavaScript 类库，DOM 操作和效果处理也还比较方便，功能和控件也很齐全，但是相比 jQuery 和 Ext JS 显得比较中庸一些。随着 Yahoo的没落，YUI 也渐渐的被淡化。
目前前端框架主要采用 JavaScript+CSS 模式。基于上面的几种javascript库，我们可以基于JQuery框架搭建起一个java web前端系统的框架。如丛林的前端就是COS-UI+jQuery搭建起来的，再利用插件ztree实现品类树在前端的展示。
jquery对javascript的封装
JQuery能大大简化Javascript程序的编写，主要表现：
定位元素
JS写法:
document.getElementById("abc")
jQuery写法:
$("#abc") 通过id定位
$(".abc") 通过class定位
$("div") 通过标签定位
改变元素的内容
JS写法：
abc.innerHTML = "TEST";
jQuery写法：
abc.html("TEST");
显示隐藏元素
JS 写法：
abc.style.DISPLAY = "none";
abc.style.DISPLAY = "BLOCK";
jQuery 写法：
abc.HIDE();
abc.SHOW();
abc.TOGGLE();
修改元素样式
JS写法：
abc.STYLE.fontSize=size;
jQuery写法：
abc.css('font-size', 20);
Ajax
JS
自己创建对象，自己处理浏览器兼容等乱七八糟的问题，略去不表
jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.POST("abc.php", postvalue, recall);
FUNCTION recall(RESULT) {
ALERT(result);
//如果返回的是json，则如下处理
//result = eval('(' + result + ')');
//ALERT(result);
}
获得焦点
为表单赋值
获得表单的值
设置元素不可用
3) 浏览器的渲染
4）web前端开发流程
❻ 从数据库里拿到数据，组成json格式并返回给前端生成动态树。
对于服务端来说,json只是一个字符串,不过,是一个符合js对象格式的字符串
你可以专门写一个类或方法来生成json,只要按固定格式拼接字符串就可以了
(拼接的时候注意里面尽量不要有换行符,否则eval()的时候可能会报语法错误)
或者也可以在网上搜生成json的类,如果有的话直接拿来用就是了
❼ 如何使用 JSP JSTL 显示/制作树 菜单
谢谢你的回答，本人对前端jquery,css,js都不懂，如果有源码直接拿来用就最好，是动态带checkbox的树菜单，树节点等数据是从数据库里取出来的
❽ 在vfp中怎样使其它控件显示在形状控件前端也就是怎样使形状控件置于其它控件下层
容器，顾名思义，就是可以放入其它东西。在容器控件中可以放入其它的控件（如文本框、按钮等），当隐藏容器控件时，它里面的控件也会同时隐藏。而形状控件只是简单的图形形状。
❾ ExtJS弹出框层次问题
界面，是一个与后台技术无关的前端ajax框架。
功能丰富，无人能出其右
无论是界面之美，还是功能之强，ext的表格控件都高居榜首。
单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。
自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。
再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。
呵呵~不过ext也不是万能的，与fins的ecside比较，ext不能锁定列（薯仔说1.x里支持锁定列，但是2.0里没有了，因为影响效率。），也没有默认的统计功能，也不支持excel，pdf等导出数据。另外fins说，通过测试ecside的效率明显优于ext呢。:)
[编辑本段]Ext发展史
1、第一只“出海”的YUI-Ext只是作者Jack打算对基于BSD协议的Yahoo!UI库进行自定义的扩展，但后来一度风头盖过其父辈YUI，足以说明 大家对它的热情，很多人把它投入项目人并不十分了解它。分析人士打了一比喻：就好比尚未谋面， 并不了解一个人的家庭、教育、品行等背景，只因为他有一副精致漂亮的外观，就对其陷入了疯狂的倾慕之中。因此分析人士建议，在投入项目前，要认真仔细地了 解EXT的内在原理和与其他Ajax库不同地方。
2、在2006年初 ，Jack Slocum(杰克斯·洛克姆 ) 就一套公用设施扩建为Yahoo! User Interface (YUI) 库而工作。这些扩展很快组织成一个独立的库代码并以” yui-ext” 的名义下发布。
3、在2006年秋天,Jack发行了版本为0.33的yui-ext,而最终被证明为最后版本的代码，根据这名字（下开放源代码DSB许可）。在年底之前，这个库已大受欢迎, 名字被简化为Ext，反映了它作为一个框架的成熟和独立。
该公司成立于2007年初，Ext现在为双执照，使用LGPL和一个商业执照。
4、在2007年4月1日，发布1.0正式版。
5、直至今日(2010年1月8日)ExtJS已发展涵盖美国、日本、中国、法国、德国等全球范围的用户，现在的版本为Ext-3.1.0
6、官方在2009年4月14-16日的首次Ext Conference中发布了Ext的3.0 RC版本。
7、2009年5月4日，Ext的3.0 版本发布。
[编辑本段]什么是EXT
1、ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
2、Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。
[编辑本段]ExtJs UI Engine简介
ExtJs初期仅是对Yahoo! UI的对话框扩展，后来逐渐有了自己的特色，深受网友的喜爱。 发展至今， Ext除YUI外还支持Jquery、Prototype等的多种JS底层库，让大家自由地选择。该框架完全基于纯Html/CSS+JS技术，提供丰富的跨浏览器UI组件，灵活采用JSON/XML数据源开发，使得服务端表示层的负荷真正减轻，从而达到客户端的MVC应用！
ExtJs支持多平台下的主流浏览器 Internet Explorer 6+ FireFox 1.5+ (PC, Mac) Safari2+、Opera9+。在使用的厂家包括IBM、Adobe、Cisco和更多。ExtJs官方网站
[编辑本段]Ajax主流框架与ExtJS
JQuery、 Prototype和YUI都属于非常核心的JS库。虽然YUI，还有最近的JQuery，都给自己构建了一系列的UI器件（Widget），不过却没有一个真正的整合好的和完整的程序开发平台。哪怕是这些低层的核心库已经非常不错了，但当投入到真正的开发环境中，依然需要开发者做大量的工作去完善很多缺失之处。而Ext就是要填补这些缺口。主流开源框架中只有Dojo像Ext一样，尝试着提供整合的开发平台。相比Dojo这个出色的工具包，我们认为 Ext能提供一个粘合度更高的应用程序框架。Ext的各个组件在设计之时就要求和其它Ext组件组合一起工作是无缝合作的。这种流畅的互通性，离不开一个紧密合作的团队，还必须时刻强调设计和开发这两方面目标上的统一，而这点是很多开源项目未能做到的。从构建每一个组件开始，我们始终都强调组件的外观、性能、互通性和可扩展性，而我们认为组件已经达到了这几点的要求。
Ext绝对可以单独使用。实际上，除了有特定的要求，推荐单独使用Ext，这样的话文件占位更小，支持和整合也更紧密。我们也支持与jQuery、 YUI或Prototype整合使用，作为低层库的角色出现，以提供处理各种核心的服务，如DOM和事件处理，Ajax连接和动画特效。使用整合方式的一个原因是它们已具备了一些特定的器件而Ext并没有原生支持——像YUI的History控件便是一个典型的例子。这时，Ext需要依赖YUI这个库的底层来实现History控件，这样一来的话也可免去Ext自身底层库，从而减少了整个程序的内存占用。另一个使用整合方式的原因是，对于许多已在使用其他底层库的程序，你可能希望逐步加入Ext。总之，如果已经有了其他库，Ext可已利用它们。我们的宗旨是为用户提供各种可能性和性能上的优化。而事实是，只要实现了相对应的底层库接口，为任意一个框架添加上适配器是没有问题的——人们可以轻松地将Dojo、Moo、Ajax.NET，或其它JS库转变为 Ext的底层。
Ext从2.x开始收费，这给他的应用前景带来一些问题。不过对国内开发人员的影响不大，毕竟是客户付款。
[编辑本段]Ext学习及应用经验小结
一、理解Html DOM、Ext Element及Component
要学习及应用好Ext框架，需要理解Html DOM、Ext Element及Component三者的区别。
Ext是基于Web的富客户端框架，其完全是基于标准W3C技术构建设的，使用到的都是HTML、CSS、DIV等相关技术。Ext最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发。
无论组件有多少配置属性、还是事件、方法等等，其最终都会转化为HTML在浏览器上显示出来，而每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。
仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。
对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext 还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而 Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。
在使用Ext开发的应用程序中，组件Component是最高层次的抽象，是直接给用户使用的，Ext Element是Ext的底层API，主要是由Ext或自定义组件调用的，而DOM是W3C标准定义的原始API，Ext的Element通过操作DOM 来实现页面的效果显示。
在Ext中，组件渲染以后可以通过访问组件的el属性来得到组件对应的Element，通过访问Element的dom属性可以得到其下面的DOM对象。另外，我们可以通过通过Ext类的快捷方法getCmp、get、getDom等方法来得组件Component、Ext元素Element及DOM节点。比如：
var view=new Ext.Viewport();//创建了一个组件Component
view.el.setOpacity(.5);//调用Element的setOpacity方法
view.el.dom.innerHTML="Hello Ext";//通过Element的dom属性操作DOM对象
再看下面的代码：
var win=new Ext.Window();
win.show();
var c=Ext.getCmp("win1");//得到组件win
var e=Ext.get("win1");//根据id得到组件win相应的Element
var dom=Ext.getDom("win1");//得到id为win1的DOM节点
二、熟悉ext组件体系
Ext2.0对整个框架进行了重构，最为杰出的是推出了一个以Component类为基础的组件体系，在Component类基础上，使用面向对象的方法，设计了一系列的组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本的。
在《ExtJS实用开发指南》中，有如下面一幅组件图：
通过组件结构图我们可以一目了然的看出整个Ext组件继承及组成体系，当使用一个组件的时间，了解他的继承体系，这样可以便于我们掌握组件的各种特性。
三、掌握核心控件
控件其实也是组件，比如用于显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel，还有代表应用程序窗口的Ext.Window等都属于Ext控件。在使用Ext的时候，一定要掌握一些核心控件，特别是处于基类的控件。比如上面提到的几个控件，他们都是继承于面板Panel，所以我们要重点掌握面板这个核心控件的特性。比如面板由以下几个部分组成：一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。只要掌握了Panel的应用，那么学习TreePanel、Window等就会变得简单得多。
同样的道理，对于Ext的表单字段来说，不管是ComboBox，NumberField、还是DateField，他们其它都是 Ext.form.Field类的子类，在他上面定义了表单字段的各种基本操作及特性。在学习使用表单字段组件时，一定要重点研究Field这个类，掌握他的主要方法、事件等，就能有助于更好的学习使用其它的字段。
四、学习及研究示例
由于javascript语言非常灵活，不像静态强类型语言（比如Java）那样有固定的代码设计模式，而往往是不同的人就有不同的编程风格。在实际应用开发中，只有见多识广，才能在自己的在脑中建立一个开发库。
学习别人的示例对于我们开发帮助会非常大，示例包括基本组件的应用、综合应用等多个方面。在此，简单推荐几个。
1、Ext官方示例，在ext项目下载包的examples目录中，包括各个控件的基本应用演示，同时还有一些比较复杂的组合示例，有简有繁，非常适合初学者认真研究。
2、Vifir推出的示例，Vifir推出的一些示例主要包括两类，一种是开源的示例应用，另外一种是针对VIP用户的实用示例。开源的示例主要是指 wlr单用户blog系统，这个一个集合了前后台技术的ext综合示例，而针对VIP用户的实用示例则是可以作为开发骨架或扩展组件的示例。
3、其它示例，在ext社区中还有很多比较优秀的ext应用示例，有些只是一个应用演示，虽然没有提供源码下载，但我们可以直接下载引用的js文件来得到这些示例的ext应用代码，同样能取起到非常好的学习效果。
五、多运用
Ext看起来是非常简单的东西，稍有点编程知识的人，按照《ExtJS实用开发指南》中的入门指南，半小时就能学会使用Ext。然而，当准备使用Ext开发一个项目时，却不知道从何处入手，或者是在使用Ext的时候，出了一点小问题自己不知道该如何解决。编程是一门实践性的科学，仅仅靠看书、看别人写的代码是远远不够的，因此，必须多做实践才行，只有通过不断的练习，大量的使用，才能对Ext的组件特性、事件、事件处理机制以及与服务器端交互接口等深入的掌握，只有多做运用，深入了解ext的组件的工作原理及机制，才能编写出高级的Ext的应用。
六、熟读Ext项目的源代码
如果要想深入应用Ext，那么阅读Ext项目的源代码这是必不可少的环节，Ext的代码质量非常高，通过阅读他的代码我们可以更加深刻的了解 javascript面向对象编程，Ext代码中包含了很多高级的js技巧以及设计模式。在使用Ext的过程中，我们经常根据项目的需要对Ext组件进行扩展，设计自己的组件或控件，而如何实现一个自定义的Ext组件，我们可以从Ext的各个组件源代码中找到答案。
Ext的源代码在Ext项目的source目录。读Ext源码，并不一定非要从某一个地方开始，而组件核心代码Component.js、容器组件代码 Container.js、面板Panel.js等这些是必看的； core目录中的Element.js、Ext.js等也是必看的。当需要从一个控件进行扩展的时候，最好能简单看一看这个控件的源代码。
附：个人喜欢用jquery，哈哈
❿ 家谱树前端特效怎么实现
首先确定点到点的向量范围
然后做枝叶的随机，将最终节点设置为LEAF
我只给出结构，剩下的LZ自己来吧
function Node(){
this.nodeCount=0;子节点数量
this.isLeaf=false;
this.LChild=[];左枝叶
this.RChild=[];右枝叶
}
结构请按照二叉树的生成来