JQuery
在控制台中导入JS文件：
include("http://code.jquery.com/jquery-latest.min.js");
表单
值域组件
文本框文本区域
$("#txt").attr("value");
$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
单选组
<input type="radio" name="sex" value="Female" />女 <input type="radio" name="sex" value="Male" />男
读取值：
var gender = $("input[name='sex']:checked").val();
设置值：
$("input[name=sex][value=Female]").attr("checked",true);
多选框
<input type="checkbox" name="test" value="0" />0 <input type="checkbox" name="test" value="1" />1 <input type="checkbox" name="test" value="2" />2 <input type="checkbox" name="test" value="3" />3 <input type="checkbox" name="test" value="4" />4 <input type="checkbox" name="test" value="5" />5 <input type="checkbox" name="test" value="6" />6 <input type="checkbox" name="test" value="7" />7 <input type="button" id="btn1" value="全选"> <input type="button" id="btn2" value="取消全选"> <input type="button" id="btn3" value="选中所有奇数"> <input type="button" id="btn4" value="反选"> <input type="button" onclick="jqchk();" value="提 交" />
取值：
function chk(){
var chk_value =[];
var obj=document.getElementsByName('test');
for(var i=0; i<obj.length; i++){
if(obj[i].checked)
chk_value.push( obj[i].value);
}
alert(chk_value.length==0 ?'你还没有选择任何内容！':chk_value);
};
function jqchk(){
var chk_value =[];
$('input[name="test"]:checked').each(function(){
chk_value.push($(this).val());
});
alert(chk_value.length==0 ?'你还没有选择任何内容！':chk_value);
};
设值：
$("#btn1").click(function(){
$("[name='test']").attr("checked",'true');//全选
});
$("#btn2").click(function(){
$("[name='test']").removeAttr("checked");//取消全选
});
$("#btn3").click(function(){
$("[name='test']:even").attr("checked",'true');//选中所有奇数
});
$("#btn4").click(function(){
$("[name='test']").each(function(){
if($(this).attr("checked")) {
$(this).removeAttr("checked");
} else {
$(this).attr("checked",'true');
}
})
});
下拉框
<select id="select_id" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="micibi">Micibis</option> <option value="byd">BYD</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <input type="button" id="btn1" value="当前文本"> <input type="button" id="btn2" value="选中"> <input type="button" id="btn3" value="添加"> <input type="button" id="btn4" value="删除">
取值：
$("#btn1").click(function(){
alert('当前值：' + $("#select_id").val());
alert('当前文本：' + $("#select_id").find("option:selected").text() );
alert('当前索引：' + $("#select_id ").get(0).selectedIndex);
alert('最大索引：' + $("#select_id option:last").attr("index"));
});
设置值：
$("#btn2").click(function(){
alert('选中索引3');
$("#select_id ").get(0).selectedIndex=2
alert('选中值为volvo');
$("#select_id ").val('valvo');
alert('选中文本为BYD');
$("#select_id option:[text='BYD']").attr("selected", true);
});
添加：
$("#btn3").click(function(){
alert('尾部加上一项：');
$("#select_id").append("<option value='porsche'>Porsche</option>");
alert('头上加上一项：');
$("#select_id").prepend("<option value='honda'>Honda</option>");
});
删除：
$("#btn4").click(function(){
alert('删除最后一个');
$("#select_id option:last").remove();
alert('删除第一个');
$("#select_id option:first").remove();
alert('删除值为saab');
$("#select_id option[value='saab']").remove();
alert('删除文本是BYD');
$("#select_id option:[text='BYD']").remove();
alert('清空所有');
$("#select_id").empty();
});
cookies操作
定义工具类：
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') {
options = options || {};
if (value === null) {
value = '';
options = $.extend({}, options);
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
调用的例子：
<input type="button" id="write_cokies" value="wirte"> <input type="button" id="read_ookies" value="read"> <input type="button" id="delete_cookies" value="delete">
JS：
$(document).ready(function() {
$('#write_cokies').click(function(){
$.cookie('name', 'jade',{expires: 7});
});
$('#read_ookies').click(function(){
var name = $.cookie('name');
alert (name);
});
$('#delete_cookies').click(function(){
$.cookie('name', null);
});
});
事件
详细：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
| 方法 | 描述 |
| bind() | 向匹配元素附加一个或更多事件处理器 |
| blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
| change() | 触发、或将函数绑定到指定元素的 change 事件 |
| click() | 触发、或将函数绑定到指定元素的 click 事件 |
| dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
| delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
| die() | 移除所有通过 live() 函数添加的事件处理程序。 |
| error() | 触发、或将函数绑定到指定元素的 error 事件 |
| event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
| event.pageX | 相对于文档左边缘的鼠标位置。 |
| event.pageY | 相对于文档上边缘的鼠标位置。 |
| event.preventDefault() | 阻止事件的默认动作。 |
| event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
| event.target | 触发该事件的 DOM 元素。 |
| event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
| event.type | 描述事件的类型。 |
| event.which | 指示按了哪个键或按钮。 |
| focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
| keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
| keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
| keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
| live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
| load() | 触发、或将函数绑定到指定元素的 load 事件 |
| mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
| mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
| mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
| mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
| mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
| mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
| mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
| one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
| ready() | 文档就绪事件（当 HTML 文档就绪可用时） |
| resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
| scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
| select() | 触发、或将函数绑定到指定元素的 select 事件 |
| submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
| toggle() | 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。 |
| trigger() | 所有匹配元素的指定事件 |
| triggerHandler() | 第一个被匹配元素的指定事件 |
| unbind() | 从匹配元素移除一个被添加的事件处理器 |
| undelegate() | 从匹配元素移除一个被添加的事件处理器，现在或将来 |
| unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
提交
跨域提交
以JSONP实现跨域提交，JQuery中用$.getJSON(url, data, callback)方式。URL中要加上
参数&format=json&callback=?：
var url = url + "?time="+new Date().getTime() +"&format=json&callback=?";
$.getJSON(url, param, function(json) {
// ....
});
其中callback会被替换为一个唯一的函数名。在服务端要取得callback的值，形式类似
于JSONP293041629再用它把返回的Json包起来：
string message = "jsonp1294734708682({\"userid\":0,\"username\":\"null\"})";
例子：
String callbackName = req.getParameter("callback");
String result = callbackName + "(" + json + ")";