The most important thing is to know how to access JSF component from JQuery. The id given to inputText is consisting of formid:componentid. So in this example the id given to textbox is  registerform:username. But the presence of : (colon) causes problem to JQuery. So, we need to escape : (colon) using two \\ characters before colon - registerform\\:username.

在Dreamweaver里依次选择“命令” -> “扩展管理” -> “安装扩展” -> …，就会自动安装了。

成功后重启Dreamweaver，就大功告成了。

点击下载DW cs4的jQuery语法提示插件：jquery_api_for_dw4

注意：如果您安装的是精简版的Dreamweaver，那么请先下载Adobe Extension Manager 插件管理器[点击下载]，我自己是cs3的，因此该处链接也是适用于cs3，请根据自己相应版本选择下载。

Yahoo UI
ProtoType
JQuery
OpenRico
ExtJS
Scriptaculous
DoJo
Moofx
QoodXoo
GWT
TacoNite
Sarissa
Spry

画廊（图片展示）

Galleria
FrogJS
HighSlide
SmoothGallery
DHTMLGoodies - Image Slideshow
Google Slideshow
JQuery Cycle
PhatFusion Gallery
Ajax Slideshow with XML
TripTracker Slideshow
Aeron Slideshow
WebTwo Ajax Slideshow
Spry Gallery Demo
jQuery ImageStrip Slideshow
MiniShowCase
Ajax Coverflow (Slideflow)
Lightweight Gallery
Livepipe Photo Folder
jaS Gallery
Mooflow
Cross browser toys Gallery
Moo Cycle

菜单

Sliding Bar Menu - Mootools
jQuery Fastfind Menu
Apple Dock
Image Menu amongst others - as seen on Microsoft
Tree menu
Context Menu
LavaLamp for jQuery
Slashdot menu
Mootools Menu copy
Css Dock Menu
Nice Horizontal menu
Accessible Expanding Menu
MultiLevel Menu - jQuery
jQuery HoverAccordion
Apple Hover Menu sim
Simple Javascript Accordian
StickMan Labs Accordian
MooTools clone
Nyko Glitter Tabs
Horizontal Accordion
Colour Transition
Dropdown Menu with jQuery

模式窗口/ Lightboxes

Livepipes Modal Box
Lightbox gone wild
Thickbox
SubModal
Lightbox without Images
lightbox
Moodalbox
Lightwindow
Videobox: Lightbox for videos
Facebox
Multibox
Shadowbox
GlassBox
jQuery Lightbox Plugin
jQuery Lightbox Plugin Bal
Highslide JS
YUI based Lightbox
Mediabox
SqueezeBox
iBox
mooSlideBox
Smoothbox

鼠标提示

Javascript Focusing Library
Nice titles
Nice Titles Revision
Ajax Enabled Help Balloons
jTip
jQuery plugin tooltip
qTip
Cody Lindley’s Tooltip
Boxover
SuperNotes
Coda Puff Effect

表单

jNice - Jquery Nice Forms
Custom Checkboxes
Checkbox Group
Ajax driven combobox

（小组件）Widgets

DragnDrop Library
AutoComplete
Fat Focus
Form Field hints
UI component for Prototype
Interface Elements for jQuery
jQuery ScrollTo
jScrollPane
AutoSuggest AutoComplete
Ajax AutoComplete
Autocomplete with JSON

其他

Logging Framework JS

地图

Web map server Javascript library
Google Maps Api
Ajax GIS client
MapStraction
Giant Pan
Zoomify

具有flash效果的菜单，基于jquery

Download the zip file version 0.2.0 of LavaLamp and open the demo.html to check it out for yourself 

LavaLamp menu
来源：http://gmarwaha.com/blog/?p=7

翻译：lxr

转载请注明出去。

将鼠标放在上面的例子上，你就会感觉到Lava Lamp的完美效果。LavaLamp menu是基于jquery库的，就我个人而言，我认为它的效果并不亚于flash菜单，而且它比flash要小得多。就像你知道的它仅仅只有700bytes。

我常注意到，授权一般在最终版本。现在我诚落在早期版本你将获得授权。这个效果最先是由Guillermo Rauch用mootools库写的。我所做的的仅仅是为了jquery的爱好者而将它改写为基于jquery库的。非常感谢Guillermo 创建的完美效果。特别感谢Stephan Beal将它取名为“LavaLamp”，和Glen Lipka 在外观图形上的帮助，以及众多的jquery爱好者的支持。

作为一个用户界面开发者，我们知道用户最常用的是菜单。我们一直追求的就是吸引用户的眼球，我相信LavaLamp向这一方向迈出了一步。在这些废话让你厌烦之前让我们开始将LavaLamp加入到你的网站中。
我希望你认同一个典型的html部件由3个不同的元件组成。

javascript

 

现在让我们按照上面的步骤将LavaLamp菜单加入到你的网站中。在用jquery库替换mootools库的过程中，我为你写了javascript和css以供使用。因此请你按照本页教程的步骤使用jQuery。在Guillermo Rauch
的页面中有mootools版本的教程。

步骤1: HTML
由于大多数用户界面开发人员认为无序清单（ ul ）是正确的语义结构菜单/导航，所用就让我们从这里开始。

<ul class="lavaLamp">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>

在上面的“ul”表示菜单，每一个“li”项代表一个菜单项，这一点对理解我们外加的“li”标记用来描述高亮显示的菜单项有很大帮助。因为背景仅仅是用来美化用的，它并不代表一个菜单项，因此我们可以从javascript中加载它。只是为了确保它与鼠标同步，就先说“你不必加入li”，LavaLamp将特别注意它，一旦加上，“li”所代表的背景就会看起来是这样的：

<li class="back"><div class="left"></div></li>

步骤2: CSS
你可以修改css以获得自己想要的外观，这里列出了一种，在“Bonus”部分列出了另外几种：

/**//* Styles for the entire LavaLamp menu */ 
.lavaLamp {}{ 
position: relative; 
height: 29px; width: 421px;
background: url("../image/bg.gif") no-repeat top; 
padding: 15px; 
margin: 10px 0; 
overflow: hidden; } 
/**//* Force the list to flow horizontally */ 
.lavaLamp li {}{ 
float: left; 
list-style: none; 
} 
/**//* Represents the background of the highlighted menu-item. */ 
.lavaLamp li.back {}{ 
background: url("../image/lava.gif") no-repeat right -30px; 
width: 9px; 
height: 30px; 
z-index: 8; 
position: absolute; 
} 
.lavaLamp li.back .left {}{ 
background: url("../image/lava.gif") no-repeat top left; 
height: 30px; 
margin-right: 9px; 
} /**//* Styles for each menu-item. */ 
.lavaLamp li a {}{ 
position: relative; 
overflow: hidden; 
text-decoration: none; 
text-transform: uppercase; 
font: bold 14px arial; 
color: #fff; 
outline: none; 
text-align: center; 
height: 30px; 
top: 7px; 
z-index: 10; 
letter-spacing: 0; 
float: left; 
display: block; 
margin: auto 10px; 
}

相信我这只是一个很简单的样式表，请继续向下看以理解每一部分的作用。
第一，我们用亮橙色作为背景以及一些基本属性height，width，padding，margin等等来风格化“ul”。我们使用了相对定位，这样我们才能确定背景“li”与“ul”的关系。这样我们才能自由移动背景“li”。

下一步，我们使“li”水平移动而不是垂直。默认时它是垂直移动的，在这种情况下我们使用“float:left”以达到我们所需的效果。
下一步，我们使用“li”来高亮表示现在所在的菜单项，这使用了sliding doors technique另外注意上面所提到的相对位置。
最后一步，格式化链接
上面的规则不是很易懂，如果你对改写css没有信心我推荐你快速阅读一下CSS positioning。它简短且通俗易懂。
步骤3: Javascript
这是一个非常简单的部分，所有的功能在Lava Lamp plugin中，作为一个开发者你要做的仅仅是将它包含到你的网页中。

<script type="text/javascript" src="/path/to/jquery.js"></script> 
<script type="text/javascript" src="/path/to/jquery.lavalamp.js"></script> 
<!-- Optional --> 
<script type="text/javascript" src="/path/to/jquery.easing.js"></script>
<script type="text/javascript"> 
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

这是另外一个，也只改动了css，我想它并不美观但我想要说的是你仅仅是被自己的想象力所束缚了。

源文件下载

function MyImageB()
{
document.all.MyPic.src="C:\Documents and Settings\All Users\Documents\My Pictures\示例图片\Blue hills.jpg";
}
-->
</script>

<img name=MyPic id="MyPic " src="C:\Documents and Settings\All Users\Documents\My Pictures\示例图片\Sunset.jpg" width=300 height=200></img>

<script type=text/javascript>
document.all.MyPic.onmouseover=MyImageA;
document.all.MyPic.onmouseout=MyImageB;
</script>

<script language="javascript">//创建动态函数
 ///创建动态函数
 //var square=new Function("x","y","var sum;sum=x*x+y*y;return sum;");
 //等同于
 /*function square(x,y)
 {
  return x*x+y*y;
 }
 alert(square(2,3));*/
 
 
 //encodeURI方法(url字符编号)
 /*var urlStr = encodeURI("http://www.it315.org/imdex.html?country=中国&name=z x");
 alert(urlStr);*/
 
 //decodeURI方法(对已编号的url进行解号)
 /*urlStr = decodeURI("http://www.it315.org/imdex.html?country=%E4%B8%AD%E5%9B%BD&name=z%20x");
 alert(urlStr);*/
 
 //parseInt方法
 //parseFloat方法
 //isNaN方法
 //escape方法(对一个字符进行Unicode编号)
 //unescape方法(解码)
 //eval方法(将其中的参数字符串作为一个javascript表达式执行，可以动态产生表达式)
</script>

<script language="javascript">//对象与对象实例
 ///对象与对象实例
 /*function Person()//Person对象的构造函数---构造函数
 {}
 var person1=new Person();//创建Person对象的实例---对象实例
 person1.age=18;//为对象实例添加成员,可以对其无限制的添中新的成员
 //person1.age也可以用person1["age"]访问，这样可以动态访问其成员
 person1.name="abb";//---属性
 //alert(person1.name+":"+person1.age);
 function sayFunc()
 {
  alert(person1.name+":"+person1.age);
  //alert(person1["name"]+":"+person1["age"]);
  
  //var x="name";
  //alert(person1[x]+":"+person1["age"]);
  //x="age";
  //alert(person1[x]+":"+person1["age"]);
  
  //eval("alert(person1.name);");与下面结果相同
  //alert(person1.name);
  
  //var x="age";
  //eval("alert(person1."+x+");");
 }
 person1.say=sayFunc;//---方法(函数指针)     不能为person1.say=sayFunc();
 person1.say();*/
</script>

<script language="javascript">//构造方法与this关键字
 ///构造方法与this关键字
 //为一个对象实例新增加属性和方法，不会增加到同一个对象所产生的其它对象实例上
 /*function Person(name,age)
 {
   this.age=age;
   this.name=name;
   this.say=sayFunc;
 }
 function sayFunc()
 {
  alert(this.name+":"+this.age);
  //alert(name+":"+this.age);//错误，this不能去掉
 }
 var person1=new Person("张三",18);
 person1.say();
 var person2=new Person("李四",20);
 person2.say();*/
</script>

<script language="javascript">//在函数中修改参数值的问题
 ///在函数中修改参数值的问题
 //值传寄
 /*function changeValue(x)
 {
  x=5;
 }
 var x=3;
 changeValue(x);
 alert(x);*/  //值仍为3,未修改,值传寄
 
 
 //对象传寄
 /*function Person(name,age)
 {
   this.age=age;
   this.name=name;
   this.say=sayFunc;
 }
 function sayFunc()
 {
  alert(this.name+":"+this.age);
 }
 function chage(p1)
 {
  p1.name="王五";
 }
 var p1=new Person("张三",18);
 chage(p1);
 p1.say();*/
</script>

<script language="javascript">//javascript内部对象
 ///javascript内部对象
 //动态对象 使用时new实例并用“实例名.成员”的格式访问--------------------动态对象
 
 //-String对象(属性length)---是动态地象也是一个特殊的数据类型
 //var myStrObj=new String("www.it315.orgit");
 //var myStrObj="www.it315.org";//结果同上
 //alert("www.it315.org".length);//结果同下
 //alert(myStrObj.length);
 
 //-big()方法--原字符两边加<big></big>标签对
 //alert(myStrObj.big());
 
 //-bold()方法--原字符两边加<b></b>标签对
 //alert(myStrObj.bold());
 
 //-fontcolor()方法--设置字符串的颜色
 //alert(myStrObj.fontcolor("red"));
 
 //-anchor()方法--添加超连接标记name属性
 //alert(myStrObj.anchor("re"));
 
 //-link()方法--添加超连接标记scr属性
 //alert(myStrObj.link("www.it315.org"));
 //其他方法如bold,italics,blink,small,fontsize
 
 //-charAt()方法--返回索引位的字符，以0开始，超出length-1返回空
 //alert(myStrObj.charAt(12));
 
 //-charCodeAt()方法--返回索引位的字符的unicode编号，以0开始，超出length-1返回空
 //alert(myStrObj.charCodeAt(12));
 
 //-lastIndexOf()方法--返回某子字符串第一次出现的索引位置，从右向左,没找到返回-1
 //alert(myStrObj.lastIndexOf("it"));
 
 //-indexOf()方法--返回某子字符串第一次出现的索引位置，左向右,没找到返回-1
 //alert(myStrObj.indexOf("it"));
 /*var p=myStrObj.indexOf("it")
 while(p != -1)
 {
  alert(p);
  p=myStrObj.indexOf("it",pos+1);
 }*/
 
 //-match()方法--使用正则表达式检证字符
 
 //-search()方法--使用正则表达式方法查子串，类似于indexOf
 
 //-replace()方法--替换子串，可用正则
 
 //-split()方法--分隔符取子串生成数组,可用正则
 
 //-slice()方法--返回指定位置之间的字符串，取前不取后
 //slice(4,6);slice(4);
 
 //substr(),substring()方法--取子串substring()类似于slice(),substr(开始位置,长度)
 
 //-toUpperCase()小写转大写
 
 //-toLowerCase()大写转小写
 
 //Date对象
 //-构造函数Date(),Date(dateVal),Date(year,month,date[,hours[,minutes[,seconds[,ms]]]])
 
 //-parse()方法--静态方法
 
 //-getYear(),getMonth(),getDate(),getDay(),getHours(),getMinutes(),getSeconds(),getMilisecons()
 
 //-getTime()返回1970-1-1起的毫秒数
 
 //-set方法与get方法对映
 
 //静态对象 用“对象名.成员”的格式访问   ----------------------------------静态对象
 //Object对象(提供创建自定义对象的简单方式，不需要程序员再定义构造函数)
 /*function getAttributeValue(attr)
 {
  alert(person[attr]);
 }
 var person=new Object();
 person.name="zs";
 person.age=18;
 getAttributeValue("name");
 getAttributeValue("age");*/
 
 //Math对象
 //-random()方法--返加0-1之间的随机数,abs()方法
 
 //toString()方法--所有对象都有
</script>

<script language="javascript">//对象专用语句
 ///对象专用语句
 //with语句子--可以一次引用对象实例的属性或方法
 /*var current_time=new Date();
 with(current_time)
 {
  var strDate=getYear()+"年";
  strDate+=getMonth()+"月";
  strDate+=getDate()+"日";
  strDate+=getHours()+":";
  strDate+=getMinutes()+":";
  strDate+=getSeconds();
  alert(strDate);
 }*/
 
 //for...in语句-对对象属性进行操作
 /*function Person(name,age)
 {
   this.age=age;
   this.name=name;
 }
 var p=new Person("lisi",19);
 var prep="";
 for(prep in p)
 {
  alert(p[prep]);
 }*/
</script>

<script language="javascript">//数组列表--有length属性能
 ///数组列表--有length属性能
 /*var arr=["as"+1,321,2.5,"abb",""];//可以是任意数据类型,可以为空或合法表达式
 for(var i=0;i<arr.length;i++)
 {
  alert(arr[i]);
 }*/
 
 ///用对象的方式实现数组
 /*function MyArray()
 {
  this.length=arguments.length;
  for(var i=0;i<this.length;i++)
  {
   this[i]=arguments[i];
  }
 }
 var str="";
 var arr=new MyArray(4,3.5,"abc");
 for(var i=0;i<arr.length;i++)
 {
  str+=i+":"+arr[i]+"\n";
 }
 alert(str);*/
</script>

<script language="javascript">//Array对象
 ///Array对象
 //-构造方法
 //-Array();Array(4);-长度Array(3.5,"abc",3);
 /*var arr=new Array();
 var x,str="";
 arr[0]="abc";
 arr[1]=23;
 arr[2]=3;
 arr.sort();
 for(x in arr)
 {
  str=str+x+":"+arr[x]+"\n";
 }
 alert(str);*/
</script>

//写cookies函数 
function SetCookie(name,value)//两个参数，一个是cookie的名子，一个是值
{
    var Days = 30; //此 cookie 将被保存 30 天
    var exp  = new Date();    //new Date("December 31, 9998");
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    //将 cookie 内容写入客户端,其中 expires 是系统使用的，表示 cookie 的失效日期（也可以省略）,
    //expires 不可读。escape 是对 cookie 值进行编码，这是为了处理中文、空格等而设立的。
    document.cookie = name.toLowerCase() + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//读取cookies函数 
function getCookie(name)       
{
    //取 cookie 字符串，由于 expires 不可读，所以 expires 将不会出现在 cookieStr 中。 
    var arr = document.cookie.match(new RegExp("(^| )"+name.toLowerCase()+"=([^;]*)(;|$)"));
    if(arr != null) return unescape(arr[2]); return null;

}
//删除cookie
function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name.toLowerCase() + "="+cval+";expires="+exp.toGMTString();
}


//简单例子
SetCookie ("name", www.buslfy.cn)
alert(getCookie(name));

//写入名称为 cv 的 cookie
SetCookie ("cv", "test123", null);

//写入名称为 Ab，带失效日期的 cookie
var expires = new Date("December 11, 2010");
SetCookie ("Ab", "test234", expires);

1. Cookie的兼容性问题

Cookie的格式有2个不同的版本，第一个版本，我们称为Cookie Version 0，是最初由Netscape公司制定的，也被几乎所有的浏览器支持。而较新的版本，Cookie Version 1，则是根据RFC 2109文档制定的。为了确保兼容性，JAVA规定，前面所提到的涉及Cookie的操作都是针对旧版本的Cookie进行的。而新版本的Cookie目前还不被Javax.servlet.http.Cookie包所支持。

2. Cookie的内容

同样的Cookie的内容的字符限制针对不同的Cookie版本也有不同。在Cookie Version 0中，某些特殊的字符，例如：空格，方括号，圆括号，等于号（=），逗号，双引号，斜杠，问号，@符号，冒号，分号都不能作为Cookie的内容。这也就是为什么我们在例子中设定Cookie的内容为"Test_Content"的原因。

虽然在Cookie Version 1规定中放宽了限制，可以使用这些字符，但是考虑到新版本的Cookie规范目前仍然没有为所有的浏览器所支持，因而为保险起见，我们应该在Cookie的内容中尽量避免使用这些字符

fuction test{
   tt.hello(
    callback:function(datas){
         alert(datas.key1);
         alert(datas.["key2"]);
    }
   );
}

fuction test{
   tt.hello(
    callback:function(datas){
         for(var prop in datas){
             alert("key="+prop+",value="+datas.[prop]);
         }
    }
   );
}

同时调用多个方法时，设置dwr的方法调用方式
true（默认）：效果为可以同时调用方法1和2，可以先调用方法2后调用方法1，不能确认
false:先调用方法1后调用方法2,按js中调用的顺序调用

dwr.engine.setAsync(false);

function haolejiaowo()
{
  if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status=200)
  {
    var b=xmlHttpRequest.responseText;
    if(b=="true")
    {}
    else
    {}
  }
}

---------------------------------------------------------------------
1 jar http://getachead.org/dwr
2 创建配置文件:/WEB-INF/dwr.xml
  <dwr>
 <allow>
  <create creator="new[struts/spring]" javascript="JUserChecker">
  <param name="class" value="com.bj.biz.Manager"/>
 <!--
  <include method="check"/>
  <include method="check2"/>
 -->
 </allow>
  </dwr>
3 在web.xml中配置
  <servlet>
   <servlet-name>dwr</servlet-name>
   <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
   <init-param>
    <param-name>debug</param-name>
    <param-value>true</param-value>
   </init-param>
 <load-on-startup>0</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dwr</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>
4 java类
 
5 测试 http://127.0.0.1:8080/dwrpro/dwr/
6 页面代码
<script src="dwr/interface/JUserChecker.js"/>

function checkUserExists(oCtl){
 var uname=oCtl.vlaue;
 JUserChecker.ckeck(uname,haoLeJiaoWo);
}
fucntion haoLeJiaoWo(data){
 alert(data); 
}

返回对象

open()

onreadystatechange---->委托

send()

readystate----页面响应关态

status-----页面状态

setRequestHeader----设置请求头协议

第一步  创建XMLHTTPRequest对象
var request=onInit();
第二步 告诉请求那个服务器
request.open("GET",URL,TRUE);1提交方式 2 服务器地址 3 是否准许异步提交
第三步 定义事件当请求开始后触发
request.onreadystatechange=Request;
第四步
request.send(null);//开始提交到服务器提交的参数，POST提交需要参数
function CreateResponse()
{
 创建XMLDocument对象
 var dom=request.ResponseXML();
 字符串
 var str=request.responseText();
}
function Request()
{
 判断数据是否响应完毕
 if(request.readystate==4)
 {
  判断页面是否正常
  if(request.status==200)
  {
   
  }
 }
}
function onInit()
{
  if (window.XMLHttpRequest) {
        return new windows.XMLHTTPRequest();
    }
    if (window.ActiveXObject) {
       return new window.ActiveXObject("microsoft.XMLHTTP");
    }
}

 /*
 *在javascript1.1和其后的版本中,数组是用构造函数Array()和运算符new来创建,
 可用以下的三种方式来创建javascript 中的数组.
 */
 var a=new Array();
 var b=new Array(5,4,3,"first","test,string");
 var c=new Array(20);

 a[1.23]="test";
 document.write("a[1.23]="+a[1.23]);
 //相信每位从强类型的编程语言学习javascript时,绝对会以为上面这种操作感到惊讶,
 //float数据也作数组的下标了,事实上                       并非如您所想       
 //javascript在您是用负数,浮点数,(或布尔型,对象,其他值时),javascript会将它转换为一个字符串
 //用生成的字符串作为对象的属性名字,而不是定义了一个新的数组元素
 //上面的实例事实就是为a 创建了一个名为:"1.23"的属性.
 document.write("a.length="+a.length);
 document.write("b.length="+b.length);
 document.write("c.length="+c.length);

 a[3]="Test";
 document.write("<br />a[3]="+a[3]);
 document.write("<br/>a.length="+a.length);
 //以上测试也很明确我们用整数作为数组的下标是才会真正为数组添加一个元素，
 //这里用数组的长度来体现了javascript的数组中的奥妙。

</script>