js(或jQuery)实用代码段
权作记录
0）引入：
<script type="text/javascript" src="scripts/jquery.min.js"></script>
1）根据id获得组件：
// 已知<input Id="input_a" />,获得此input的脚本为：
$('#input_a')
2）根据id获得组件的值：
var value_a=$('#input_a').val();3）根据id对组件进行赋值：
$('#input_a').val("value_a");
document.getElementById("input_a").innerText="value_a";
4）定义click事件：
// 已知<input type="button" id="btn" />
// 定义click事件如下：
$(function(){
$('#btn').click(function(){
// do some thing
});
});5）在用户输入输入框数据后，检查数据：
$(function(){
/**
* 在输入数据后进行检查或做其他操作
*/
$("#input_a").blur(function(){
// do some thing
});
});6）显示和隐藏div
首先定义html组件：
<div id="div_info" style="display:none"></div>当用户触发了需要显示div_info组件的请求时，使用下面的代码显示div组件：
$('#div_info').show();7）根据行数和列数以及表创建动态表格：
在html中定义表组件：
<table id="tab_dynamic"></table>在js中定义创建方法：
function createTable(tabId,col,row){
// var tab =$('#'+tabId);
var tab=tabId;
for(var i=0;i<row;i++){
var $row = $('<tr></tr>');
for(var j=0;j<col;j++){
var $col = $('<td><input/></td>');
$col.appendTo($row);
}
$row.appendTo(tab);
}
}其调用方法为：
// 动态创建一个4*3的表格
createTable($('#tab_dynamic',3,4));注： 此动态表格的创建可以借鉴，其他动态组件的创建也可以使用此种方法；
8）检查是否可以字符串转为数字：
function canStringtoInt( str){
var num = parseInt(str);
if(isNaN(num)){
alert("输入必须是一个数字!");
return false;
}
return num;
}9）ajax异步提交：
$.ajax({
url:'./userAction',
data:{args1:"args1"},
dataType:'json',
success:function(r){
// do some thing
}
});后台的action或者controller，使用下面的方式发送数据：
PrintWriter out=null; out = response.getWriter(); // out.println(info); out.flush(); out.close(); return null;// return null 是必须的
10)遍历table的所有值：
/**
* 获得每个Table的值
* 每个table里面的行使用分号分隔，每行中的元素使用逗号分隔
*/
function getTableArray(tab){
var dataArr="";
$("tr",tab).each(function(){
var row =$(this);
$("td",row).each(function(){
dataArr=dataArr+$(this).find('input').val().trim()+",";
});
dataArr=dataArr.substring(0, dataArr.length-1)+";";
});
return dataArr.substring(0, dataArr.length-1);
}11）遍历div下面的所有table的值：
$("table",$('#div_sub')).each(function(){ // 把table换为其他组件，同样可以遍历
var $tab =$(this);
dataAllInputs+=getTableArrayFirst($tab);
dataAllInputs+=";";
});
12）父级、同级、下级（摘自http://zzstudy.offcn.com/archives/12921）：
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$(“span”).parent()或者$(“span”).parent(“.class”) jQuery.parent(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素 jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点 jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个 jQuery对象返回，children()则只会返回节点 jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点 jQuery.prevAll()，返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点 jQuery.nextAll()，返回所有之后的兄弟节点 jQuery.siblings(),返回兄弟姐妹节点，不分前后 jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如$(“p”),find(“span”),是从元素开始找,等同于$(“p span”)
13) easyui window 设置title
$('#win').window('setTitle','new title');
14) juqery input 可用与否
$('#inputId').attr('disabled',false);
$('#inputId').attr('disabled',true);
14) jquery 获取checkbox状态
$('#checkboxId').click(function() {
if(this.checked){
console.info("checked");
}else{
console.info("not checked");
}
console.info("filter:"+filter);
});
分享，成长，快乐
转载请注明blog地址：http://blog.csdn.net/fansy1990