JQuery Archives - 俺的BLOG

jquery在线选座订票插件

插件名：jQuery Seat Charts Plugin

效果图：

【参考：】

Git官方介绍：https://github.com/mateuszmarkowski/jQuery-Seat-Charts

中文介绍：http://www.helloweba.com/view-blog-278.html

表单提交前验证

目的：

表单提交前，对表单内容先做检查处理，若不符合要求，则禁止表单提交并做相应提示。

实现：

方式一，form标签中使用onsubmit=”return chk_form();”

方式二，提交按钮使用onclick=”return chk_form();”

方式三，把提交按钮改成普通按钮，对该按钮绑定js事件，使用$(‘#form’).submit()

注意：

以上提到的检查函数chk_form()，不能写在jquery的 $(function(){...}); 中，否则可能不会执行，可以单独写在一个 <script>...</script> 中

动态加载结果数据的搜索框

场景：

希望输入要搜索的关键词时，会立即返回结果数据。

实现：

使用jquery 的 keyup 方法。

继续阅读“动态加载结果数据的搜索框”

jquery倒计时

插件描述：网页上的常用的倒计时

实现代码

引用

&lt;script type="text/javascript" src="http://www.jq22.com/js/jquery.min.js"&gt;&lt;/script&gt;

1	<script type="text/javascript" src="http://www.jq22.com/js/jquery.min.js"></script>

&lt;script type="text/javascript"&gt;
var intDiff = parseInt(60);//倒计时总秒数量
function timer(intDiff){
	window.setInterval(function(){
	var day=0,
		hour=0,
		minute=0,
		second=0;//时间默认值
	if(intDiff &gt; 0){
		day = Math.floor(intDiff / (60 * 60 * 24));
		hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
		minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
		second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
	}
	if (minute &lt;= 9) minute = '0' + minute;
	if (second &lt;= 9) second = '0' + second;
	$('#day_show').html(day+"天");
	$('#hour_show').html('&lt;s id="h"&gt;&lt;/s&gt;'+hour+'时');
	$('#minute_show').html('&lt;s&gt;&lt;/s&gt;'+minute+'分');
	$('#second_show').html('&lt;s&gt;&lt;/s&gt;'+second+'秒');
	intDiff--;
	}, 1000);
} 
$(function(){
	timer(intDiff);
});
&lt;/script&gt;

var intDiff = parseInt(60);//倒计时总秒数量

function timer(intDiff){

window.setInterval(function(){

var day=0,

hour=0,

minute=0,

second=0;//时间默认值

if(intDiff > 0){

day = Math.floor(intDiff / (60 * 60 * 24));

hour = Math.floor(intDiff / (60 * 60)) - (day * 24);

minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);

second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);

}

if (minute <= 9) minute = '0' + minute;

if (second <= 9) second = '0' + second;

$('#day_show').html(day+"天");

$('#hour_show').html('<s id="h"></s>'+hour+'时');

$('#minute_show').html('<s></s>'+minute+'分');

$('#second_show').html('<s></s>'+second+'秒');

intDiff--;

}, 1000);

}

$(function(){

timer(intDiff);

});

</script>

html

&lt;h1&gt;网页上的倒计时&lt;/h1&gt;
&lt;div class="time-item"&gt;
	&lt;span id="day_show"&gt;0天&lt;/span&gt;
	&lt;strong id="hour_show"&gt;0时&lt;/strong&gt;
	&lt;strong id="minute_show"&gt;0分&lt;/strong&gt;
	&lt;strong id="second_show"&gt;0秒&lt;/strong&gt;
&lt;/div&gt;

<h1>网页上的倒计时</h1>

</div>

css

h1 {
	font-family:"微软雅黑";
	font-size:40px;
	margin:20px 0;
	border-bottom:solid 1px #ccc;
	padding-bottom:20px;
	letter-spacing:2px;
}
.time-item strong {
	background:#C71C60;
	color:#fff;
	line-height:49px;
	font-size:36px;
	font-family:Arial;
	padding:0 10px;
	margin-right:10px;
	border-radius:5px;
	box-shadow:1px 1px 3px rgba(0,0,0,0.2);
}
#day_show {
	float:left;
	line-height:49px;
	color:#c71c60;
	font-size:32px;
	margin:0 10px;
	font-family:Arial,Helvetica,sans-serif;
}
.item-title .unit {
	background:none;
	line-height:49px;
	font-size:24px;
	padding:0 10px;
	float:left;
}

h1 {

font-family:"微软雅黑";

font-size:40px;

margin:20px 0;

border-bottom:solid 1px #ccc;

padding-bottom:20px;

letter-spacing:2px;

}

.time-item strong {

background:#C71C60;

color:#fff;

line-height:49px;

font-size:36px;

font-family:Arial;

padding:0 10px;

margin-right:10px;

border-radius:5px;

box-shadow:1px 1px 3px rgba(0,0,0,0.2);

}

#day_show {

float:left;

line-height:49px;

color:#c71c60;

font-size:32px;

margin:0 10px;

font-family:Arial,Helvetica,sans-serif;

}

.item-title .unit {

background:none;

line-height:49px;

font-size:24px;

padding:0 10px;

float:left;

}

演示：http://www.jq22.com/yanshi327

下载示例代码：jquery网页倒计时

【原文摘自：http://www.jq22.com/jquery-info327】

jquery中使用jsonp实现跨域访问

在web2.0的时代，ajax的盛行给web带来了翻天覆地的变化，允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。

在工作中，我们经常会碰到跨域的问题，同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。实现跨域的方式有很多，如：使用iframe隐藏，JSONP等。

现在主流的都是使用JSONP去实现跨域，什么是JSONP？简单的来说就是JSON-Padding。

对很多新手来说JSONP并不是很理解，简单的说明下：继续阅读“jquery中使用jsonp实现跨域访问”

jquery设置checkbox选中状态

1.放弃使用 attr()来给元素的属性赋值或取得某属性值，改用prop()来替换。

2.判断checkbox是否被选中：

$(this).is(':checked');//选中则返回true,未选中返回false

1	$(this).is(':checked');//选中则返回true,未选中返回false

3.实现一键全选：

<script type="text/javascript">
   $(function(){
        //点击实现全选的checkbox:
	$('[name=ck_total]').click(function(event) {			
	   $(':checkbox').prop('checked', $(this).is(':checked'));
	});
   });
</script>

$(function(){

//点击实现全选的checkbox:

$('[name=ck_total]').click(function(event) {

$(':checkbox').prop('checked', $(this).is(':checked'));

});

</script>

【参考】

http://www.zhihu.com/question/26196843

http://www.365mini.com/page/jquery-attr-vs-prop.htm

日期时间选择器

1. jQuery Timer Plugin

2. Timepicki

继续阅读“日期时间选择器”

Jquery之动态绑定（on,live）

目的：

实现为某些新增元素做动态绑定。

一般处理：

$(elector).live(event,handler)或$(elector).on(event,handler)。如：

$('p').live('click',function(){
   alert('hello world');
})

$('p').on('click',function(){
   alert('hello world');
})

$('p').live('click',function(){

alert('hello world');

})

$('p').on('click',function(){

alert('hello world');

})

注意：

live方法在1.7版后被不建议使用，1.9之后已移除。（可用delegate代替）

问题现象：

使用live绑定方法有时无法为新元素实现动态绑定。

原因：

不详。

处理方法：

使用live的另一种绑定方法：

$(document.body).live(event,elector,data,handler);

1	$(document.body).live(event,elector,data,handler);

如：

$(document.body).live('click','p',function(){
  alert('hello world');
});

$(document.body).live('click','p',function(){

alert('hello world');

});

delegate使用方式：

$("div").delegate("button","click",function(){
  $("p").slideToggle();
})

$("div").delegate("button","click",function(){

$("p").slideToggle();

})

注意：使用delegate的元素必须是“一直都存在的”（如上例中的div），否则新生成的元素没有绑定事件，无法实现“动态绑定”。

【参考：http://www.w3school.com.cn/jquery/event_delegate.asp， http://blog.csdn.net/lovqc/article/details/50428482】

Jquery Mobile开发——奇怪的空行

现象：使用Jquery Mobile开发页面时，在listview中发现排版不正常，有莫名其妙的‘很窄的空行’，检查代码多遍也没发现问题，将官方代码贴在上面对比时发现官方的显示正常（代码完全一样，样式却不同——官方的正常，我的有空白）。

解决：使用浏览器检查DOM元素时发现，我的多了些‘ ’，即空格，将代码空格部分全部清楚，使代码在同一行显示后，显示正常，空白没了。

奇怪的事：我想复原问题现象，以便截图发出来，结果复原不了了，空白行没有了！

评论：神奇的Jquery Mobile

jquerymobile之datebox

问题：

使用jquerymobile开发webapp时，免不了会用到时间选择器。jquerymobile没有专用的datepicker，而是借助使用jquery ui中的datepicker插件。但目前写此文字时，jquerymobile官网推荐使用的开源的wrapper尚有问题——示例中的Popup Datepicker，在点击箭头选择下一日期时，CSS样式出了问题。那怎么办？

示例：http://dev.jtsage.com/jQM-DateBox2/

配置项：http://dev.jtsage.com/jQM-DateBox2/demos/fullopt.html