jquery小技巧

★ jquery

创建jquery对象

 

var obj = new Object();    
obj.id = "123";    
obj.name = "test";

 

json对象与json转换

 

对象转json→  $.toJSON(obj);    
json转对象→  $.evalJSON(objJSON);

 

 

jquery获得对象

 

//获得myDiv中的input
$('#myDIv:input');
//获得显示的div元素
$('div:visible');
//获得css样式不是myClass的div元素
$('div').not('.myClass');
//获得css样式是myClass的div元素
$('div').filter('.myClass');
//获得第一个div
$('div').first();
//获得第三个div
$('div').eq(2);
//获得div后面的第一个input
$('#div').next('input');
//获得div的父节点
$('#div').parent();
//获得div的子节点
$('#div').children();

 

 

 

 

 

jquery事件

 

$("#test").xxx
.blur() 失去焦点。  
.change() 值发生变化  
.click() 鼠标单击  
.dblclick() 鼠标双击  
.focus() 获得焦点  
.focusin() 子元素获得焦点  
.focusout() 子元素失去焦点  
.hover() 同事绑定鼠标移入、移出事件 
.keydown() 按下键盘（长时间按键，只返回一个事件）  
.keypress() 按下键盘（长时间按键，将返回多个事件）  
.keyup() 松开键盘  
.load() 元素加载完毕  
.mousedown() 按下鼠标  
.mouseenter() 鼠标进入（进入子元素不触发）  
.mouseleave() 鼠标离开（离开子元素不触发）  
.mousemove() 鼠标在元素内部移动  
.mouseout() 鼠标离开（离开子元素也触发）  
.mouseover() 鼠标进入（进入子元素也触发）  
.mouseup() 松开鼠标  
.ready() DOM加载完成  
.resize() 改变浏览器大小
.scroll() 滚动，滚动条
.select() 选中文本框中的内容  
.submit() 提交表单
.toggle() 根据鼠标点击的次数，依次运行多个函数  

 

 

 

异步生成table

 

 

 

function queryAll()    
{    
    $("#tab01 tbody").remove();    
    $.ajax({    
        type:"post",    
        url:"/Storm_CMS/query.do?method=queryAll",    
        dataType:"json",    
        success:function(data)    
        {    
            var typeJson = data.dataList;    
            for(var i=0;i<typeJson.length;i++)    
            {    
                $("#tab01").append("<tr height=30px onclick=\"temporary(this,'"+typeJson[i].personWebid+"')\">"+    
                        "<td width='10%'>"+typeJson[i].userNetname+"</td>"+    
                        "<td width='10%'>"+typeJson[i].personWebname+"</td>"+    
                        "<td width='25%'>"+typeJson[i].personWeburl+"</td>"+    
                        "<td width='10%'>"+typeJson[i].attribute1+"</td>"+    
                        "<td width='10%'>"+typeJson[i].personName+"</td>"+    
                        "<td width='10%'>"+typeJson[i].personPassword+"</td>"+    
                        "<td width='25%'>"+typeJson[i].personEmail+"</td>"+    
                        "</tr>");    
            }    
        }    
    });    
}

 

 

 

调整页面尺寸

 

 

 

网页可见区域宽  document.body.clientWidth     
网页可见区域高  document.body.clientHeight     
网页可见区域宽(包括边线的宽)  document.body.offsetWidth     
网页可见区域高(包括边线的宽)  document.body.offsetHeight     
网页正文全文宽  document.body.scrollWidth     
网页正文全文高  document.body.scrollHeight     
网页被卷去的高  document.body.scrollTop     
网页被卷去的左  document.body.scrollLeft     
网页正文部分上  window.screenTop     
网页正文部分左  window.screenLeft     
屏幕分辨率的高  window.screen.height     
屏幕分辨率的宽  window.screen.width     
屏幕可用工作区高度  window.screen.availHeight     
屏幕可用工作区宽度  window.screen.availWidth

 

 

 

 

 

readonly和disabled区别

 

readonly 不能改  --后台能拿值
disabled 没启用  --后台无法拿值