function mouseCoords(ev){
    if (ev.pageX || ev.pageY) {
        return {
            x: ev.pageX,
            y: ev.pageY
        };
    }
    return {
        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y: ev.clientY + document.body.scrollTop - document.body.clientTop
    };
}

document.onmousemove = mouseMove;
function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
} // mousePos.x就是横坐标，mousePos.y就是纵坐标

//定义监听函数
document.onmousemove = mouseMove;
document.onmouseup   = mouseUp;
//存放我们想要拖动的DOM对象
var dragObject  = null;
var mouseOffset = null;
function mouseMove(ev){
	ev           = ev || window.event;
	//这里用到了上面第一点写的函数（mouseCoords）
	var mousePos = mouseCoords(ev);

	if(dragObject){
		dragObject.style.position = 'absolute';
		dragObject.style.top      = mousePos.y;
		dragObject.style.left     = mousePos.x;

		return false;
	}
}
function mouseUp(){
	dragObject = null;
}

function makeDraggable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		dragObject  = this;
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}

var dropTargets = [];

function addDropTarget(dropTarget){
	dropTargets.push(dropTarget);
}

function mouseUp(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);

	for(var i=0; i<dropTargets.length; i++){
		var curTarget  = dropTargets[i];
		var targPos    = getPosition(curTarget);
		var targWidth  = parseInt(curTarget.offsetWidth);
		var targHeight = parseInt(curTarget.offsetHeight);
		
		if(
			(mousePos.x > targPos.x)                &&
			(mousePos.x < (targPos.x + targWidth))  &&
			(mousePos.y > targPos.y)                &&
			(mousePos.y < (targPos.y + targHeight))){
				// dragObject was dropped onto curTarget!
		}
	}
	dragObject   = null;
}

• 第二届网络工程师侠客行大会5月24日杭州举行
• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

• 第二届网络工程师侠客行大会5月24日杭州举行
• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

• 第二届网络工程师侠客行大会5月24日杭州举行
• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

这里写出我自己的一个框架。希望多多指正。我觉得应该也算是一个mvc了吧，是不断的完善到现在，觉得可以拿出来丑丑了，呵呵。这里将主要的部分，如果需要源码的可以给我留言。好了，开始。

先从中间层讲起，也就是mvc中的c，也叫控制器，是整个框架的核心。在前台发送来请求先到web.xml中映射，这个和普通的servlet配置是一样的。

<servlet>
	<servlet-name>Servlets</servlet-name> <!--映射到Servlets.java这个控制器上面-->
	<servlet-class>com.servlets.Servlets</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>Servlets</servlet-name>
	<url-pattern>*.do</url-pattern> <!--接受.do的请求-->
</servlet-mapping>

和普通的servlet配置一样吧。

因为下面要用到一些前台传过来的参数，所以先把前台的参数说明一下：

以一个form传递为例子：

    user.do是action请求，"user"是下面要用到的类名

    invokeMethod是类中的方法名，即"login"

<form name="login" action="user.do" method="post">
	<input type="hidden" name="invokeMethod" value="login">
	<input type="text" name="uesrname" />
	<input type="submit" value="登录" />
 </form>

关键的地方就在Servlets.java这个文件里面

		String urlstr=request.getRequestURL().toString(); //获得请求的url
		String str = urlstr.substring(urlstr.lastIndexOf("/") + 1, urlstr.length());//获得 "*.do" 这个action参数，上面form传过来的话就是得到 "user.do"
		String filename = str.substring(0, str.lastIndexOf("."));//获得 ".do" 前面的字符串即："user"
		String actionName=Utils.toUpperCaseFirst(filename)+"Action";
		/**
		将user首字母大写后加上"Action" 得到类名，就是学要到达的地方-->"UserAction.java"
		到达这个类以后，前台页面form那个hidden参数 "invokeMethod" 是这个类其中的一个方法，
		根据java的反射机制调用这个方法进行相应的操作。两次反射就是整个框架的核心。
		总体来说，就是前台的action是一个类名,"invokeMethod"是这个类的方法，根据java的反射
		调用这个类的方法，实现mvc中的m，即action操作
		**/
		List params = new ArrayList();
		 params.add(request);//params
		params.add(response);
		Object object[] = { params };//params 是两个参数,即：request  和 response
		CommandUtils.invoke(object, "com.actions." + actionName);

  反射的代码见下面的附件。

现在就剩action的具体操作了，在这个例子中也就是UserAction.java中login这个方法的具体操作：

       /**
	这个类必须继承自ActionCommand (见附件)
	类名中的User即为前台action请求".do"前的参数,在servlet中转化为UserAction 
	login即为前台页面form中的hidden参数invokeMethod	
	**/

public class UserAction extends ActionCommand {
 /*
	 * 用户登录验证
	 */
	public void login(List args) throws IOException {
		HttpServletRequest request = (HttpServletRequest) args.get(0);//获得request
		HttpServletResponse response = (HttpServletResponse) args.get(1);//获得response
		String uername = request.getParameter("username");//测试获得用户名
		//下面就是可进行你的登录具体操作了
	
	}

}

  再说说怎么使用这个框架：

    前台的话就是一个".do"的action的请求， 比如说上面的“use.do” ，在后台建立一个action类，UserAction.java继承ActionCommand,首字母必须大写

    在该类中建一个名字为前台invokeMethod参数的方法名，并带入一个List参数。OK，测试一下！

好了，完是完了，不知道大家看懂没有了。呵呵。多多指点。下面附上两个反射的代码。

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师
• 第二届网络工程师侠客行大会5月24日杭州举行

文件上传(File upload)

Ajax File Upload .
jQUploader .
Multiple File Upload plugin .
jQuery File Style .
Styling an input type file .
Progress Bar Plugin .

表单验证(Form Validation)

jQuery Validation .
Auto Help .
Simple jQuery form validation .
jQuery XAV - form validations .
jQuery AlphaNumeric .
Masked Input .
TypeWatch Plugin .
Text limiter for form fields .
Ajax Username Check with jQuery .

表单－选取框(Form - Select Box stuff)

jQuery Combobox .
jQuery controlled dependent (or Cascadign) Select List .
Multiple Selects .
Select box manipulation .
Select Combo Plugin .
jQuery - LinkedSelect
Auto-populate multiple select boxes .
Choose Plugin (Select Replacement) .

表单基本、输入框、选择框等(Form Basics, Input Fields, Checkboxes etc.)

jQuery Form Plugin .
jQuery-Form .
jLook Nice Forms .
jNice .
Ping Plugin .
Toggle Form Text .
ToggleVal .
jQuery Field Plugin .
jQuery Form’n Field plugin .
jQuery Checkbox manipulation .
jTagging .
jQuery labelcheck .
Overlabel .
3 state radio buttons .
ShiftCheckbox jQuery Plugin .
Watermark Input .
jQuery Checkbox (checkboxes with imags) .
jQuery SpinButton Control .
jQuery Ajax Form Builder .
jQuery Focus Fields .
jQuery Time Entry .

时间、日期和颜色选取(Time, Date and Color Picker)

jQuery UI Datepicker .
jQuery date picker plugin .
jQuery Time Picker .
Time Picker .
ClickPick .
TimePicker .
Farbtastic jQuery Color Picker Plugin .
Color Picker by intelliance.fr .

投票插件(Rating Plugins)

jQuery Star Rating Plugin .
jQuery Star Rater .
Content rater with asp.net, ajax and jQuery .
Half-Star Rating Plugin .

搜索插件(Search Plugins)

jQuery Suggest .
jQuery Autocomplete .
jQuery Autocomplete Mod .
jQuery Autocomplete by AjaxDaddy .
jQuery Autocomplete Plugin with HTML formatting .
jQuery Autocompleter .
AutoCompleter (Tutorial with PHP&MySQL) .
quick Search jQuery Plugin .

编辑器(Inline Edit & Editors)

jTagEditor .
WYMeditor .
jQuery jFrame .
Jeditable - edit in place plugin for jQuery .
jQuery editable .
jQuery Disable Text Select Plugin .
Edit in Place with Ajax using jQuery .
jQuery Plugin - Another In-Place Editor .
TableEditor .
tEditable - in place table editing for jQuery .

多媒体、视频、Flash等(Audio, Video, Flash, SVG, etc)

jMedia - accessible multi-media embedding .
JBEdit - Ajax online Video Editor .
jQuery MP3 Plugin .
jQuery Media Plugin .
jQuery Flash Plugin .
Embed QuickTime .
SVG Integration .

图片(Photos/Images/Galleries)

ThickBox .
jQuery lightBox plugin .
jQuery Image Strip .
jQuery slideViewer .
jQuery jqGalScroll 2.0 .
jQuery - jqGalViewII .
jQuery - jqGalViewIII .
jQuery Photo Slider .
jQuery Thumbs - easily create thumbnails .
jQuery jQIR Image Replacement .
jCarousel Lite .
jQPanView .
jCarousel .
Interface Imagebox .
Image Gallery using jQuery, Interface & Reflactions .
simple jQuery Gallery .
jQuery Gallery Module .
EO Gallery .
jQuery ScrollShow .
jQuery Cycle Plugin .
jQuery Flickr .
jQuery Lazy Load Images Plugin .
Zoomi - Zoomable Thumbnails .
jQuery Crop - crop any image on the fly .
Image Reflection .

Google地图（Google Map）

jQuery Plugin googlemaps .
jMaps jQuery Maps Framework .
jQmaps .
jQuery & Google Maps .
jQuery Maps Interface forr Google and Yahoo maps .
jQuery J Maps - by Tane Piper .

游戏(Games)

Tetris with jQuery .
jQuery Chess .
Mad Libs Word Game .
jQuery Puzzle .
jQuery Solar System (not a game but awesome jQuery Stuff) .

表格等(Tables, Grids etc.)

UI/Tablesorter .
jQuery ingrid .
jQuery Grid Plugin .
Table Filter - awesome! .
TableEditor .
jQuery Tree Tables .
Expandable “Detail” Table Rows .
Sortable Table ColdFusion Costum Tag with jQuery UI .
jQuery Bubble .
TableSorter .
Scrollable HTML Table .
jQuery column Manager Plugin .
jQuery tableHover Plugin .
jQuery columnHover Plugin .
jQuery Grid .
TableSorter plugin for jQuery .
tEditable - in place table editing for jQuery .
jQuery charToTable Plugin .
jQuery Grid Column Sizing .
jQuery Grid Row Sizing .

统计图(Charts, Presentation etc.)

jQuery Wizard Plugin .
jQuery Chart Plugin .
Bar Chart .

边框、圆角、背景(Border, Corners, Background)

jQuery Corner .
jQuery Curvy Corner .
Nifty jQuery Corner .
Transparent Corners .
jQuery Corner Gallery .
Gradient Plugin .

文字和超链接(Text and Links)

jQuery Spoiler plugin .
Text Highlighting .
Disable Text Select Plugin .
jQuery Newsticker .
Auto line-height Plugin .
Textgrad - a text gradient plugin .
LinkLook - a link thumbnail preview .
pager jQuery Plugin .
shortKeys jQuery Plugin .
jQuery Biggerlink .
jQuery Ajax Link Checker .

鼠标提示（Tooltips）

jQuery Plugin - Tooltip .
jTip - The jQuery Tool Tip .
clueTip .
BetterTip .
Flash Tooltips using jQuery .
ToolTip .

菜单和导航(Menus, Navigations)

jQuery Tabs Plugin - awesome! . [demo nested tabs .]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin) .
jQuery idTabs .
jdMenu - Hierarchical Menu Plugin for jQuery .
jQuery SuckerFish Style .
jQuery Plugin Treeview .
treeView Basic .
FastFind Menu .
Sliding Menu .
Lava Lamp jQuery Menu .
jQuery iconDock .
jVariations Control Panel .
ContextMenu plugin .
clickMenu .
CSS Dock Menu .
jQuery Pop-up Menu Tutorial .
Sliding Menu .

http://stilbuero.de/jquery/tabs_3/

幻灯、翻转等(Accordions, Slide and Toggle stuff)

jQuery Plugin Accordion .
jQuery Accordion Plugin Horizontal Way .
haccordion - a simple horizontal accordion plugin for jQuery .
Horizontal Accordion by portalzine.de .
HoverAccordion .
Accordion Example from fmarcia.info .
jQuery Accordion Example .
jQuery Demo - Expandable Sidebar Menu .
Sliding Panels for jQuery .
jQuery ToggleElements .
Coda Slider .
jCarousel .
Accesible News Slider Plugin .
Showing and Hiding code Examples .
jQuery Easing Plugin .
jQuery Portlets .
AutoScroll .
Innerfade .

拖放插件(Drag and Drop)

UI/Draggables .
EasyDrag jQuery Plugin .
jQuery Portlets .
jqDnR - drag, drop resize .
Drag Demos .

XML XSL JSON Feeds

XSLT Plugin .
jQuery Ajax call and result XML parsing .
xmlObjectifier - Converts XML DOM to JSON .
jQuery XSL Transform .
jQuery Taconite - multiple Dom updates .
RSS/ATOM Feed Parser Plugin .
jQuery Google Feed Plugin .

浏览器(Browserstuff)

Wresize - IE Resize event Fix Plugin .
jQuery ifixpng .
jQuery pngFix .
Link Scrubber - removes the dotted line onfocus from links .
jQuery Perciformes - the entire suckerfish familly under one roof .
Background Iframe .
QinIE - for proper display of Q tags in IE .
jQuery Accessibility Plugin .
jQuery MouseWheel Plugin .

对话框、确认窗口(Alert, Prompt, Confirm Windows)

jQuery Impromptu .
jQuery Confirm Plugin .
jqModal .
SimpleModal .

CSS

jQuery Style Switcher .
JSS - Javascript StyleSheets .
jQuery Rule - creation/manipulation of CSS Rules .
jPrintArea .

DOM、AJAX和其它JQuery插件（DOM, Ajax and other jQuery plugins）

FlyDOM .
jQuery Dimenion Plugin .
jQuery Loggin .
Metadata - extract metadata from classes, attributes, elements .
Super-tiny Client-Side Include Javascript jQuery Plugin .
Undo Made Easy with Ajax .
JHeartbeat - periodically poll the server .
Lazy Load Plugin .
Live Query .
jQuery Timers .
jQuery Share it - display social bookmarking icons .
jQuery serverCookieJar .
jQuery autoSave .
jQuery Puffer .
jQuery iFrame Plugin .
Cookie Plugin for jQuery .
jQuery Spy - awesome plugin .
Effect Delay Trick .
jQuick - a quick tag creator for jQuery .
Metaobjects .
elementReady .

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 第二届网络工程师侠客行大会5月24日杭州举行
• 搜狐网站诚聘Java、PHP和C++工程师

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 第二届网络工程师侠客行大会5月24日杭州举行
• 搜狐网站诚聘Java、PHP和C++工程师

• 搜狐网站诚聘Java、PHP和C++工程师
• 第二届网络工程师侠客行大会5月24日杭州举行
• 北京: 千橡集团暨校内网诚聘软件研发工程师

❑ DOM的核心： Node
由于DOM是树形结构，所以一个节点被抽象为对象Node，这是DOM的核心对象：
Node的种类一共有12种，通过Node.nodeType的取值来确定（为1-12），分为：

Node.ELEMENT_NODE (1)
Node.ATTRIBUTE_NODE (2)
Node.TEXT_NODE (3) //<![CDATA[ ]]>中括着的纯文本，它没有子节点
Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode
Node.ENTITY_REFERENCE_NODE (5) 
Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>，无子节点
Node.PROCESSING_INSTRUCTION_NODE (7) //PI，无子节点
Node.COMMENT_NODE (8)
Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点
Node.DOCUMENT_TYPE_NODE (10) //DTD，<!DOCTYPE………..>
Node.DOCUMENT_FRAGMENT_NODE (11)
Node.NOTATION_NODE (12) //DTD中的Nation定义 

❑ Node接口包含的特性/方法
节点的属性
nodeName 属性将返回一个字符串，其内容是给定节点的名字。如果节点是元素节点，返回这个元素的名称；如果是属性节点，返回这个属性的名称；如果是文本节点，返回一个内容为#text 的字符串；

nodeType 属性将返回一个整数，这个数值代表给定节点的类型
nodeValue 属性将返回给定节点的当前值.如果节点是元素节点，返回null；如果是属性节点，返回这个属性的名称；如果是文本节点，返回文本节点的内容；

ownerDocument 指向这个节点所属的文档
attributes 包哈勒代表一个元素的特性的Attr对象；仅用于Element节点

childNodes 所有子节点的列表
firstChild 指向在childNodes列表中的第一个节点
lastChild 指向在childNodes列表中的最后一个节点
nextSibling 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null
previousSibling 指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null
parentNode 返回一个给定节点的父节点

❑ hasChildNodes() 当childNodes包含一个或多个节点时，返回真
❑ appendChild(node) 将node添加到childNodes的末尾
❑ removeChild(node) 将node从childNodes中删除

❑ insertBefore(newnode refnode) 在childNodes中的refnode之前插入newnode

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);

  ❑ replaceChild(newnode,oldnode)将childNodes中的oldnode替换成newnode

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.replaceChild(para,message);

 ❑ 获得Node：

/* 通过document对象 */
var oHtml = document.documentElement;


/* 得到<head />和<body /> */
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
/* 可以用这种方式 */
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
/* 也可以使用方法获取数组的索引值 */
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);
/* 使用document.body来得到<body /> */
var oBody = document.body;

❑ createElement(element)
创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。
eg) var para = document.createElement("p");
document.body.appendChild(para);

❑ createTextNode()
创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：
reference = document.createTextNode()
参数为新建文本节点所包含的文本字符串

var message = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(message);
document.body.appendChild(container);

 ❑ cloneNode()
reference = node.cloneNode(deep)
为给定节点创建一个副本，参数为 true 或者 false，true 表示同时复制该节点的子节点，false 则不复制任何子节点。

var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);
document.body.appendChild(newpara);

❑ 检测节点类型
通过使用nodeType特性检验节点类型：
alert(document.nodeType); //outputs "9"
alert(document.documentElement.nodeType); //outputs "1"
这个例子中，document.nodeType返回9，等于Node.DOCUMENT_NODE；同时document. documentElement.nodeType返回1，等于Node.ELEMENT_NODE。

也可以用Node常量来匹配这些值：
alert(document.nodeType == Node.DOCUMENT_NODE); //true
alert(document.documentElement.nodeType == Node.ELEMENT_NODE); //true

这段代码可以在Mozilla 1.0+、Opera 7.0+和Safari 1.0+上正常运行。但是IE不支持这些常量，所以这些代码在IE上会产生错误。

❑ 处理特性
即便Node接口已具有attributes方法，且已被所有类型的节点继承，然而，只有Element节点才能有特性。
Element节点的attributes属性其实是NamedNodeMap，它提供一些用于访问和处理其内容的方法：
getNamedItem(name) 返回nodeName属性值等于name的节点；
removeNamedItem(name) 删除nodeName属性值等于name的节点；
setNamedItem(node) 将node添加到列表中，按其nodeName属性进行索引；
item(pos)  像NodeList一样，返回在位置pos的节点；

请记住这些方法都是返回一个Attr节点，而非特性值。
NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。

当NamedNodeMap用于表示特性时，其中每个节点都是Attr节点，它的nodeName属性被设置为特性名称，而nodeValue属性被设置为特性的值。
例如，假设有这样一个元素：
<p id="p1" style="color:red">hello world!</p>

假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值：
var sId = oP.attributes.getNamedItem("id").nodeValue; //p1
或者
var sId = oP.attributes.item(0).nodeValue;

还可以通过给nodeValue属性赋新值来改变id特性：
oP.attributes.getNamedItem("id").nodeValue = "newId";

Attr节点也有一个完全等同于（同时也完全同步于）nodeValue属性的value属性，并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。

因为这个方法有些累赘，DOM又定义了三个元素方法来帮助访问特性：
getAttribute(name) 等于attributes.getNamedItem(name).value；
setAttribute(name, newvalue) 等于attribute.getNamedItem(name).value = newvalue；
removeAttribute(name) 等于attributes.removeNamedItem(name)

要获取前面用的<p/>的id特性，只需这样做：
var sId = oP.getAttribute("id");
更改ID:
oP.setAttribute("id", "newId");

❑ setAttribute()
element.setAttribute(attributeName,attributeValue);
为给定元素节点添加一个新的属性值或是改变它的现有属性

❑ getAttribute
attributeValue = element.getAttribute(attributeName)
返回一个给定元素的一个给定属性节点的值。

❑ getElementById()
element = document.getElementById(ID)
寻找一个有着给定 id 属性值的元素，返回一个元素节点

❑ getElementsByName()
用来获取所有name特性等于指定值的元素：
elements = document.getElementsByName(tagName)
返回一个节点集合。

❑ getElementsByTagName()
用于寻找有着给定标签名的所有元素：
elements = document.getElementsByTagName(tagName)
返回一个节点集合。

❑ 生成与操作Node
createAttribute(name) ：创建一个名为name的属性节点。
createCDATASection(text) ：创建一个子节点为text的CDATA区。
createComment(text) ：创建一个注释内容为text的注释节点。
createDocumentFragment() ：创建一个文档片断（fragment）节点。
createElement(tagName) ：创建一个名为tagName的元素节点。
createEntityReference(name) ：Creates an entity reference node with the given name。
createProcessingInstruction(target, data) ：Creates a PI node with the given target and data。
createTextNode(text) ：创建一个包含text的文本节点。
其中最重要的方法是createElement(),createDocumentFragment(), create TextNode()。

/*使用createElement(),createTextNode(),appendChild()动态添加节点*/
function createMessage(){
 var op = document.createElement("p");
 var oText = document.createTextNode("hello world!");
 op.appendChild(oText);
 document.body.appendChild(op);
}

❑ 使用createDocumentFragment()

//通常做法
var arrText = ['first', 'second', 'third'];
for(var i=0; i<arrText.length; i++){
	var op = document.createElement('p');
	var oText = document.createTextNode(arrText[i]);
	op.appendChild(oText);
	document.body.appendChild(op);
}

//使用documentFragment
var arrText = ['first', 'second', 'third'];
var oFragment = document.createDocumentFragment();
for(var i=0; i<arrText.length; i++){
	var op = document.createElement('p');
	var oText = document.createTextNode(arrText[i]);
	op.appendChild(oText);
	oFragment.appendChild(op);
}
document.body.appendChild(oFragment);

  通过DocumentFragment的方式效率更高。

❑ HTML DOM：
使用DOM的核心方法是针对所有XML的，针对HTML DOM有特殊的方法，如
使用DOM core：oImg.setAttribute("src", "picture.gif");
使用HTML DOM：oImg.src = "picture.jpg";

附件是javascript dom 手册，可以方便查阅

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 第二届网络工程师侠客行大会5月24日杭州举行

这两天遇到一个树目录的问题，前台的问题基本上已经确定了，使用dtree，比较不错的一个开源树，可以根据需要添加自己的function。

先说说具体的流程：

    用户点击一个书目录节点，可以展开该目录下的所有文件夹，同时把该文件夹以及所有子文件夹下面的文件在右边list出来。这样的话用数据库就必须有很好的设计思路(网上看到一个，下面会提到)，不然一个递归循环就得等半天，对数据库压力也比较大。但是我是想用xml文件来存取目录树的结构和该目录下文件的id,右边要显示的一些文件的信息还是用数据库来存取。因为xml文件的结构本身就是树型的，存取起来也比较方便.下面说说具体的步骤，xml放入操作可以使用jdom。我用的是dom4j，可能是先入为主吧。

我的xml测试文件log.xml：

<?xml version="1.0" encoding="gbk"?>

<log>

    <group>		 

		<folder id="1"> <!--下面会获得该节点的对象-->

			<folder>

			      <fileId>1</fileId>	

			</folder>

			<fileId>2</fileId>  <!---文件的id号-->

			<fileId>3</fileId>	

		</folder>	

		<folder id="2">

			<folder id="3">

			    <!---空文件夹-->

			</folder>

		</folder>	

		<fileId>4</fileId>	

		<fileId>5</fileId>		

	</group>

</log> 

下面将从xml文件中读取出指定文件夹下的所有文件的id以便从数据库中读取文件信息：

SAXReader saxReader = new SAXReader();



String fileName="d:/log.xml";



try {

	

	 //读入一个xml文件，转化为Document 对象

	Document document = saxReader.read(new File(fileName));



     /**

	*  获得log/group/folder节点内id属性值为1的节点	

	*  你没感觉到这种做法很想数据库的查询操作吗。是不是很神奇呢！

	**/



	Element  e=(Element)document.selectSingleNode("log/group/folder[@id='1']");



	//获得该节点下名称为 fileId 节点的迭代器



	

	Iterator  iterator = e.elementIterator("fileId");



	//下面就可以获得该文件夹下所有文件的id，然后就是从数据库查询了，我只是做了一个打印的测试。

	while(iterator.hasNext()){



	     System.out.println(((Element)iterator.next()).getText());



      } catch (DocumentException e) {



		e.printStackTrace();



	}

  至于插入数据的话指定到要插入的位置使用

element.setText("terryang");



//下面是实现更新文件

XMLWriter writer = new XMLWriter(new FileWriter(new File("d:/log.xml")));

writer.write(document);

writer.close();

 添加，修改，删除，插入的操作差不多，大家可以baidu，google一下。

可以看出，这样就可以很简单的实现节点的添加，修改，删除，插入，查询等操作。

好了，xml存取树节点的方法就是这样，希望大家多多指正。

下面我要说的是一个很好的数据库设计思路：

给出网址 http://www.java3z.com/cwbwebhome/article/article2/2781.html?id=1306

我就不在这再复制粘贴了！

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师
• 第二届网络工程师侠客行大会5月24日杭州举行

问大家一个关于js函数写法的问题：

举一个分页的例子(只是用来测试)

第一种写法：

function GoFirstPage()//跳到第一页
{
	Form.pageCur.value = "1";//设置值，还可以做一些其他操作
	Form.submit();//提交表单，下同
}

function GoPrevPage()//跳到前一页
{
	Form.pageCur.value = Form.pagePre.value;
	Form.submit();
}

function GoNextPage()//跳到下一页
{
	Form.pageCur.value = Form.pageNext.value;
	Form.submit();
}

function GoEndPage()//跳到最后一页
{
	Form.pageCur.value = Form.pageMax.value;
	Form.submit();
}

 第二种写法：

function GoToPage(pageNum )

{

	Form.pageCur.value =pageNum； 	

	Form.submit();

 }

 第一种写法的话很直观，但是代码量多。第二种写法代码量少，但别人读起来也许不如第一种那么容易懂。

大家讨论一下那种方法比较可取（个人偏向于第二种），重点是效率问题。

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师
• 第二届网络工程师侠客行大会5月24日杭州举行

<script>
(function(){//闭包，保护全局变量
	var fns=[];
	/**
	 * onDomReady
	 */
	window.onDomReady = function(fn) {
		fns.push(fn);
	}
	function runFns(){
		for(var i=0;i<fns.length;i++){
			fns[i]();
		}
	}
	//W3C
	if(document.addEventListener){
		document.addEventListener("DOMContentLoaded", runFns, false);
	}	
	else { //IE
		document.onreadystatechange = function(){	
			if(document.readyState == "interactive")
			{
				runFns();
			}
		}
	}
})();

window.onDomReady(function(){
	alert('init 1');
});
window.onDomReady(function(){
	alert('init 2');
});
window.onDomReady(function(){
	alert('init 3');
});
</script>

• 第二届网络工程师侠客行大会5月24日杭州举行
• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师

function loadVars(){
	var vars = loadVars.arguments;
	for (var i = 0; i < vars.length; i++){
		alert(vars[i]);
	}
}
loadVars('a','b','c');

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 第二届网络工程师侠客行大会5月24日杭州举行

var MyObject = (function(){
    /*private static (class) member*/
    var counter = 0;
    /*private static method.*/
    function incrementCounter(){
        return counter++;
    };
    /*class constructor.*/
    function constructorFn(id){
        this.id = id;
        var self = this;
        /*call private static (class)
        method and assign the returned
        index to a private instance member.*/
        var index = incrementCounter();
        /*privileged instance method.*/
        this.getIndex = function(){
            return index;
        };
    };
    /*privileged static (class) method
    (a property of the constructor)*/
    constructorFn.getNoOfInsts = function(){
        return counter;
    };
    /*public instance method privaliged at the
    class level*/
    constructorFn.prototype.pubInstMethod = function(){
        ...
    };
    /*return the constructor.*/
    return constructorFn;
})(); //simultaneously define and call (one-off)!

/*public static  member*/
MyObject.pubStatic = "anything"

/*public instance member*/
MyObject.prototype.pubInstVar = 8;

var global = this;
(function(){
    var classGroupMember = 3;
    function privateToClassGroup(){
        /*this method could be a utilitiy
        for the classes in the group or used
        as an internal object constructor.*/
        ...
    };
    global.MyObject1 = function(){
        var privteStaticMember = 4;
        function privateStaticMethod(){
            ...
        };
        function constructorFn(id){
            ...
        };
        /*return the constructor.*/
        return constructorFn;
    }();  //simultaneously define and call!
    global.MyObject2 = function(){
        function constructorFn(id){
            ...
        };
        /*return the constructor.*/
        return constructorFn;
    }();  //simultaneously define and call!
    global.MyObject3 = function(){
        function constructorFn(id){
            ...
        };
        /*return the constructor.*/
        return constructorFn;
    }();  //simultaneously define and call!
})();  //simultaneously define and call!

/*constructor function */
function MyObject(){
    ...
}

MyObject.prototype = (function(){
    /*private static (class) member*/
    var privateStaticProp = "anything";
    /*private static method .*/
    function privateStatic Method = function(){
        ...
    }
    return ({
        /*These functions objects are shared by
        all instances that uses this prototype
        and they have access to the private static
        members within the closure that returns
        this object*/
        publicInstanceMethod:function(){
            ...
        },
        setSomething:function(s){
            privateStaticProp = s;
        }
    });
})();

/*public instance member*/
MyObject.prototype.pubInstVar = 8;

• 第二届网络工程师侠客行大会5月24日杭州举行
• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 搜狐网站诚聘Java、PHP和C++工程师

<html>
<body>
<!--[if IE]>
根据条件判断，这是Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
根据条件判断，这是Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
根据条件判断，这是Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
根据条件判断，这是Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
根据条件判断，这是Internet Explorer 6<br />
<![endif]-->
<!--[if gte IE 5]>
根据条件判断，这是Internet Explorer 5 或者更高<br />
<![endif]-->
<!--[if lt IE 6]>
根据条件判断，这是版小于6的Internet Explorer<br />
<![endif]-->
<!--[if lte IE 5.5]>
根据条件判断，这是Internet Explorer 5.5或更低<br />
<![endif]-->
</body>
</html>

• 搜狐网站诚聘Java、PHP和C++工程师
• 第二届网络工程师侠客行大会5月24日杭州举行
• 北京: 千橡集团暨校内网诚聘软件研发工程师

• 搜狐网站诚聘Java、PHP和C++工程师
• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 第二届网络工程师侠客行大会5月24日杭州举行

• 北京: 千橡集团暨校内网诚聘软件研发工程师
• 第二届网络工程师侠客行大会5月24日杭州举行
• 搜狐网站诚聘Java、PHP和C++工程师

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Strict.dtd">

<html lang="en">
<head>
<style>
<!--
body{ margin:1% 0 0 1%; font-family:Arial,Verdana,Helvetica,sans-serif;font-size:75%;}

img{ border:0; }

a:link, a:visited, a:active{ text-decoration:none;color:#0a84c1;font-size:1em;font-weight:bold; }

a:hover{ text-decoration:none;color:#f59000;font-size:1em;font-weight:bold; }

#hotel_display{ background:#fff; width:269px; padding:10px;}

.title_top{ background:url(http://www.javaeye.com/upload/picture/pic/12025/b5e42408-d9d1-3c50-9cad-b719476e9c4d.gif?1208313629) no-repeat;padding:8px 0 8px 25px; }

.title_btm{ background:url(http://www.javaeye.com/upload/picture/pic/12023/7f74e0a9-e25d-3a08-beb5-33179fd4f058.gif?1208313628) no-repeat;padding:8px 0 8px 25px;color:#f59000;font-weight:bold; }
-->
</style>
<script type="text/javascript">
<!--
var idxCurrentPromo = 0;
var blnRotation = false;
var numOpenPromoHeight = 190;
var numSlideFactor = .25;
var numRotationTime = 5000;

function initPromos() {
    switchPromos(idxCurrentPromo, blnRotation);
}

function QSinfo(link, strIDs, MoreQS) {
    var strHREF = "";

    if (strIDs && strIDs != "")    strHREF = strIDs;
 &