jquerytab

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>收信人列表</title>
<style>
* {
	margin:0;
	padding:0;
}
body {
	background:#e3e3e3;
	height:100%;
	font:normal normal 12px/24px "Microsoft yahei", Arial;
	padding-bottom:30px;
}
#title{width:300px;margin:3% auto 0;}
h1{font-size:18px;}
h6{ font-size:12px; font-weight:normal; color:#333;margin-bottom:10px; }
h6 a { color:#09c; }
#wrapper {
	width:300px;
	margin:0 auto;
	background:#f8f8f8;
	border:1px solid #a3a3a3;
	padding:20px 20px 50px;
	border-radius:5px;-moz-border-radius:5px;
}
.box{width:210px;margin:10px auto 0;background:#fff;border:1px solid #d3d3d3;}
.tab_menu{list-style:none;width:210px;overflow:hidden;}
.tab_menu li{width:70px;float:left;height:30px;line-height:30px;color:#fff;background:#093;text-align:center;cursor:pointer;}
.tab_menu li.current{color:#333;background:#fff;}
.tab_box{padding:20px;height:120px;}
.tab_box .hide{display:none;}
h3{color:#333;font-size:14px;width:210px;margin:30px auto 0;}
</style>
</head>

<body>
<div id="title">
<h1>jQuery TAB插件演示</h1>
<h6>by:<a href="http://stylechen.com/">Stylechen.com</a></h6>
</div>
<div id="wrapper">
<h3>回调函数</h3>
	<div class="box demo5">
		<ul class="tab_menu">
			<li class="current">新闻</li>
			<li>图片</li>
			<li>军事</li>
		</ul>
		<div class="tab_box">
			<div>新闻</div>
			<div class="hide">图片</div>
			<div class="hide">军事</div>
		</div>
	</div>
</div>
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.tabs.js"></script>
<script>
//<![CDATA[
$(function(){
	$('.demo1').Tabs();
	$('.demo2').Tabs({
		event:'click'
	});
	$('.demo3').Tabs({
		timeout:300
	});
	$('.demo4').Tabs({
		auto:3000
	});
	$('.demo5').Tabs({
		event:'click',
		callback:tabcallback
	});
	function tabcallback(){
		//alert("我是回调函数 :)");
	}
});	
//]]>
</script>
</body>
</html>

 

 

JqueryAjax的url传递时间含空格不能提交解决方案

问题描述:在JS代码中访问地址,浏览器控制台报错。

1、错误访问代码如下:

function getTrackData(param) {
	var mydata = {};
	$.ajax({
		url : url + "/locate/track/" + param.carnumber + "/"+ param.starttime + "/" +param.endtime,
		dataType : 'json',
		type : 'get',
		async : true,
		success : function(data) {
			var item = eval(data);
			if (item)
				mydata = item;
		}
	});
	return mydata;
}

注:starttime,endtime的值格式数据如:”2013-06-07 10:00:00″,url上面含参数js不会对url进行编码。

空格” “被浏览器编译成了%20代替,导致无法访问后台。

2、问题解决方案

function getTrackData(param) {
	var mydata = {};
	var starttime=param.starttime.replace(/ /g,"_");
	var endtime=param.endtime.replace(/ /g,"_");
	$.ajax({
		url : url + "/locate/track/" + param.carnumber + "/"+ starttime + "/" +endtime,
		dataType : 'json',
		type : 'get',
		async : true,
		success : function(data) {
			var item = eval(data);
			if (item)
				mydata = item;
		}
	});
	return mydata;
}

替换空格,以下字符都是可行的,如”_”,”,””&”,”|”,”@”等字符,英文字母例外。

3、mysql数据库查询

SELECT * FROM device_001 WHERE SERVICETIME BETWEEN '2013-06-07@00:00:00' AND '2013-06-07@08:12:30'

编写jquery插件中的闭包demo

demo中的代码,需要jquery库文件支持

//闭包特性,
//1. 避免内部临时变量影响全局空间,
//2. 插件内部继续使用$作为jquery别名

/**
定义一个匿名函数--闭包
**/
;(function($){//$作为匿名函数的参数
	//这里编写插件代码,可以继续使用$作为jquery的别名
	/**
	定义一个局部变量foo,仅函数内部可以访问,外部无法访问
		--利用闭包特性,可以避免内部临时变量影响全局空间,又可以再插件内部继续使用$作为jquery的别名
		--独立,有关联,且无污染
	**/
	var foo;
	
	var bar = function(){
		foo="aa";
		alert(foo);
		/**
			1.匿名函数内部的函数都可以访问foo
			2.匿名函数的外部调用bar()的时候,也可以再bar()内部访问到foo,但是在匿名函数外部直接访问foo是不可以的
		**/
	}
	
	/**
		功能:扩展匿名函数内的私有函数bar()到全局可访问范围
		调用:在匿名函数外通过jQuery.BAR()来访问闭包内定义的函数bar(),且,bar()必然是可以访问foo私有变量的
	**/
	$.BAR=bar;
	
})(jQuery);//将jquery作为实参传递给匿名函数

$(function(){
		$.BAR();
})

/**
以上概念简单介绍了jquery的闭包概念,显然闭包不是几句话能讲清楚的
但对于插件的制作来说,只需要知道所有插件的代码必须放在下面的代码内部就可以了
;(function(){
	//填写jquery插件代码
})(jQuery);
**/

10个帮助你创建超棒jQuery插件的小技巧

日期:2012/02/29  来源:GBin1.com

10个帮助你创建超棒jQuery插件的小技巧

这篇文章我们将分享10个技巧帮助你将一个不错的jQuery插件改造成一
个超棒的jQuery插件,很多开发人员都开发了很多不错的jQuery插件,但是对我们这些插件的使用者来说,很多jQuery插件的使用都不是那么直
接和透明。这里的10个技巧能够帮助你将更好的维和和扩展你的jQuery插件。而且对于插件开发来说,如果你有一个非常好的架构,将会给你的开发带来极
大的益处。所以在正式开发前,进过深思熟虑还是非常有必要的。

1. 插件开发需要做到独立

这是jQuery插件开发中最让个伤脑筋的事之一。因为我们需要首先考虑。你的插件应该在不需要额外的配置情况下正常工作。因此最小的缺省初始化你的jQuery插件就应该正常工作,如下:

$("#gbin1-container").wTooltip();

一个非常好的例子就是拥有向前/向后按钮的jQuery幻灯展示插件。
我曾经看到过了一些插件要求你配置div和属性id和class,然后要求你通过插件来参考。这样的配置应该在插件内处理,提供可开关的选项

2. 提供缺省的设置

很少有插件不提供任何的配置设定。和前面观点类似,我们肯定需要提供用户一些选项,这样可以帮助用户自己配置自己需要的效果并且扩展需求,更重要的在于帮助你推广你的插件

var…

阅读更多

纯js实现时间控件(年月日 时分秒)

最近一个需求需要实现年月日 时分秒的时间控件,jquery自带的有datepicker/timepicker,但是总感觉不太好看,于是在网上搜了很多,偶然见到一个,很好很强大,用纯js来实现,共享一下哈 

 

js

—————————————————————————————

var bMoveable = true;
var strFrame;

document.writeln(‘<iframe id=endDateLayer frameborder=0 width=162 height=211 style=”position: absolute;  z-index: 9998; display: none”></iframe>’);
strFrame = ‘<style>’;
strFrame += ‘INPUT.button{BORDER-RIGHT: #63A3E9 1px solid;BORDER-TOP: #63A3E9 1px solid;BORDER-LEFT: #63A3E9 1px solid;’;
strFrame += ‘BORDER-BOTTOM: #63A3E9 1px solid;BACKGROUND-COLOR: #63A3E9;font-family:宋体;}’;
strFrame += ‘TD{FONT-SIZE: 9pt;font-family:宋体;}’;
strFrame += ‘</style>’;
strFrame += ‘<scr’ + ‘ipt>’;
strFrame += ‘var datelayerx,datelayery;’;
strFrame += ‘var bDrag;’;
strFrame += ‘function document.onmousemove()’;
strFrame += ‘{if(bDrag && window.event.button==1)’;
strFrame += ‘ {var DateLayer=parent.document.all.endDateLayer.style;’;
strFrame += ‘  DateLayer.posLeft += window.event.clientX-datelayerx;’;
strFrame += ‘  DateLayer.posTop += window.event.clientY-datelayery;}}’;
strFrame += ‘function DragStart()’;
strFrame += ‘{var DateLayer=parent.document.all.endDateLayer.style;’;
strFrame += ‘ datelayerx=window.event.clientX;’;
strFrame += ‘ datelayery=window.event.clientY;’;
strFrame += ‘ bDrag=true;}’;
strFrame += ‘function DragEnd(){‘;
strFrame += ‘ bDrag=false;}’;
strFrame += ‘</scr’ + ‘ipt>’;
strFrame += ‘<div style=”z-index:9999;position: absolute; left:0; top:0;” onselectstart=”return false”>’;
strFrame += ‘<span id=tmpSelectYearLayer  style=”z-index: 9999;position: absolute;top: 3; left: 19;display: none”></span>’;
strFrame += ‘<span id=tmpSelectMonthLayer  style=”z-index: 9999;position: absolute;top: 3; left: 78;display: none”></span>’;
strFrame += ‘<span id=tmpSelectHourLayer  style=”z-index: 9999;position: absolute;top: 188; left: 35px;display: none”></span>’;
strFrame += ‘<span id=tmpSelectMinuteLayer style=”z-index:9999;position:absolute;top: 188; left: 77px;display: none”></span>’;
strFrame += ‘<span id=tmpSelectSecondLayer style=”z-index:9999;position:absolute;top: 188; left: 119px;display: none”></span>’;
strFrame += ‘<table border=1 cellspacing=0 cellpadding=0 width=142 height=160 bordercolor=#63A3E9 bgcolor=#63A3E9 >’;
strFrame += ‘    <tr><td width=142 height=23  bgcolor=#FFFFFF>’;
strFrame += ‘        <table border=0 cellspacing=1 cellpadding=0 width=158  height=23>’;
strFrame += ‘            <tr align=center >’;
strFrame += ‘                <td width=16 align=center bgcolor=#63A3E9 style=”font-size:12px;cursor: hand;color: #ffffff” ‘;
strFrame += ‘        onclick=”parent.meizzPrevM()” title=”向前翻 1 月” ><b >&lt;</b></td>’;
strFrame += ‘       <td width=60 align=”center” bgcolor=”#63A3E9″ style=”font-size:12px;cursor:hand” ‘;
strFrame += ‘          onmouseover=”style.backgroundColor=\’#aaccf3\'”‘;
strFrame += ‘        onmouseout=”style.backgroundColor=\’#63A3E9\'” ‘;
strFrame += ‘        onclick=”parent.tmpSelectYearInnerHTML(this.innerText.substring(0,4))” ‘;
strFrame += ‘        title=”点击这里选择年份”><span  id=meizzYearHead></span></td>’;
strFrame += ‘       <td width=48 align=”center” style=”font-size:12px;font-color: #ffffff;cursor:hand” ‘;
strFrame += ‘        bgcolor=”#63A3E9″ onmouseover=”style.backgroundColor=\’#aaccf3\'” ‘;
strFrame += ‘        onmouseout=”style.backgroundColor=\’#63A3E9\'” ‘;
strFrame += ‘        onclick=”parent.tmpSelectMonthInnerHTML (this.innerText.length==3 this.innerText.substring(0,1):this.innerText.substring(0,2))”‘;
strFrame += ‘        title=”点击这里选择月份”><span id=meizzMonthHead ></span></td>’;
strFrame += ‘       <td width=16 bgcolor=#63A3E9 align=center style=”font-size:12px;cursor: hand;color: #ffffff” ‘;
strFrame += ‘        onclick=”parent.meizzNextM()” title=”向后翻 1 月” ><b >&gt;</b></td>’;
strFrame += ‘      </tr>’;
strFrame += ‘     </table></td></tr>’;
strFrame += ‘    <tr><td width=142 height=18 >’;
strFrame += ‘     <table border=0 cellspacing=0 cellpadding=2 bgcolor=#63A3E9 ‘ + (bMoveable   ‘onmousedown=”DragStart()” onmouseup=”DragEnd()”‘: ”);
strFrame += ‘    BORDERCOLORLIGHT=#63A3E9 BORDERCOLORDARK=#FFFFFF width=140 height=20  style=”cursor:’ + (bMoveable   ‘move’: ‘default’) + ‘”>’;
strFrame += ‘    <tr><td style=”font-size:12px;color:#ffffff” width=20>&nbsp;日</td>’;
strFrame += ‘<td style=”font-size:12px;color:#FFFFFF” >&nbsp;一</td><td style=”font-size:12px;color:#FFFFFF”>&nbsp;二</td>’;
strFrame += ‘<td style=”font-size:12px;color:#FFFFFF” >&nbsp;三</td><td style=”font-size:12px;color:#FFFFFF” >&nbsp;四</td>’;
strFrame += ‘<td style=”font-size:12px;color:#FFFFFF” >&nbsp;五</td><td style=”font-size:12px;color:#FFFFFF” >&nbsp;六</td></tr>’;
strFrame += ‘</table></td></tr>’;
strFrame += ‘  <tr ><td width=142 height=120 >’;
strFrame += ‘    <table border=1 cellspacing=2 cellpadding=2 BORDERCOLORLIGHT=#63A3E9 BORDERCOLORDARK=#FFFFFF bgcolor=#fff8ec width=140 height=120 >’;
var n = 0;
for (j = 0; j < 5; j++) {
    strFrame += ‘ <tr align=center >’;

    for (i = 0; i < 7; i++) {
        strFrame += ‘<td width=20 height=20 id=meizzDay’ + n + ‘ style=”font-size:12px” onclick=parent.meizzDayClick(this.innerText,0)></td>’;
        n++;
    }
    strFrame += ‘</tr>’;
}
strFrame += ‘      <tr align=center >’;
for (i = 35; i < 37; i++) strFrame += ‘<td width=20 height=20 id=meizzDay’ + i + ‘ style=”font-size:12px”  onclick=”parent.meizzDayClick(this.innerText,0)”></td>’;
strFrame += ‘        <td colspan=5 align=right style=”color:#1478eb”><span onclick=”parent.setNull()” style=”font-size:12px;cursor: hand”‘;
strFrame += ‘         onmouseover=”style.color=\’#ff0000\'” onmouseout=”style.color=\’#1478eb\'” title=”将日期置空”>置空</span>&nbsp;&nbsp;<span onclick=”parent.meizzToday()” style=”font-size:12px;cursor: hand”‘;
strFrame += ‘         onmouseover=”style.color=\’#ff0000\'” onmouseout=”style.color=\’#1478eb\'” title=”当前日期时间”>当前</span>&nbsp;&nbsp;<span style=”cursor:hand” id=evaAllOK onmouseover=”style.color=\’#ff0000\'” onmouseout=”style.color=\’#1478eb\'”  onclick=”parent.closeLayer()” title=”关闭日历”>关闭&nbsp;</span></td></tr>’;
strFrame += ‘    </table></td></tr><tr ><td >’;
strFrame += ‘        <table border=0 cellspacing=1 cellpadding=0 width=100%  bgcolor=#FFFFFF height=22 >’;
strFrame += ‘          <tr bgcolor=”#63A3E9″><td id=bUseTimeLayer width=30  style=”cursor:hand” title=”点击这里启用/禁用时间”‘;
strFrame += ‘    onmouseover=”style.backgroundColor=\’#aaccf3\'” align=center onmouseout=”style.backgroundColor=\’#63A3E9\'”‘;
strFrame += ‘     onclick=”parent.UseTime(this)”>’;
strFrame += ‘ <span></span></td>’;
strFrame += ‘             <td style=”cursor:hand” onclick=”parent.tmpSelectHourInnerHTML(this.innerText.length==3 this.innerText.substring(0,1):this.innerText.substring(0,2))”‘;
strFrame += ‘ onmouseover=”style.backgroundColor=\’#aaccf3\'” onmouseout=”style.backgroundColor=\’#63A3E9\'”‘;
strFrame += ‘ title=”点击这里选择时间” align=center width=42>’;
strFrame += ‘     <span id=meizzHourHead></span></td>’;
strFrame += ‘             <td style=”cursor:hand” onclick=”parent.tmpSelectMinuteInnerHTML(this.innerText.length==3 this.innerText.substring(0,1):this.innerText.substring(0,2))”‘;
strFrame += ‘ onmouseover=”style.backgroundColor=\’#aaccf3\'” onmouseout=”style.backgroundColor=\’#63A3E9\'”‘;
strFrame += ‘ title=”点击这里选择时间” align=center width=42>’;
strFrame += ‘     <span id=meizzMinuteHead></span></td>’;
strFrame += ‘             <td style=”cursor:hand” onclick=”parent.tmpSelectSecondInnerHTML(this.innerText.length==3 this.innerText.substring(0,1):this.innerText.substring(0,2))”‘;
strFrame += ‘ onmouseover=”style.backgroundColor=\’#aaccf3\'” onmouseout=”style.backgroundColor=\’#63A3E9\'”‘;
strFrame += ‘ title=”点击这里选择时间” align=center width=42>’;
strFrame += ‘     <span id=meizzSecondHead></span></td>’;
strFrame += ‘    </tr></table></td></tr></table></div>’;

window.frames.endDateLayer.document.writeln(strFrame);
window.frames.endDateLayer.document.close(); // 解决ie进度条不结束的问题

// ==================================================== WEB 页面显示部分 ======================================================
var outObject;
var outButton; // 点击的按钮

var outDate = “”; // 存放对象的日期
var bUseTime = true; // 是否使用时间
var odatelayer = window.frames.endDateLayer.document.all; // 存放日历对象
var odatelayer = window.endDateLayer.document.all;
// odatelayer.bUseTimeLayer.innerText=”NO”;
bImgSwitch();
odatelayer.bUseTimeLayer.innerHTML = bImg;

function setday(tt, obj) // 主调函数
{
    if (arguments.length > 2) {
        alert(“对不起!傳入本控件的参数太多!”);
        return;
    }
    if (arguments.length == 0) {
        alert(“对不起!您沒有傳回本控件任何参数”);
        return;
    }
    var dads = document.all.endDateLayer.style;
    var th = tt;
    var ttop = tt.offsetTop; // TT控件的定位点高

    var thei = tt.clientHeight; // TT控件本身的高
    var tleft = tt.offsetLeft; // TT控件的定位点宽

    var ttyp = tt.type; // TT控件的类型

    while (tt = tt.offsetParent) {
        ttop += tt.offsetTop;

        tleft += tt.offsetLeft;
    }
    dads.top = (ttyp == “image”)   ttop + thei: ttop + thei + 6;
    dads.left = tleft;
    outObject = (arguments.length == 1)   th: obj;
    outButton = (arguments.length == 1)   null: th; // 设定外部点击的按钮

    // 根据当前输入框的日期显示日历的年月
    var reg = /^(\d+)-(\d{1,2})-(\d{1,2})/; // 不含时间
    var r = outObject.value.match(reg);
    if (r != null) {
        r[2] = r[2] – 1;
        var d = new Date(r[1], r[2], r[3]);
        if (d.getFullYear() == r[1] && d.getMonth() == r[2] && d.getDate() == r[3]) {
            outDate = d;
            parent.meizzTheYear = r[1];
            parent.meizzTheMonth = r[2];
            parent.meizzTheDate = r[3];
        } else {
            outDate = “”;
        }
        meizzSetDay(r[1], r[2] + 1);
    } else {
        outDate = “”;
        meizzSetDay(new Date().getFullYear(), new Date().getMonth() + 1);
    }
    dads.display = ”;

    // 判断初始化时是否使用时间,非严格验证
    if (outObject.value.length > 10) {
        bUseTime = true;
        bImgSwitch();
        odatelayer.bUseTimeLayer.innerHTML = bImg;
        meizzWriteHead(meizzTheYear, meizzTheMonth);
    } else {
        bUseTime = false;
        bImgSwitch();
        odatelayer.bUseTimeLayer.innerHTML = bImg;
        meizzWriteHead(meizzTheYear, meizzTheMonth);
    }

    try {
        event.returnValue = false;
    } catch(e) {
        // 此处排除错误,错误原因暂未找到。
    }
}

var MonHead = new Array(12); // 定义阳历中每个月的最大天数

MonHead[0] = 31;
MonHead[1] = 28;
MonHead[2] = 31;
MonHead[3] = 30;
MonHead[4] = 31;
MonHead[5] = 30;
MonHead[6] = 31;
MonHead[7] = 31;
MonHead[8] = 30;
MonHead[9] = 31;
MonHead[10] = 30;
MonHead[11] = 31;

var meizzTheYear = new Date().getFullYear(); // 定义年的变量的初始值

var meizzTheMonth = new Date().getMonth() + 1; // 定义月的变量的初始值

var meizzTheDate = new Date().getDate(); // 定义日的变量的初始值
var meizzTheHour = new Date().getHours(); // 定义小时变量的初始值

var meizzTheMinute = new Date().getMinutes(); // 定义分钟变量的初始值
var meizzTheSecond = new Date().getSeconds(); // 定义秒变量的初始值

var meizzWDay = new Array(37); // 定义写日期的数组
document.onclick() // 任意点击时关闭该控件 //ie6的情况可以由下面的切换焦点处理代替
{
    with(window.event) {
        if (srcElement != outObject && srcElement != outButton) closeLayer();
    }
}

document.onkeyup() // 按Esc键关闭,切换焦点关闭
{
    if (window.event.keyCode == 27) {
        if (outObject) outObject.blur();
        closeLayer();
    } else if (document.activeElement) {
        if (document.activeElement != outObject && document.activeElement != outButton) {
            closeLayer();
        }
    }
}

function meizzWriteHead(yy, mm, ss) // 往 head 中写入当前的年与月
{
    odatelayer.meizzYearHead.innerText = yy + ” 年”;
    odatelayer.meizzMonthHead.innerText = format(mm) + ” 月”;
    // 插入当前小时、分
    odatelayer.meizzHourHead.innerText =(bUseTime   (meizzTheHour + ” 时”) : “”);
    odatelayer.meizzMinuteHead.innerText = (bUseTime  (meizzTheMinute + ” 分”) : “”);
    odatelayer.meizzSecondHead.innerText = (bUseTime  (meizzTheSecond + ” 秒”) : “”);
}

function tmpSelectYearInnerHTML(strYear) // 年份的下拉框
{
    if (strYear.match(/\D/) != null) {
        alert(“年份输入参数不是数字!”);
        return;
    }
    var m = (strYear)   strYear: new Date().getFullYear();
    if (m < 1000 || m > 9999) {
        alert(“年份值不在 1000 到 9999 之间!”);
        return;
    }
    var n = m – 50;
    if (n < 1000) n = 1000;
    if (n + 101 > 9999) n = 9974;
    var s = “&nbsp;<select name=tmpSelectYear style=’font-size: 12px’ “;
    s += “onblur=’document.all.tmpSelectYearLayer.style.display=\”none\”‘ “;
    s += “onchange=’document.all.tmpSelectYearLayer.style.display=\”none\”‘ “;
    s += “parent.meizzTheYear = this.value; parent.meizzSetDay(parent.meizzTheYear,parent.meizzTheMonth)’>\r\n”;
    var selectInnerHTML = s;
    for (var i = n; i < n + 101; i++) {
        if (i == m) {
            selectInnerHTML += “<option value='” + i + “‘ selected>” + i + “年” + “</option>\r\n”;
        } else {
            selectInnerHTML += “<option value='” + i + “‘>” + i + “年” + “</option>\r\n”;
        }
    }
    selectInnerHTML += “</select>”;
    odatelayer.tmpSelectYearLayer.style.display = “”;
    odatelayer.tmpSelectYearLayer.innerHTML = selectInnerHTML;
    odatelayer.tmpSelectYear.focus();
}

function tmpSelectMonthInnerHTML(strMonth) // 月份的下拉框
{
    if (strMonth.match(/\D/) != null) {
        alert(“月份输入参数不是数字!”);
        return;
    }
    var m = (strMonth)   strMonth: new Date().getMonth() + 1;
    var s = “&nbsp;&nbsp;&nbsp;<select name=tmpSelectMonth style=’font-size: 12px’ “;
    s += “onblur=’document.all.tmpSelectMonthLayer.style.display=\”none\”‘ “;
    s += “onchange=’document.all.tmpSelectMonthLayer.style.display=\”none\”‘ “;
    s += “parent.meizzTheMonth = this.value; parent.meizzSetDay(parent.meizzTheYear,parent.meizzTheMonth)’>\r\n”;
    var selectInnerHTML = s;
    for (var i = 1; i < 13; i++) {
        if (i == m) {
            selectInnerHTML += “<option value='” + i + “‘ selected>” + i + “月” + “</option>\r\n”;
        } else {
            selectInnerHTML += “<option value='” + i + “‘>” + i + “月” + “</option>\r\n”;
        }
    }
    selectInnerHTML += “</select>”;
    odatelayer.tmpSelectMonthLayer.style.display = “”;
    odatelayer.tmpSelectMonthLayer.innerHTML = selectInnerHTML;
    odatelayer.tmpSelectMonth.focus();
}

/** *** 增加 小时、分钟 ** */
function tmpSelectHourInnerHTML(strHour) // 小时的下拉框
{
    if (!bUseTime) {
        return;
    }

    if (strHour.match(/\D/) != null) {
        alert(“小时参数不是数字!”);
        return;
    }
    var m = (strHour)   strHour: new Date().getHours();
    var s = “<select name=tmpSelectHour style=’font-size: 12px’ “;
     s +=”onblur=’document.all.tmpSelectHourLayer.style.display=\”none\”‘ “;
     s +=”onchange=’document.all.tmpSelectHourLayer.style.display=\”none\”‘ “;
  s += “parent.meizzTheHour = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute);’>\r\n”;
    var selectInnerHTML = s;
    for (var i = 0; i < 24; i++) {
        if (i == m) {
            selectInnerHTML += “<option value='” + i + “‘ selected>” + i + “</option>\r\n”;
        } else {
            selectInnerHTML += “<option value='” + i + “‘>” + i + “</option>\r\n”;
        }
    }
    selectInnerHTML += “</select>”;
    odatelayer.tmpSelectHourLayer.style.display = “”;
    odatelayer.tmpSelectHourLayer.innerHTML = selectInnerHTML;
    odatelayer.tmpSelectHour.focus();
}

function tmpSelectMinuteInnerHTML(strMinute) // 分钟的下拉框
{
    if (!bUseTime) {
        return;
    }

    if (strMinute.match(/\D/) != null) {
        alert(“分钟输入数字不是数字!”);
        return;
    }
    var m = (strMinute)   strMinute: new Date().getMinutes();
    var s = “<select name=tmpSelectMinute style=’font-size: 12px’ “;
     s +=”onblur=’document.all.tmpSelectMinuteLayer.style.display=\”none\”‘ “;
  s +=”onchange=’document.all.tmpSelectMinuteLayer.style.display=\”none\”‘ “;
  s += “parent.meizzTheMinute = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute);’>\r\n”;
    var selectInnerHTML = s;
    for (var i = 0; i < 60; i++) {
        if (i == m) {
            selectInnerHTML += “<option value='” + i + “‘ selected>” + i + “</option>\r\n”;
        } else {
            selectInnerHTML += “<option value='” + i + “‘>” + i + “</option>\r\n”;
        }
    }
    selectInnerHTML += “</select>”;
    odatelayer.tmpSelectMinuteLayer.style.display = “”;
    odatelayer.tmpSelectMinuteLayer.innerHTML = selectInnerHTML;
    odatelayer.tmpSelectMinute.focus();
}

function tmpSelectSecondInnerHTML(strSecond) // 秒的下拉框
{
    if (!bUseTime) {
        return;
    }

    if (strSecond.match(/\D/) != null) {
        alert(“秒钟输入不是数字!”);
        return;
    }
    var m = (strSecond)   strSecond: new Date().getMinutes();
    var s = “<select name=tmpSelectSecond style=’font-size: 12px’ “;
     s +=”onblur=’document.all.tmpSelectSecondLayer.style.display=\”none\”‘ “;
  s +=”onchange=’document.all.tmpSelectSecondLayer.style.display=\”none\”‘ “;
  s += “parent.meizzTheSecond = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute,parent.meizzTheSecond);’>\r\n”;
    var selectInnerHTML = s;
    for (var i = 0; i < 60; i++) {
        if (i == m) {
            selectInnerHTML += “<option value='” + i + “‘selected>” + i + “</option>\r\n”;
        } else {
            selectInnerHTML += “<option value='” + i + “‘>” + i + “</option>\r\n”;
        }
    }
    selectInnerHTML += “</select>”;
    odatelayer.tmpSelectSecondLayer.style.display = “”;
    odatelayer.tmpSelectSecondLayer.innerHTML = selectInnerHTML;
    odatelayer.tmpSelectSecond.focus();
}

function closeLayer() // 这个层的关闭
{
    var o = document.getElementById(“endDateLayer”);
    if (o != null) {
        o.style.display = “none”;
    }
}

function showLayer() // 这个层的关闭
{
    document.all.endDateLayer.style.display = “”;
}

function IsPinYear(year) // 判断是否闰平年
{
    if (0 == year % 4 && ((year % 100 != 0) || (year % 400 == 0)))
     return true;
    else{
     return false;
    }
}

function GetMonthCount(year, month) // 闰年二月为29天
{
    var c = MonHead[month – 1];
    if ((month == 2) && IsPinYear(year))

    c++;
    return c;
}

function GetDOW(day, month, year) // 求某天的星期几
{
    var dt = new Date(year, month – 1, day).getDay() / 7;
    return dt;
}

function meizzPrevY() // 往前翻 Year
{
    if (meizzTheYear > 999 && meizzTheYear < 10000) {
        meizzTheYear–;
    } else {
        alert(“年份超出范围(1000-9999)!”);
    }
    meizzSetDay(meizzTheYear, meizzTheMonth);
}
function meizzNextY() // 往后翻 Year
{
    if (meizzTheYear > 999 && meizzTheYear < 10000) {
        meizzTheYear++;
    } else {
        alert(“年份超出范围(1000-9999)!”);
    }
    meizzSetDay(meizzTheYear, meizzTheMonth);
}
function setNull() {
    outObject.value = ”;
    closeLayer();
}
function meizzToday() // Today Button
{
    parent.meizzTheYear = new Date().getFullYear();
    parent.meizzTheMonth = new Date().getMonth() + 1;
    parent.meizzTheDate = new Date().getDate();
    parent.meizzTheHour = new Date().getHours();
    parent.meizzTheMinute = new Date().getMinutes();
    parent.meizzTheSecond = new Date().getSeconds();
    var meizzTheSecond = new Date().getSeconds();

    if (meizzTheMonth < 10 && meizzTheMonth.length < 2) // 格式化成两位数字
     {
        parent.meizzTheMonth = “0” + parent.meizzTheMonth;
     }
    if (parent.meizzTheDate < 10 && parent.meizzTheDate.length < 2) //格式化成两位数字
     {
        parent.meizzTheDate = “0” + parent.meizzTheDate;
    }
    // meizzSetDay(meizzTheYear,meizzTheMonth);
    if (outObject) {
        if (bUseTime) {
            outObject.value = parent.meizzTheYear + “-” + format(parent.meizzTheMonth) + “-” + format(parent.meizzTheDate) + ” ” + format(parent.meizzTheHour) + “:” + format(parent.meizzTheMinute) + “:” + format(parent.meizzTheSecond);
            // 注:在这里你可以输出改成你想要的格式
        } else {
            outObject.value = parent.meizzTheYear + “-” + format(parent.meizzTheMonth) + “-” + format(parent.meizzTheDate); // 注:在这里你可以输出改成你想要的格式
        }
    }
    closeLayer();
}
function meizzPrevM() // 往前翻月份
{
    if (meizzTheMonth > 1) {
        meizzTheMonth–;
    } else {
        meizzTheYear –;
        meizzTheMonth = 12;
    }
    meizzSetDay(meizzTheYear, meizzTheMonth);
}
function meizzNextM() // 往后翻月份
{
    if (meizzTheMonth == 12) {
        meizzTheYear++;
        meizzTheMonth = 1
    } else

    {
        meizzTheMonth++
    }
    meizzSetDay(meizzTheYear, meizzTheMonth);
}

// TODO: 整理代码
function meizzSetDay(yy, mm) // 主要的写程序**********
{
    meizzWriteHead(yy, mm);
    // 设置当前年月的公共变量为传入值

    meizzTheYear = yy;
    meizzTheMonth = mm;

    for (var i = 0; i < 37; i++) {
        meizzWDay[i] = “”;
    }; // 将显示框的内容全部清空

    var day1 = 1,
    day2 = 1,
    firstday = new Date(yy, mm – 1, 1).getDay();

    // 某月第一天的星期几

    for (i = 0; i < firstday; i++){
     meizzWDay[i] = GetMonthCount(mm == 1   yy -1 : yy, mm == 1   12 : mm – 1) – firstday + i + 1; // 上个月的最后几天
    }

    for (i = firstday; day1 < GetMonthCount(yy, mm) + 1; i++) {

        meizzWDay[i] = day1;
        day1++;
    }
    for (i = firstday + GetMonthCount(yy, mm); i < 37; i++) {
        meizzWDay[i]= day2;
        day2++;
    }
    for (i = 0; i < 37; i++) {
        var da = eval(“odatelayer.meizzDay” + i) // 书写新的一个月的日期星期排列

        if (meizzWDay[i] != “”) {
            // 初始化边框
            da.borderColorLight = “#63A3E9”;
            da.borderColorDark = “#63A3E9”;
            da.style.color = “#1478eb”;
            if (i < firstday) // 上个月的部分
            {
                da.innerHTML = “<b><font color=#BCBABC>” + meizzWDay[i] +”</font></b>”;
                da.title = (mm == 1   12 : mm – 1) + “月” + meizzWDay[i] + “日”;
                da.onclick = Function(“meizzDayClick(this.innerText,-1)”);

                if (!outDate) {
                    da.style.backgroundColor = ((mm == 1   yy – 1 : yy) == new Date().getFullYear() && (mm == 1   12 : mm – 1) == new Date().getMonth() + 1 && meizzWDay[i] == new Date().getDate())   “#5CEFA0”: “#f5f5f5”;
                } else {
                    da.style.backgroundColor = ((mm == 1   yy – 1 : yy) == outDate.getFullYear() && (mm == 1   12 : mm – 1) == outDate.getMonth() + 1 && meizzWDay[i] == outDate.getDate())   “#84C1FF”: (((mm == 1   yy – 1 : yy) == new Date().getFullYear() && (mm == 1   12 : mm – 1) == new Date().getMonth() + 1 && meizzWDay[i] == new Date().getDate())   “#5CEFA0”: “#f5f5f5”);
                    // 将选中的日期显示为凹下去
                    if ((mm == 1   yy – 1 : yy) == outDate.getFullYear() && (mm == 1   12 : mm – 1) == outDate.getMonth() + 1 && meizzWDay[i] == outDate.getDate()) {
                        da.borderColorLight = “#FFFFFF”;
                        da.borderColorDark = “#63A3E9”;
                    }
                }
            } else if (i >= firstday + GetMonthCount(yy, mm)) // 下个月的部分
            {
                da.innerHTML = “<b><font color=#BCBABC>” + meizzWDay[i] + “</font></b>”;
                da.title = (mm == 12   1 : mm + 1) + “月” + meizzWDay[i] + “日”;
                da.onclick = Function(“meizzDayClick(this.innerText,1)”);
                if (!outDate) da.style.backgroundColor = ((mm == 12   yy + 1 : yy) == new Date().getFullYear() && (mm == 12   1 : mm + 1) == new Date().getMonth() + 1 && meizzWDay[i] == new Date().getDate())   “#5CEFA0”: “#f5f5f5”;
                else {
                    da.style.backgroundColor = ((mm == 12   yy + 1 : yy) == outDate.getFullYear() && (mm == 12   1 : mm + 1) == outDate.getMonth() + 1 && meizzWDay[i] == outDate.getDate())   “#84C1FF”: (((mm == 12   yy + 1 : yy) == new Date().getFullYear() && (mm == 12   1 : mm + 1) == new Date().getMonth() + 1 && meizzWDay[i] == new Date().getDate())  

                    “#5CEFA0”: “#f5f5f5”);
                    // 将选中的日期显示为凹下去
                    if ((mm == 12   yy + 1 : yy) == outDate.getFullYear() && (mm == 12   1 : mm + 1) == outDate.getMonth() + 1 && meizzWDay[i] == outDate.getDate()) {
                        da.borderColorLight = “#FFFFFF”;
                        da.borderColorDark = “#63A3E9”;
                    }
                }
            } else // 本月的部分

            {
                da.innerHTML = “<b>” + meizzWDay[i] + “</b>”;
                da.title = mm + “月” + meizzWDay[i] + “日”;
                da.onclick = Function(“meizzDayClick(this.innerText,0)”); // 给td赋予onclick事件的处理

                // 如果是当前选择的日期,则显示亮蓝色的背景;如果是当前日期,则显示暗黄色背景
                if (!outDate){
                 da.style.backgroundColor = (yy == new Date().getFullYear()&& mm == new Date().getMonth() + 1 && meizzWDay[i] == new Date().getDate())   “#5CEFA0”: “#f5f5f5”;
                } 
             else {
                      da.style.backgroundColor = (yy == outDate.getFullYear() && mm == outDate.getMonth() + 1 && meizzWDay[i] == outDate.getDate())   “#84C1FF”: ((yy == new Date().getFullYear() && mm == new Date().getMonth() + 1 && meizzWDay[i] == new Date().getDate())   “#5CEFA0”: “#f5f5f5”);
                      // 将选中的日期显示为凹下去
                      if (yy == outDate.getFullYear() && mm == outDate.getMonth() + 1 && meizzWDay[i] == outDate.getDate()) {
                          da.borderColorLight = “#FFFFFF”;
                          da.borderColorDark = “#63A3E9”;
                      }
                  }
            }
            da.style.cursor = “hand”;
        } else {

            da.innerHTML = “”;
            da.style.backgroundColor = “”;
            da.style.cursor = “default”;
        }
    }
}

function meizzDayClick(n, ex) // 点击显示框选取日期,主输入函数
// *************
{
    parent.meizzTheDate = n;
    var yy = meizzTheYear;
    var mm = parseInt(meizzTheMonth) + ex; // ex表示偏移量,用于选择上个月份和下个月份的日期
    var hh = meizzTheHour;
    var mi = meizzTheMinute;
    var se = meizzTheSecond;
    // 判断月份,并进行对应的处理

    if (mm < 1) {
        yy–;
        mm = 12 + mm;
    } else if (mm > 12) {
        yy++;
        mm = mm – 12;
    }

    if (mm < 10) {
        mm = “0” + mm;
    }
    if (hh < 10) {
        hh = “0” + hh;
    } // 时
    if (mi < 10) {
        mi = “0” + mi;
    } // 分
    if (se < 10) {
        se = “0” + se;
    } // 秒

    if (outObject) {
        if (!n) { // outObject.value=””;
            return;
        }
        if (n < 10) {
            n = “0” + n;
        }

        WriteDateTo(yy, mm, n, hh, mi, se);

        closeLayer();
        if (bUseTime) {
            try {
                outButton.click();
            } catch(e) {
                setday(outObject);
            }
        }
    } else {
        closeLayer();
        alert(“您所要输出的控件对象并不存在!”);
    }
    closeLayer();
}

function format(n) // 格式化数字为两位字符表示
{
    var m = new String();
    var tmp = new String(n);
    if (n < 10 && tmp.length < 2) {
        m = “0” + n;
    } else {
        m = n;
    }
    return m;
}

function evaSetTime() // 设置用户选择的小时、分钟
{
    odatelayer.meizzHourHead.innerText = meizzTheHour + ” 时”;
    odatelayer.meizzMinuteHead.innerText = meizzTheMinute + ” 分”;
    odatelayer.meizzSecondHead.innerText = meizzTheSecond + ” 秒”;
    WriteDateTo(meizzTheYear, meizzTheMonth, meizzTheDate, meizzTheHour, meizzTheMinute, meizzTheSecond);
}

function evaSetTimeNothing() // 设置时间控件为空
{
    odatelayer.meizzHourHead.innerText = “”;
    odatelayer.meizzMinuteHead.innerText = “”;
    odatelayer.meizzSecondHead.innerText = “”;
    WriteDateTo(meizzTheYear, meizzTheMonth, meizzTheDate, meizzTheHour, meizzTheMinute, meizzTheSecond);
}

function evaSetTimeNow() // 设置时间控件为当前时间
{
    odatelayer.meizzHourHead.innerText = new Date().getHours() + ” 时”;
    odatelayer.meizzMinuteHead.innerText = new Date().getMinutes() + ” 分”;
    odatelayer.meizzSecondHead.innerText = new Date().getSeconds() + ” 秒”;
    meizzTheHour = new Date().getHours();
    meizzTheMinute = new Date().getMinutes();
    meizzTheSecond = new Date().getSeconds();
    WriteDateTo(meizzTheYear, meizzTheMonth, meizzTheDate, meizzTheHour, meizzTheMinute, meizzTheSecond);
}

function UseTime(ctl) {
    bUseTime = !bUseTime;
    if (bUseTime) {
        bImgSwitch();
        ctl.innerHTML = bImg;
        evaSetTime(); // 显示时间,用户原来选择的时间
        // evaSetTimeNow(); //显示当前时间
    } else {
        bImgSwitch();
        ctl.innerHTML = bImg;
        evaSetTimeNothing();
    }
}

function WriteDateTo(yy, mm, n, hh, mi, se) {
    if (bUseTime) {
        outObject.value = yy + “-” + format(mm) + “-” + format(n) + ” ” + format(hh) + “:” + format(mi) + “:” + format(se); //注:在这里你可以输出改成你想要的格式
    } else {
        outObject.value = yy + “-” + format(mm) + “-” + format(n); // 注:在这里你可以输出改成你想要的格式
    }
}

function bImgSwitch() {
    if (bUseTime) {
        bImg = “关闭”;
    } else {
        bImg = “开启”;
    }
}

 

—————————————————————————————

html
—————————————————————————————

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
 <HEAD>
 <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
  <TITLE> New Document </TITLE>
 <script language=”javascript” src=”../js/time.js”></script>
 </HEAD>

 <BODY>
  <input  id=”startTime” type=”text” name=”startTime” Width=”200px” onclick=”setday(this)”>
 </BODY>
</HTML>

 

参考链接:http://zjsky1989.blog.163.com/blog/static/81587848201122493849324/

             http://blog.csdn.net/huxiweng/article/details/7270852

  • 大小: 3.3 KB
  • 大小: 3.7 KB

前端jquery页面内容归类

function unittest(){

       var inpts=$(“:text”); 

    var arr=document.getElementsByTagName(“input”);

    var ids=””;

    var answer=””;

    var scores=””;

    var lstid=null;

    $.each(inpts,function(i,n){

     if (i!=0)

      {

       if (lstid!=$(n).attr(“name”))

       {

        ids+=”,”+$(n).attr(“name”);

        answer+=”,”+$(n).val();

       }

       else

       {

        answer+=”_”+$(n).val();

       }

      }

     else

      {

      ids+=$(n).attr(“name”);

      answer+=$(n).val();

      }

    

     lstid=$(n).attr(“name”);

    });

    $.ajax({

    type :”get”,

    url:”unitTest!saveunittest.action”,

    data:encodeURI(encodeURI(“id=”+ids+”&testAnswer=”+answer)),

    contType :”application/json; charset=utf-8″,

    dataType:”html”,

    success:function(errorIds){

     alert(errorIds);

     var ss= errorIds.split(“_”);

     if(ss.length>0){

      for(var i=0;i<ss.length-1;i++){

       $(“#mydiv” + ss).attr(“id”, “redio”);

       }

       alert(“你的客观题得分是:”+ss[ss.length-1]);

      }else{

       alert(“请认真填写!”);

      }

     },

    

    error:function(errorIds){

     alert(“error”);

  }

   });

};

JQ50个实用代码段(转)

1. 如何修改jQuery默认编码(例如默认UTF-8改成改GB2312):

   $.ajaxSetup({ ajaxSettings:{ contentType:”application/x-www-form-urlencoded;chartset=GB2312″} });

2. 解决jQuery, prototype共存,$全局变量冲突问题:

  <script src=”prototype.js”></script>

  <script src=”http://blogbeta.blueidea.com/jquery.js”></script>

  <script   type=”text/javascript”>   

    jQuery.noConflict();

  </script>

  注意:一定要先引入prototype.js 再引入jquery.js,先后顺序不可错。

3. jQuery 判断元素上是否绑定了事件

  //jQuery event封装支持判断元素上是否绑定了事件,此方法只适用于jQuery绑定的事件

  var $events = $(“#foo”).data(“events”);

  if( $events && $events[“click”] ){  //your code}

4. 如何使用jQuery来切换样式表

  //找出你希望切换的媒体类型(media-type),然后把href设置成新的样式表。

  $(‘link[media=’screen’]’).attr(‘href’,’alternative.css’);

5. 如何限制选择范围(基于优化目的):

  //尽可能使用标签名来作为类名的前缀,这样jQuery就不需要花费更多的时间来搜索你想要的元素。还要记住的一点是,针对于你的页面上  的元素的操作越具体化,就越能降

低执行和搜索的时间。

  var in_stock = $(‘#shopping_cart_items input.is_in_stock’);

  <ul id=”shopping_cart_items”>  

     <li><input type=”radio” value=”Item-X” name=”item” class=”is_in_stock” /> Item X</li>  

     <li><input type=”radio” value=”Item-Y” name=”item” class=”3-5_days” /> Item Y</li>  

     <li><input type=”radio” value=”Item-Z” name=”item” class=”unknown” /> Item Z</li>

  </ul>

6. 如何正确地使用toggleClass:

  //切换(toggle)类允许你根据某个类的是否存在来添加或是删除该类。这种情况下有些开发者使用:

  a.hasClass(‘blueButton’)   a.removeClass(‘blueButton’) : a.addClass(‘blueButton’);

  //toggleClass允许你使用下面的语句来很容易地做到这一点a.toggleClass(‘blueButton’);

7. 如何设置IE特有的功能:

  if ($.browser.msie) {// Internet Explorer就是个虐待狂}

8. 如何使用jQuery来代替一个元素:

  $(‘#thatdiv’).replaceWith(‘fnuh’);

9. 如何验证某个元素是否为空:

  //方法一if (! $(‘#keks’).html()) {//什么都没有找到;}

  //方法二if ($(‘#keks’).is(“:empty”)) {//什么都没有找到;}

10. 如何从一个未排序的集合中找出某个元素的索引号

  $(“ul > li”).click(function () { 

   var index = $(this).prevAll().length; });

   //prevAll([expr]): 查找当前元素之前所有的同辈元素

   补充:查找同一类元素可以在prevAll()里设定。

11. 如何把函数绑定到事件上:

  //方法一$(‘#foo’).click(function(event)

    { alert(‘User clicked on “foo.”‘); });

  //方法二, 支持动态传参$(‘#foo’).bind(‘click’, {test1:”abc”, test2:”123″},

    function(event) {   alert(‘User clicked on “foo.”‘ + event.data.test1 + event.data.test2 ); });

12. 如何追加或是添加html到元素中:

  $(‘#lal’).append(‘sometext’);

13. 在创建元素时,如何使用对象字面量(literal)来定义属性

  var e = $(“”, { href: “#”, class: “a-class another-class”, title: “…” });

14. 如何使用多个属性来进行过滤

  //在使用许多相类似的有着不同类型的input元素时,这种基于精确度的方法很有用

   var elements = $(‘#someid input[type=sometype][value=somevalue]’).get();

15. 如何使用jQuery来预加载图像:

jQuery.preloadImages = function() {  

   for(var i = 0; i < arguments.length; i++) {   

  $(“<img />”).attr(‘src’, arguments[i]);   }};

    //用法 $.preloadImages(‘image1.gif’, ‘/path/to/image2.png’, ‘some/image3.jpg’);

16. 如何为任何与选择器相匹配的元素设置事件处理程序:

  $(‘button.someClass’).live(‘click’, someFunction); 注意,在jQuery 1.4.2中,delegate和undelegate选项被引入代替live,因为它们提供了更好的上下文支持

  //例如,就table来说,以前你会用$(“table”).each(function(){   $(“td”, this).live(“hover”, function(){     $(this).toggleClass(“hover”);   }); });   

  //现在用 $(“table”).delegate(“td”, “hover”, function(){   $(this).toggleClass(“hover”); });

17. 如何找到一个已经被选中的option元素:

  $(‘#someElement’).find(‘option:selected’);

18. 如何隐藏一个包含了某个值文本的元素:

  $(“p.value:contains(‘thetextvalue’)”).hide();

19. 如何创建嵌套的过滤器:

  //允许你减少集合中的匹配元素的过滤器,只剩下那些与给定的选择器匹配的部分。

  在这种情况下,查询删除了任何没(:not)有(:has)包含class为“selected” (.selected)的子节点。.filter(“:not(:has(.selected))”)

20. 如何检测各种浏览器:

  检测Safari (if( $.browser.safari)), 

  检测IE6及之后版本 (if ($.browser.msie && $.browser.version > 6 )), 

  检测IE6及之前版本 (if ($.browser.msie && $.browser.version <= 6 )), 

  检测FireFox 2及之后版本 (if ($.browser.mozilla && $.browser.version >= ‘1.8’ ))

21. 任何使用has()来检查某个元素是否包含某个类或是元素:

  //jQuery 1.4.*包含了对这一has方法的支持。该方法找出某个元素是否包含了其他另一个元素类或是其他任何的你正在查找并要在其之上进行操作的东东。

  $(“input”).has(“.email”).addClass(“email_icon”);

22. 如何禁用右键单击上下文菜单:

  $(document).bind(‘contextmenu’,function(e){   return false; });

23. 如何定义一个定制的选择器

  $.expr[‘:’].mycustomselector = function(element, index, meta, stack){ // element- 一个DOM元素 // index – 栈中的当前循环索引 // meta – 有关选择器的元数据 

  // stack – 要循环的所有元素的栈 // 如果包含了当前元素就返回true // 如果不包含当前元素就返回false };

  // 定制选择器的用法:$(‘.someClasses:test’).doSomething();

24. 如何检查某个元素是否存在

  if ($(‘#someDiv’).length) { //万岁!!!它存在…… }

25. 如何使用jQuery来检测右键和左键的鼠标单击两种情况:

  $(“#someelement”).live(‘click’, function(e) {  

    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {      

      alert(“Left Mouse Button Clicked”);     }

    else if(e.button == 2) {   alert(“Right Mouse Button Clicked”);     }});

26. 如何替换串中的词

  var el = $(‘#id’);

  el.html(el.html().replace(/word/ig, ”));

27. 如何在一段时间之后自动隐藏或关闭元素(支持1.4版本):

  //这是1.3.2中我们使用setTimeout来实现的方式 setTimeout(function() { $(‘.mydiv’).hide(‘blind’, {}, 500) }, 5000);

  //而这是在1.4中可以使用delay()这一功能来实现的方式(这很像是休眠) $(“.mydiv”).delay(5000).hide(‘blind’, {}, 500);

28. 如何把已创建的元素动态地添加到DOM中:

  var newDiv = $(‘<div></div>’);

  newDiv.attr(‘id’,’myNewDiv’).appendTo(‘body’);

29. 如何限制“Text-Area”域中的字符的个数:

  jQuery.fn.maxLength = function(max){  

    return this.each(function(){     

    var type = this.tagName.toLowerCase();      

    var inputType = this.type      this.type.toLowerCase() : null;      

     if(type == “input” && inputType == “text” || inputType == “password”){   //Apply the standard maxLength             this.maxLength = max;         } else

    if(type == “textarea”){            this.onkeypress = function(e){                 var ob = e || event;                 var keyCode = ob.keyCode;         

    var hasSelection = document.selection  document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;                      

  return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);      

      };       this.onkeyup = function(){   

        if(this.value.length > max){this.value = this.value.substring(0,max);}};});};

  //用法 $(‘#mytextarea’).maxLength(500);

30. 如何jQuery注册和禁用jQuery全局事件

  //jQuery注册ajax全局事件ajaxStart,ajaxStop:$(document).ajaxStart(function(){

    $(“#background,#progressBar”).show();}).ajaxStop(function(){        $(“#background,#progressBar”).hide();});

  //ajax请求禁用全局事件:$.ajax() 有个参数global (默认: true) 是否触发全局 AJAX 事件.设置为 false 将不会触发全局 AJAX   事件,如 ajaxStart 或 ajaxStop 可用

于控制不同的 Ajax 事件。

31. 如何在jQuery中克隆一个元素:

  var cloned = $(‘#somediv’).clone();

32. 在jQuery中如何测试某个元素是否可见

  if($(element).is(‘:visible’)) { //该元素是可见的 }

33. 如何把一个元素放在屏幕的中心位置:

  jQuery.fn.center = function () {   

     return this.each(function(){   

       $(this).css({position:’absolute’,top, ( $(window).height() – this.height() ) / 2 + $(window).scrollTop() + ‘px’, left, ( $(window).width() –         

      this.width() ) / 2 + $(window).scrollLeft() + ‘px’    });  });

    }

  //这样来使用上面的函数:  $(element).center();

34. 如何把有着某个特定名称的所有元素的值都放到一个数组中:

  var arrInputValues = new Array();

  $(“input[name=’xxx’]”).each(function(){ arrInputValues.push($(this).val());});

35. 如何从元素中除去HTML

  (function($) { $.fn.stripHtml = function() {

      var regexp = /<(“[^”]*”|'[^’]*’|[^'”>])*>/gi;   

      this.each(function() { $(this).html( $(this).html().replace(regexp,”) ); }); 

     return $(this); } })(jQuery);

  //用法: $(‘p’).stripHtml();

36. 如何使用closest来取得父元素:

  $(‘#searchBox’).closest(‘div’);

37. 如何使用Firebug和Firefox来记录jQuery事件日志:

  // 允许链式日志记录jQuery.log = jQuery.fn.log = function (msg) {f (console){console.log(“%s: %o”, msg, this);} return this; };

  // 用法: $(‘#someDiv’).hide().log(‘div hidden’).addClass(‘someClass’); 

38. 如何强制在弹出窗口中打开链接:

  $(‘a.popup’).live(‘click’, function(){

    var newwindow = window.open($(this).attr(‘href’),”,’height=200,width=150′);   

    if (window.focus) {            newwindow.focus();   }   

    return false;});

39. 如何强制在新的选项卡中打开链接:

  $(‘a.newTab’).live(‘click’, function(){var newwindow=window.open(this.href);$(this).target = “_blank”; return false; });

40. 在jQuery中如何使用.siblings()来选择同辈元素

  // 不这样做 $(‘#nav li’).click(function(){ $(‘#nav li’).removeClass(‘active’); $(this).addClass(‘active’); });

  //替代做法是 $(‘#nav li’).click(function(){$(this).addClass(‘active’).siblings().removeClass(‘active’); });

41. 如何切换页面上的所有复选框:

  var tog = false; // 或者为true,如果它们在加载时为被选中状态的话

  $(‘a’).click(function() { $(“input[type=checkbox]”).attr(“checked”,!tog); tog = !tog;});

42. 如何基于一些输入文本来过滤一个元素列表:

  //如果元素的值和输入的文本相匹配的话,该元素将被返回 $(‘.someClass’).filter(function() {return $(this).attr(‘value’) == $(‘input#someId’).val(); })

43. 如何获得鼠标垫光标位置x和y

  $(document).ready(function() { $(document).mousemove(function(e){ $(‘#XY’).html(“X Axis :” + e.pageX + “| Y Axis ” + e.pageY);});});

44. 如何扩展String对象的方法

  $.extend(String.prototype, {   

      isPositiveInteger:function(){return (new RegExp(/^[1-9]\d*$/).test(this)); },

      isInteger:function(){ return (new RegExp(/^\d+$/).test(this)); },

      isNumber: function(value, element) {return (new RegExp(/^- ( :\d+|\d{1,3}( :,\d{3})+)( :\.\d+) $/).test(this));},

      trim:function(){ return this.replace(/(^\s*)|(\s*$)|\r|\n/g, “”);        },

      trans:function() {return this.replace(/&lt;/g, ‘<‘).replace(/&gt;/g,’>’).replace(/&quot;/g, ‘”‘); },

      replaceAll:function(os, ns) { return this.replace(new RegExp(os,”gm”),ns); },

      skipChar:function(ch) {if (!this || this.length===0) {return ”;}if (this.charAt(0)===ch) {return this.substring(1).skipChar(ch);}return this;},       

      isValidPwd:function() {return (new RegExp(/^([_]|[a-zA-Z0-9]){6,32}$/).test(this));},

      isValidMail:function(){return(new RegExp (/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(this.trim()));},             

      isSpaces:function() { for(var i=0; i<this.length; i+=1) {var ch = this.charAt(i); if (ch!=’ ‘&& ch!=”\n” && ch!=”\t” && ch!=”\r”) {return false;}}     

         return true;},       

      isPhone:function() { return (new RegExp(/(^([0-9]{3,4}[-]) \d{3,8}(-\d{1,6}) $)|(^\([0-9]{3,4}\)\d{3,8}(\(\d{1,6}\)) $)|(^\d{3,8}$)/).test(this));},   

      isUrl:function(){ return (new RegExp(/^[a-zA-z]+:\/\/([a-zA-Z0-9\-\.]+)([-\w .\/ %&=:]*)$/).test(this)); },            

      isExternalUrl:function(){ return this.isUrl() && this.indexOf(“://”+document.domain) == -1; } });

45. 如何规范化写jQuery插件:

  (function($){ $.fn.extend({ pluginOne: function(){ return this.each(function(){// my code }); },

   pluginTwo: function(){ return this.each(function(){// my code});  }});})(jQuery);

46. 如何检查图像是否已经被完全加载进来

  $(‘#theImage’).attr(‘src’, ‘image.jpg’).load(function() {alert(‘This Image Has Been Loaded’); });

47. 如何使用jQuery来为事件指定命名空间:

  //事件可以这样绑定命名空间 $(‘input’).bind(‘blur.validation’, function(e){   // … });

  //data方法也接受命名空间 $(‘input’).data(‘validation.isValid’, true);

48. 如何检查cookie是否启用

  var dt = new Date();

  dt.setSeconds(dt.getSeconds() + 60);

  document.cookie = “cookietest=1; expires=” + dt.toGMTString();

  var cookiesEnabled = document.cookie.indexOf(“cookietest=”) != -1; if(!cookiesEnabled) {   //没有启用cookie }

49. 如何让cookie过期:

  var date = new Date();

  date.setTime(date.getTime() + (x * 60 * 1000));

  $.cookie(‘example’, ‘foo’, { expires: date });

50. 如何使用一个可点击的链接来替换页面中任何的URL

  $.fn.replaceUrl = function() {  

   var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@) (\S+)(:[0-9]+) (\/|\/([\w#!:. +=&%@!\-\/])) )/gi;   

    return this.each(function() {$(this).html( $(this).html().replace(regexp,'<a href=”$1″>$1</a>’)); });}

  //用法 $(‘p’).replaceUrl();

用jquery结合json做一个二级联动下拉菜单

本文和之前jquery返回json那篇一样,第二级下拉菜单使用dom方式

<script type="text/javascript">
$(document).ready(function(){
var obj=$("#category");
if(typeof obj != 'undefined' && obj !=''){
	showGongdanType(obj.val());
}
});
function onchangeShow(category){
jQuery.ajax({
url : "${contextPath}/assets/statistic/ajaxGetType.do",
data : {statCategory : category},
type : "post",
cache : false,
dataType : "json",
success:onchangecallback
});
}
function onchangecallback(data){ 
    var select_root=document.getElementById('type');
    select_root.options.length=0;
    select_root.add(new Option("全部",''));
    for(var i=0;i<data.length;i++){
    		var xValue=data[i].value;
             var xText=data[i].valueName;
             var option=new Option(xText,xValue);
             select_root.add(option);
    }
}
function showGongdanType(category){
jQuery.ajax({
url : "${contextPath}/assets/statistic/ajaxGetType.do",
data : {statCategory : category},
type : "post",
cache : false,
dataType : "json",
success:callback
});
}
function callback(data){ 
    var select_root=document.getElementById('type');
    select_root.options.length=0;
    select_root.add(new Option("全部",''));
    for(var i=0;i<data.length;i++){
    		var xValue=data[i].value;
             var xText=data[i].valueName;
             var option=new Option(xText,xValue);
             select_root.add(option);
    }
    if("${gongdanType}"!=''){
    	for(var i=0;i<data.length;i++){
    		if(data[i].value=="${gongdanType}")
    		select_root.selectedIndex=i+1;
    	}
    }
}
</script>

			<td width="10%" height="25" class="alignLeft">
				统计类别:
			</td>
			<td width="10%" valign="top" class="alignLeft">
					<s:select name="form.category" list="categorys" id="category"
						listKey="value" listValue="valueName" 
						onchange="onchangeShow(this.value)">
					</s:select>
			</td>
			<td width="10%" height="25" class="alignLeft">
				工单类型:
			</td>
			<td width="10%" valign="top" class="alignLeft">
			 <select name="form.gongdanType" id="type" >
   			</select>	
</td>

收集几条jquery实用技巧

  收集几条jquery的实用技巧如下:

1) 检查IE是否是版本6

  

if ( (jQuery.browser.msie) && (parseInt(jQuery.browser.version) < 7) ) {
	$('body').prepend('<div class="warning">You are using an old version of Internet Explorer which is not supported.  Please upgrade your browser in order to view this website.</div>');
}

2) 打开一个打印的窗口

 

[url=#]Print this page[/url]
$('a.print').click(function(){
	window.print();
	return false;
});

3 禁止表单使用回车键

  

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

4 全选和反选checkbox

 

 <div class="options">
	[list]
		[*][url=#]Select All[/url]

		[*][url=#]Reset All[/url]

	[/list]

	<input type="checkbox" id="option1" /><label for="option1">Option 1</label>
	<input type="checkbox" id="option2" /><label for="option2">Option 2</label>
	<input type="checkbox" id="option3" /><label for="option3">Option 3</label>
	<input type="checkbox" id="option4" /><label for="option4">Option 4</label>
</div>
$('.select-all').live('click', function(){
	$(this).closest('.options').find('input[type=checkbox]').attr('checked', true);
	return false;
});

$('.reset-all').live('click', function(){
	$(this).closest('.options').find('input[type=checkbox]').attr('checked', false);
	return false;
});

5 平均分各个列

  有的时候,需要在表格中让各个列等分,可以这样

var max_height = 0;
$("div.col").each(function(){
    if ($(this).height() > max_height) { max_height = $(this).height(); }
});
$("div.col").height(max_height);

6 将所有的连接用新建窗口打开

  

$('a[@rel$='external']').click(function(){
     this.target = "_blank";
});

/*
   Usage:
   [url=http://www.catswhocode.com]catswhocode.com[/url]
*/