想要达到生活的境界

2008年12月10日星期三

errorPlacement的使用（转）

参看:http://docs.jquery.com/Plugins/Validation并整理

jquery.validate.js是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持

使用这个函数很简单，看以下的代码

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">URL</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">Your comment</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"                      "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>   <script src="http://code.jquery.com/jquery-latest.js"></script>   <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <style type="text/css"> * { font-family: Verdana; font-size: 96%; } label { width: 10em; float: left; } label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } p { clear: both; } .submit { margin-left: 12em; } em { font-weight: bold; padding-right: 1em; vertical-align: top; } </style>   <script>   $(document).ready(function(){     $("#commentForm").validate();   });   </script>    </head> <body>      <form class="cmxform" id="commentForm" method="get" action="">  <fieldset>    <legend>A simple comment form with submit validation and default messages</legend>    <p>      <label for="cname">Name</label>      <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />    </p>    <p>      <label for="cemail">E-Mail</label>      <em>*</em><input id="cemail" name="email" size="25"  class="required email" />    </p>    <p>      <label for="curl">URL</label>      <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />    </p>    <p>      <label for="ccomment">Your comment</label>      <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>    </p>    <p>      <input class="submit" type="submit" value="Submit"/>    </p>  </fieldset>  </form> </body> </html>

总结，我们只要在加入如下的JAVASCRIPT代码，就可以把指定的FORM加上验证

Html代码

$(document).ready(function(){
$("#commentForm").validate();
});

  $(document).ready(function(){     $("#commentForm").validate();   });

不过我们还要在需要验证的INPUT里面class加入required说明是必填项，其他的就是验证相关数据比如email就是验证email的数据结构

以下列出validate自带的默认验证

        required: "必选字段",
        remote: "请修正该字段",
        email: "请输入正确格式的电子邮件",
        url: "请输入合法的网址",
        date: "请输入合法的日期",
        dateISO: "请输入合法的日期 (ISO).",
        number: "请输入合法的数字",
        digits: "只能输入整数",
        creditcard: "请输入合法的信用卡号",
        equalTo: "请再次输入相同的值",
        accept: "请输入拥有合法后缀名的字符串",
        maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
        minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
        rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
        range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
        max: jQuery.format("请输入一个最大为 {0} 的值"),
        min: jQuery.format("请输入一个最小为 {0} 的值")

validate ()的可选项

debug：进行调试模式

$



(".selector").validate



({
   debug: true
})

把调试设置为默认

$



.validator.setDefaults
 


({
   debug: true
})

submitHandler：用其他方式替代默认的SUBMIT,比如用AJAX的方式提交

$



(".selector").validate



({
   submitHandler: function(form) {
   	$
 


(form).ajaxSubmit();
   }
})

ignore：忽略某些元素不验证

$



("#myform").validate



({
   ignore: ".ignore"
})

rules：默认下根据form的classes, attributes, metadata判断，但也可以在validate函数里面声明
Key/value 可自定义规则. Key是对象的名字 value是对象的规则，可以组合使用 class/attribute/metadata rules.

以下代码特别验证selector类中name='name'是必填项并且 email是既是必填又要符合email的格式

$

(".selector").validate

({
   rules: {
     // simple rule, converted to {required:true}
      name: "required",
     // compound rule
     email: {
       required: true,
       email: true
     }
   }
})

messages：更改默认的提示信息

$

(".selector").validate

({
   rules: {
     name: "required",
     email: {
        required: true,
       email: true
     }
   },
   messages: {
     name: "Please specify your name",
     email: {
       required: "We need your email address to contact you",
        email: "Your email address must be in the format of name@domain.com"
     }
   }
})

groups：定义一个组，把几个地方的出错信息同意放在一个地方，用errorPlacement控制把出错信息放在哪里

$

("#myform").validate

({
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
      if (element.attr("name") == "fname" || element.attr("name") == "lname" )
       error.insertAfter("#lastname");
     else
       error.insertAfter(element);
    },
   debug:true
 })

jquery基本入门

原文见：http://hi.baidu.com/houbaojian/blog/item/23b525df4e4e2e1562279827.html

第一天：选择器相关
1.html()与.text()
.html()取得第一个匹配元素的html内容。会带有标签，.text()仅是里边的文本
.text()取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本
2.
$("a")选择所有的连接
$(".a")选择所有class="a"的标签
$("#a")选择id="a"的标签

3.
$("span[@name=a]")选择了<span name="a"></span>
$("span[@love=a]")选择了<span love="a"></span>
$("li#a")           选择了<li id="a"><li>
$("li.a")           选择了<li class="a"><li>
$("li .a")          选择了<li class="a"><span class="a">span被选择了</span><li>
由于可以看出连在一起是指li并且class="a" 中间有空格是指<li>下的class="a"的元素,同CSS选择器的道理一样
$("div[@id=form]").hide("slow");找到<div id="form"><span></span></div>

并且这个层隐藏
$("div[@id=form]").children().hide("slow")找到<div id="form"><span>span才是被找到</span></div>

并隐藏
$("h1:contains('换个写法')")找到<h1>换个写法</h1>
$("h1 :contains('换个写法')")找到     <h1><span>换个写法</span></h1><br />
由此可以看出，连在一起是找h1中包含'换个写法'的内容,有空格是找<h1>的下一级元素中含中'换个写法'的内容

4.
$("ul>li:odd") 偶数行
$("ul>li:even") 奇数行

5 var a=$("select[@name=class] option[@selected]");
    var b=$("select[@name=class1]");
    b.append(a);
从一个下拉列表把内容放到另一个下拉列表里

6
$("a").parent("p")    只能找到<p>段<a href="#">落</a>一</p>     直接关系
$("a").parents("p") 可以找到<p>段<em><a href="#">落</a></em>二</p> 所有的父
$("p").eq(0)找到第一个p
$("p:eq(0)")同上
$("p:visible") 所有可见的p
7
$("div:first") 找到第一个div
$("div:first-child") div的父元素的第一个元素是div才匹配
以上基本上是写了下选择器，更多参考
http://docs.jquery.com/Selectors

第二天:ajax相关

首先看下json，当然ajax可以返回xml.html,json等

json_encode后的数据格式总结
一，对象
结果为hash表,就是{"键":"值","键":"值"}这样的形式，为js可以识别的对象
二，一维索引数组
结果为数组['元素一','元素二']，为js可以识别的数组
三，一维相关数组
结果为hash表,为js可以识别的对象
四，多维索引数组
结果为[["a","b"],["c","d"]]这样的形式,为js可以识别的数组
五，多维相关数组
结果为[{"1":"a","2":"b"},{"1":"c","2":"d"}],外边是js可以识别的数组，中间是hash

对于hash的处理方式
<script>
var json={"title":"a","name":"b","age":"c"};
alert(json.age);
</script>
对于数组的处理方式
<script>
var json=["a","b","c"];
alert(json[1]);
</script>
之所以总结，是因为我对这些不熟，遇到这样子的我就套上这些

OK,现在开始看jquery处理ajax

$.ajax()为通用方式
其中间必须是一个hash表即，形式为{键:值,键:值}的形式
参数
type:请求方式，默认为get，如:type:"post"
url :ajax请求的url         如:url :"ajax.php" 也可以是url:"ajax.php?id=5"这样子id可以通过$_GET['id']得到
data:传递的参数:
如:data:"name=terry&age=30" 具体如何得到数据($_GET[],$_POST[])取决于上边的type.
如:data:{name:"terry",age:"30"}，此种形式会转成"name=terry&age=30"
dateType:返回数据的方式，默认为html,
>>>>>>>>如果返回json下边有个例子是处理这种类型的返回的数据<<<<<<<<

ifModified:默认为false，如果为true，当数据没有变化时请求不成功
error:请求失败是执行的函数
timeout:请求的时间，超过此时间，请求失败
complete:请求结束后执行的函数,不管请求成功或失败

第三天：

昨天写了下ajax的通用方法：今天看下其它的方法
load(url,[data],[callback]),
默认是GET方式:如果load("ajax.php")用GET方式提交数据;
如果有任何参数:如load("ajax.php","name=terry");刚用post方式提交数

$.get(url,[data],[callback])用get方式向远程页面传递参数
如
$.get('ajax.php',{name:"terry",id:5},function(msg){
         $("#content").html(msg);
})
以GET方式得到数据并放到层id为content的层中

$.post(url,[data],[callback])同上，但数据以post方式提交

$.getJSON(url,[data],[callback])
以get方式获得json数据，这里重点写下：

如果返回的数据为数组
如["a","b","c"]处理方式
$.each(["a","c","c"].function(i){alert(this)})
返依次弹出a,b,c

如果返回的数据为hash对象
如{"name":"terry","age":"25"}处理方式
$.each(msg,function(i){
             alert(i+"="+this);
})
刚依次弹出name=terry,age=25
就是说对于数组，i为0.1.2等，对于hash对象i为键

如果返回的数据外边是数组，里边是hash对象
[{"name":"terry","age":"25"},{"name":"abc","age":"30"}],刚处理方式
function jq(){
     $.getJSON('ajax.php',function(msg){
         $.each(msg,function(i){
             $.each(this,function(j){
                 alert(j+this);
             });
         })
     })
}

一个处理时的效果
function jq(){

$.get('ajax.php',function(msg){
     $("#content").html(msg);
     $("#con").html("处理结束");
});
$("#con").html('处理中......');
}

jQuery的bind函数

jQuery学习之bind

在jQuery里面，直接用bind函数和unbind函数为某个DOM或者HTML标签等绑定一个操作和移除一个事件就行了。

例如为一个button添加一个click。可以这样操作

XML/HTML代码

<input type='button' id='myBtn'>

这是一个button，现在我们要为他添加一个事件

JavaScript代码

<script>
$('#myBtn').bind("click",function(){
alert('click');
});
</script>

这样，我们就为这个button绑定了一个click的事件。

bind函数可以有三个参数，当第二个参数不是一个函数，而是一个数据对象时，它将默认做为bind第三个参数（函数）的参数。例如：

JavaScript代码

<script>
function showAlert(events){
alert(events.data.foo);
}
$('#myBtn').bind('click',{foo:'click'},showAlert);
</script>

点击时，同样会显示:click

这些就是bind的一些基本用法，当然还有一些方法

比如在绑定方法的时候，用的是return false;可以让这个方法失效

JavaScript代码

<script>
$('#myBtn').bind('click',function(){
return false;
})
</script>

这样，刚才绑定的click又失效了，不过，这种方法往往用在submit提交的时候比较多。

还有一些方法可以取消默认行为和阻止事件起泡：preventDefault 和stopPropagation

例：

JavaScript代码

<script>
$('#myBtn').bind('click',function(event){
event.preventDefault();//取消默认的click行为
});
$('#myBtn').bind('click',function(event){
event.stopPropagation();//阻止click事件起泡
});
</script>

jquery radio,checkbox,select操作

JavaScript代码

获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值：
文本框，文本区域：$("#txt").attr("value")；
多选框checkbox：$("#checkbox_id").attr("value")；
单选组radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();
控制表单元素：
文本框，文本区域：$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox： $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框

http://docs.jquery.com/UI

所有效果说明：
基本的鼠标互动：
拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)
各种互动效果：
手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条

(sliders)、表格排序(table sorters)、页签(tabs)
放大镜效果(magnifier)、阴影效果(shadow)

第一部分：鼠标交互
1.1 Draggables:拖拽
所需文件：
ui.mouse.js
ui.draggable.js
ui.draggable.ext.js

用法：文件载入后，可以拖拽class = "block"的层
$(document).ready(function(){
     $(".block").draggable();
});

draggable(options)可以跟很多选项
选项说明：http://docs.jquery.com/UI/Draggables/draggable#options
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html

1.2 Droppables
所需要文件，drag drop
ui.mouse.js
ui.draggable.js
ui.draggable.ext.js
ui.droppable.js
ui.droppable.ext.js
用法：
$(document).ready(function(){
     $(".block").draggable({helper: 'clone'});
$(".drop").droppable({
    accept: ".block",
    activeClass: 'droppable-active',
    hoverClass: 'droppable-hover',
    drop: function(ev, ui) {
        $(this).append("<br>Dropped!");
    }
});
});
选项说明：http://docs.jquery.com/UI/Droppables/droppable#options
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html

1.3　Sortables　排序
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.sortable.js
用法：
$(document).ready(function(){
     $("#myList").sortable({});
});
dimensions文档http://jquery.com/plugins/project/dimensions
选项说明：http://docs.jquery.com/UI/Sortables/sortable#options
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html

1.4 Selectables 选择
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.droppable.js
ui.selectable.js
用法：
$(document).ready(function(){
     $("#myList").selectable();
});
选项说明：http://docs.jquery.com/UI/Selectables/selectable#options
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html

1.5　Resizables改变大小
所需要的文件　，此例子需要几个css文件
jquery.dimensions.js
ui.mouse.js
ui.resizable.js
用法：
$(document).ready(function(){
     $("#example").resizable();
});
CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明：http://docs.jquery.com/UI/Resizables/resizable#options
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.resizable.html

第二部分：互动效果
2.1 Accordion 折叠菜单
所需要的文件:
ui.accordion.js
jquery.dimensions.js
用法：
$(document).ready(function(){
     $("#example").accordion();
});
CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明：http://docs.jquery.com/UI/Accordion/accordion#options
选项实例：http://dev.jquery.com/view/trunk/plugins/accordion/?p=1.1.1
2.2 dialogs 对话框
所需要的文件：
jquery.dimensions.js
ui.dialog.js
ui.resizable.js
ui.mouse.js
ui.draggable.js

用法：
$(document).ready(function(){
     $("#example").dialog();
});
CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明：http://docs.jquery.com/UI/Dialog/dialog#options
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html

2.3 sliders 滑动条
所需要的文件
jquery.dimensions.js
ui.mouse.js
ui.slider.js

用法：
$(document).ready(function(){
     $("#example").slider();
});

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明：http://docs.jquery.com/UI/Slider/slider#options
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html

2.4 Tablesorter表格排序
所需要的文件
ui.tablesorter.js

用法：
$(document).ready(function(){
     $("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
});

CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明：http://docs.jquery.com/Plugins/Tablesorter/tablesorter#options
选项实例：http://tablesorter.com/docs/#Demo

2.5 tabs页签(对IE支持不是很好)
所需要的文件
ui.tabs.js
用法：
$(document).ready(function(){
     $("#example > ul").tabs();
});
CSS文件：http://dev.jquery.com/view/trunk/themes/flora/flora.all.css
选项说明：http://docs.jquery.com/UI/Tabs/tabs#initialoptions
选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.html
tabs ext http://stilbuero.de/jquery/tabs_3/rotate.html

第三部分：效果
3.1 Shadow 阴影
实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html
3.2 Magnifier 放大
实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html

jQuery 操作表单

jquery取得text,areatext,radio,checkbox,select的值,以及其他一些操作;
1.假如我们有如下页面

<input type="text" name="textname" id="text_id" value="">

2.下面来看怎么取得FORM中的各种值等等;

function get_form_value(){
/*获得TEXT.AREATEXT的值*/
var textval = $("#text_id").attr("value");//或者
var textval = $("#text_id").val();
/*获取单选按钮的值*/
var valradio = $("input[@type=radio][@checked]").val();
/*获取一组名为(items)的radio被选中项的值*/
var item = $('input[@name=items][@checked]').val();
/*获取复选框的值*/
var checkboxval = $("#checkbox_id").attr("value")；
/*获取下拉列表的值*/
var selectval = $('#select_id').val();
}

3.另外对表单的其他处理:

//控制表单元素：
//文本框，文本区域：
$("#text_id").attr("value",'');//清空内容
$("#text_id").attr("value",'test');//填充内容
//多选框checkbox：
$("#chk_id").attr("checked",'');//未选中的值
$("#chk_id").attr("checked",true);//选中的值
if($("#chk_id").attr('checked')==undefined) //判断是否已经选中
//单选组radio：
$("input[@type=radio]").attr("checked",'10');//设置value=10的单选按钮为当前选中项
//下拉框select：
$("#select_id").attr("value",'test');//设置value=test的项目为当前选中项
$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")//添加下拉框的option
$("#select_id").empty()；//清空下拉框

2008年12月9日星期二

JQuery指南/基础(转)

这是一个基础指南，旨在帮助你开始使用jquery。jquery给予你常见问题的解决方法。如果你尚未建立你的测试页面，我建议你创建一个含有下列内容的HTML页：

程序代码
<html>
<head>
<script type="text/javascript"
src="link/to/jquery.js"></script>
<script type="text/javascript">
// Your code goes here
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

修改script标签的src属性指向到你的jquery.js。例如，如果你的jQuery.js与你的HTML文件在同一目录，你可以这样：

程序代码
<script type="text/javascript" src="jquery.js"></script>
文档载入时运行代码
首先，大多数JavaScript程序员会用类似代码:

程序代码
window.onload = function(){ ... } .

访问HTML文档的元素，必须先载入文档对象模型(DOM)。当window.onload函数执行的时候，说明所有东西已经载入，包括图像和横幅等等。要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的。

对于此，jquery提供了一个"ready"事件,你可以使用以下的代码片段：

程序代码
$(document).ready(function(){
// 你的代码
});
   $(document)意思是说，获取文档对象（类似的于window.document），$(document).ready意思就是说，获取文档对象就绪的时候。
   上面这段代码的意思是检查文档对象直到它能够允许被操作（译者注：这样做比window.onload()函数要快的多，因为只要文档对象载入完成就能够执行代码了，而不需要等待页面中的图片下载是否已经完成）---这是我们想要的。因此将上面的代码片段粘贴到你测试页面的脚本区吧！

鼠标点击时的触发
   首先，我们尝试鼠标点击超链接时触发某些行为。在ready函数里加入以下代码：

程序代码
$("a").click(function(){
alert("谢谢你的来临!");
});

保存HTML文件，然后刷新一下页面。点击某个超链接，页面将弹出警告对话框。

增加 CSS Class
另外一个事情就是，一个共同的任务：增加或移除元素的css class，例如:

程序代码
$("a").addClass("test");
$("a").removeClass("test");

如果你已经在页面头部加入了：

程序代码
<style>a{text-weight:bolder}</style>
那么当你调用了addClass函数后，所有超链接的字体将变成粗体。

特效
Effects Module(效果模块)提供了一系列好用的特效。

加上下面代码：

程序代码
$("a").click(function(){
$(this).hide("slow");
return false;
});
现在，只要你点击超链接，超链接就会慢慢的消失。"return false"表示保留默认行为，因此页面不会跳转。

回调

所谓回调就是父函数执行完成后，自身能够作为返回值传递到另一个函数的函数。回调功能的特别之处在于，出现在"父函数"后面的函数可以在回调函数执行前执行。
另外一个重点是要知道如何正确运用回调，我就常常忘记了正确语法。

一个不带参数的回调应该这样写：

程序代码
$.get('myhtmlpage.html', myCallBack);
注意第二个参数是一个简单的函数名(它不是字符，也没有带括号)

那么带参数的回调该怎么写呢？
错误的写法，下面这样写是不行的(或者不会执行)：

程序代码
$.get('myhtmlpage.html', myCallBack(param1,param2));
正确的写法：

程序代码
$.get('myhtmlpage.html', function(){
myCallBack(param1,param2);
});
这样就实现了回调一个带参函数的功能。

后记
到这里，也许你应该去看看其余的文档了。里面包括更多的指南-它很全面,涵盖了jquery各个方面。如果大家有问题，请放心的给我发Email。
当然，你也可以看看利用jQuery做的多种DEMO。

Struts中html:options的使用

html:options是Struts中比较复杂的一个tage lib，用法灵活，但是Sturts提供的源码exercise taglib中没有提出常用jsp+ActionForm这样形式的最直接的总结，现从中总结如下，分两种情况：数组和Collection。

需求，要达到：

<select name="beanCollectionSelect" multiple="multiple" size="10"><option value="Value 0">Label 0</option>
<option value="Value 1" selected="selected">Label 1</option>
<option value="Value 2">Label 2</option>
<option value="Value 3" selected="selected">Label 3</option>
<option value="Value 4">Label 4</option>
<option value="Value 5" selected="selected">Label 5</option>
<option value="Value 6">Label 6</option>
<option value="Value 7">Label 7</option>
<option value="Value 8">Label 8</option>
<option value="Value 9">Label 9</option></select>

要实现上述效果，需要两步：
第一：设置ActionForm，
也分两小步：第一小步必须在ActionForm中，有一句
private Collection beanCollection;
public Collection getBeanCollection();

Collection beanCollection要确保是一个实现，如ArrayList，如果不是则会报No collection found的错误，Struts的最大不方便就是一旦出问题，定位很难，不知道什么地方使用错误，或忘记设置什么了。

因为前面需求中option的value值和label值不一样，那么在beanCollection中保存的就是一个value和label组成的对象，名为LabelValueBean，在LabelValueBean中有两个属性value和label，

在程序某个地方要为beanCollection赋值，如：

Vector entries = new Vector(10);

entries.add(new LabelValueBean(

要实现上述效果，需要两步：第一：设置ActionForm，也分两小步：第一小步必须在ActionForm中，有一句private Collection beanCollection;public Collection getBeanCollection();Collection beanCollection要确保是一个实现，如ArrayList，如果不是则会报No collection found的错误，Struts的最大不方便就是一旦出问题，定位很难，不知道什么地方使用错误，或忘记设置什么了。因为前面需求中option的 value值和label值不一样，那么在beanCollection中保存的就是一个value和label组成的对象，名为 LabelValueBean，在LabelValueBean中有两个属性value和label，在程序某个地方要为beanCollection赋值，如：Vector entries = Vector(10);entries.add( LabelValueBean("Label 0", "Value 0"));
entries.add(new LabelValueBean("Label 1", "Value 1"));
entries.add(new LabelValueBean("Label 2", "Value 2"));
entries.add(new LabelValueBean("Label 3", "Value 3"));
entries.add(new LabelValueBean("Label 4", "Value 4"));
entries.add(new LabelValueBean("Label 5", "Value 5"));
entries.add(new LabelValueBean("Label 6", "Value 6"));
entries.add(new LabelValueBean("Label 7", "Value 7"));
entries.add(new LabelValueBean("Label 8", "Value 8"));
entries.add(new LabelValueBean("Label 9", "Value 9"));

然后执行setBeanCollection(entries);
这样ActionForm中的beanCollection算有值了。
第二小步，需要设置Selected，selected有两种，单选和多选：
在ActionForm中必须有：

private String singleSelect = "Single 5" ;

public String getSingleSelect() {
return (this.singleSelect);
}

public void setSingleSelect(String singleSelect) {
this.singleSelect = singleSelect;
}
或多选，多选必须是数组：

private String[] beanCollectionSelect = { "Value 1", "Value 3",
"Value 5" };

public String[] getBeanCollectionSelect() {
return (this.beanCollectionSelect);
}

public void setBeanCollectionSelect(String beanCollectionSelect[]) {
this.beanCollectionSelect = beanCollectionSelect;
}

第二：在Jsp中写入tang lib语句如下：

<html:select property="beanCollectionSelect" size="10" multiple="true">
<html:optionsCollection name="testbean" property="beanCollection" />
</html:select>

其中testbean是ActionForm的名称。

以上是html:options的Collection解决方案，如果option值很少，简单地可以实现为数组，两步：
第一：在ActionForm中，

private String values[] =
{ "Magazine", "Journal", "News Paper","Other" };

private String labels[] =
{ "L-Magazine", "L-Journal", "L-News Paper","L-Other"};

private String selected = "Magazine";

public String getSelected(){
return selected;
}
public void setSelected(String selected){
this.selected = selected;
}

public String[] getValues(){
return values;
}
public void setValues(String[] values){
this.values = values;
}

public String[] getLabels(){
return values;
}
public void setLabels(String[] labels){
this.labels = labels;
}

第二步在jsp中：

<html:select property="selected" >
<html:options name="testbean" property="values" labelProperty="label"/>
</html:select>

2008年12月8日星期一

对Hibernate配置文件中的映射元素详解

配置文件中映射元素详解

对象关系的映射是用一个XML文档来说明的。映射文档可以使用工具来生成，如XDoclet，Middlegen和AndroMDA等。下面从一个映射的例子开始讲解映射元素，映射文件的代码如下。

＜?xml version="1.0"?＞

＜!--

所有的XML映射文件都需要定义如下所示的DOCTYPE。

Hibernate会先在它的类路径（classptah）中搜索DTD文件。

--＞

＜!DOCTYPE hibernate-mapping PUBLIC

"-//Hibernate/Hibernate Mapping DTD 3.0//EN"

"http：//hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"＞

＜!--

hibernate-mapping有几个可选的属性：

schema属性指明了这个映射的表所在的schema名称。

default-cascade属性指定了默认的级联风格可取值有 none、save、update。

auto-import属性默认让我们在查询语言中可以使用非全限定名的类名可取值有 true、false。

package属性指定一个包前缀。

--＞

＜hibernate-mapping schema="schemaName" default-cascade="none"

auto-import="true" package="test"＞

＜!--用class元素来定义一个持久化类 --＞

＜class name="People" table="person"＞

＜!-- id元素定义了属性到数据库表主键字段的映射。--＞

＜id name="id"＞

＜!-- 用来为该持久化类的实例生成唯一的标识 --＞

＜generator class="native"/＞

＜/id＞

＜!-- discriminator识别器是一种定义继承关系的映射方法--＞

＜discriminator column="subclass" type="character"/＞

＜!-- property元素为类声明了一个持久化的，JavaBean风格的属性--＞

＜property name="name" type="string"＞

＜column name="name" length="64" not-null="true" /＞

＜/property＞

＜property name="sex"

not-null="true"

update="false"/＞

＜!--多对一映射关系--＞

＜many-to-one name="friend"

column="friend_id"

update="false"/＞

＜!--设置关联关系--＞

＜set name="friends" inverse="true" order-by="id"＞

＜key column="friend_id"/＞

＜!—一对多映射--＞

＜one-to-many class="Cat"/＞

＜/set＞

＜/class＞

＜/hibernate-mapping＞

组件应用的方法

组件有两种类型，即组件（component）和动态组件（dynamic-component）。在配置文件中，component元素为子对象的元素与父类对应表的字段建立起映射关系。然后组件可以声明它们自己的属性、组件或者集合。component元素的定义如下所示：

＜component name="propertyName" class="className" insert="true|false" 

upate="true|false" access="field|property|ClassName"＞ 
 ＜property ...../＞

＜many-to-one .... /＞

........

＜/component＞

在这段代码中，name是指属性名，class是类的名字，insert指的是被映射的字段是否出现在SQL的INSERT语句中，upate指出被映射的字段是否出现在SQL的UPDATE语句中，access指出访问属性的策略。

Hiebernate的基本配置

Hibernate的数据库连接信息是从配置文件中加载的。Hibernate的配置文件有两种形式：一种是XML格式的文件，一种是 properties属性文件。properties形式的配置文件默认文件名是hibernate.properties，一个properties形式的配置文件内容如下所示：

#指定数据库使用的驱动类

hibernate.connection.driver_class = com.mysql.jdbc.Driver r

#指定数据库连接串

hibernate.connection.url = jdbc:mysql://localhost:3306/db

#指定数据库连接的用户名

hibernate.connection.username = user

#指定数据库连接的密码

hibernate.connection.password = password

#指定数据库使用的方言

hibernate.dialect = net.sf.hibernate.dialect.MySQLDialect

#指定是否打印SQL语句

hibernate.show_sql=true

在配置文件中包含了一系列属性的配置，Hibernate将根据这些属性来连接数据库。

在XML格式的配置文件中，除了基本的Hibernate配置信息，还可以指定具体的持久化类的映射文件，这可以避免将持久化类的配置文件硬编码在程序中。XML格式的配置文件的默认文件名为hibernate.cfg.xml，一个XML配置文件的示例如下所示：

＜?xml version=´1.0´ encoding=´UTF-8´?＞

＜!DOCTYPE hibernate-configuration PUBLIC

"-//Hibernate/Hibernate Configuration DTD 3.0//EN"

"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd"＞

＜hibernate-configuration＞

＜session-factory＞

＜!--显示执行的SQL语句--＞

＜property name="show_sql"＞true＜/property＞

＜!--连接字符串--＞

＜property name="connection.url"＞jdbc:mysql://localhost:3306/STU＜/property＞

＜!--连接数据库的用户名--＞

＜property name="connection.username"＞root＜/property＞

＜!--数据库用户密码--＞

＜property name="connection.password"＞root＜/property＞

＜!--数据库驱动--＞

＜property name="connection.driver_class"＞com.mysql.jdbc.Driver＜/property＞

＜!--选择使用的方言--＞

＜property name="dialect"＞org.hibernate.dialect.MySQLDialect＜/property＞

＜!--映射文件 --＞

＜mapping resource="com/stuman/domain/Admin.hbm.xml" /＞

＜!--映射文件--＞

＜mapping resource="com/stuman/domain/Student.hbm.xml" /＞

＜/session-factory＞

＜/hibernate-configuration＞

properties形式的配置文件和XML格式的配置文件可以同时使用。当同时使用两种类型的配置文件时，XML配置文件中的设置会覆盖properties配置文件的相同的属性。

对象标识符号

在关系数据库表中，主键（Primary Key）用来识别记录，并保证每条记录的唯一性。在Java语言中，通过比较两个变量所引用对象的内存地址是否相同，或者比较两个变量引用的对象值是否相同来判断两对象是否相等。Hibernate为了解决两者之间的不同，使用对象标识符（OID）来标识对象的唯一性。OID是关系数据库中主键在Java 对象模型中的等价物。在运行时，Hibernate根据OID来维持Java对象和数据库表中记录的对应关系。如下代码所示，三次调用了Session的 load()方法，分别加载OID为1或3的User对象。

Transaction tx = session.beginTransaction();

User user1 = (User)session.load(User.class,new Long(1));

User user2 = (User)session.load(User.class,new Long(1));

 User user3 = (User)session.load(User.class,new Long(3));

System.out.println( user1 == user2 );

System.out.println( user1 == user3 );

应用程序在执行上述代码时，第一次加载OID为1的User对象，从数据库中查找ID为1的记录，然后创建相应的User实例，并把它保存在 Session缓存中，最后将该实例的引用赋值给变量user1。第二次加载OID为1的对象时，直接把Session缓存中OID为1的实例的引用赋值给变量user2。因此，表达式user1==user2的结果为true。

标识的生成可以使用不同的策略，表1为Hibernate内置的标识生成策略。

表1：Hibernate标识生成策略

标识符生成器	描述
increment	适用于代理主键。由Hibernate自动以递增方式生成。
identity	适用于代理主键。由底层数据库生成标识符。
sequence	适用于代理主键。Hibernate根据底层数据库的序列生成标识符，这要求底层数据库支持序列。
hilo	适用于代理主键。Hibernate分局high/low算法生成标识符。
seqhilo	适用于代理主键。使用一个高/低位算法来高效的生成long，short或者int类型的标识符。
native	适用于代理主键。根据底层数据库对自动生成标识符的方式，自动选择identity、sequence或hilo。
uuid.hex	适用于代理主键。Hibernate采用128位的UUID算法生成标识符。
uuid.string	适用于代理主键。UUID被编码成一个16字符长的字符串。
assigned	适用于自然主键。由Java应用程序负责生成标识符。
foreign	适用于代理主键。使用另外一个相关联的对象的标识符。

Hibernate映射类型

在对象/关系映射文件中，Hibernate采用映射类型作为Java类型和SQL类型的桥梁。Hibernate映射类型分为2种：内置映射类型和自定义映射类型。

1、内置映射类型

Hibernate对所有的Java原生类型、常用的Java类型如String、Date等都定义了内置的映射类型。表2列出了Hibernate映射类型、对应的Java类型以及对应的标准SQL类型。

表2：Hibernate内置映射类型

Hibernate映射类型	Java类型	标准SQL类型	大小
integer/int	java.lang.Integer/int	INTEGER	4字节
long	java.lang.Long/long	BIGINT	8字节
short	java.lang.Short/short	SMALLINT	2字节
byte	java.lang.Byte/byte	TINYINT	1字节
float	java.lang.Float/float	FLOAT	4字节
double	java.lang.Double/double	DOUBLE	8字节
big_decimal	java.math.BigDecimal	NUMERIC
character	java.lang.Character/java.lang.String/char	CHAR(1)	定长字符
string	java.lang.String	VARCHAR	变长字符
boolean/ yes_no/true_false	java.lang.Boolean/Boolean	BIT	布尔类型
date	java.util.Date/java.sql.Date	DATE	日期
timestamp	java.util.Date/java.util.Timestamp	TIMESTAMP	日期
calendar	java.util.Calendar	TIMESTAMP	日期
calendar_date	java.util.Calendar	DATE	日期
binary	byte[]	BLOB	BLOB
text	java.lang.String	TEXT	CLOB
serializable	实现java.io.Serializablej接口的任意Java类	BLOB	BLOB
clob	java.sql.Clob	CLOB	CLOB
blob	java.sql.Blob	BLOB	BLOB
class	java.lang.Class	VARCHAR	定长字符
locale	java.util.Locale	VARCHAR	定长字符
timezone	java.util.TimeZone	VARCHAR	定长字符
currency	java.util.Currency	VARCHAR	定长字符

2、自定义映射类型

Hibernate提供了自定义映射类型接口，允许用户以编程的方式创建自定义的映射类型。用户自定义的映射类型需要实现 net.sf.hibernate.UserType或net.sf.hibernate.CompositeUserType接口。具体的创建自定义映射类型的方法请参考hibernate官方文档或相关资料，这里不再详细介绍

2008年12月6日星期六

properties类读取配置文件

package com.wyq.hibernate;

import java.io.FileInputStream;
import java.io.InputStream;
import java.util.Properties;

import org.hibernate.HibernateException;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.Transaction;
import org.hibernate.cfg.Configuration;

public class Example {
//建立一个静态的工场对象
private static SessionFactory session_factory = null;
//建立一个存储配置文件的对象--properties
private static Properties pops=new Properties();
//取得配置文件路径,配置文件存放在class路径下
private static String path=Example.class.getClassLoader().getResource("").getPath()+"hibernate.properties";
//建立一个静态方法，用来读取配置文件---hibernate.properties,在static静态方法中只能引用静态变量
static{
  try{
   String s=path.substring(1,path.length());
   //读取配置文件
   InputStream stream= new FileInputStream(s);
   //如果配置文件和类放在同一个目录下，这种情况不建议使用
   InputStream streams=Example.class.getResourceAsStream("hibernate.properties");
   //将配置文件存储在pops中
   pops.load(stream);
   //建立配置文件管理对象
   Configuration cfg=new Configuration();
   //将Person添加到cfg中，类似于将xxx.hbm.xml写在hibernate.hbm.xml中
   cfg.addClass(Person.class);
   //将pops添加到cfg中，就是hiberante.hbm.xml
   cfg.setProperties(pops);
   //建立对象工厂
   session_factory=cfg.buildSessionFactory();
  }catch(Exception e){
   e.printStackTrace();
  }
}
public static void main(String[] args)throws HibernateException{
  Person person=new Person();
  person.setName("wyq");
  person.setEmail("hibernate.com.cn");

  //取得一个session,获得连接
  Session session=session_factory.openSession();
  //定义一个事务
  Transaction tx=null;
  try{
   //开启一个事务
   tx=session.beginTransaction();
           //具体业务操作
   session.save(person);
   tx.commit();

  }catch(HibernateException ex){
   if(tx!=null){
    tx.rollback();
   }
  }
  finally{
   session.close();
  }
}
}

订阅：博文 (Atom)

想要达到生活的境界

2008年12月10日星期三

errorPlacement的使用（转）

validate ()的可选项

debug：进行调试模式

jquery基本入门

jQuery 操作表单

2008年12月9日星期二

JQuery指南/基础(转)

Struts中html:options的使用

2008年12月8日星期一

对Hibernate配置文件中的映射元素详解

2008年12月6日星期六

properties类读取配置文件

博客归档

我的简介