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();” 方式三，把提交按钮改成普通按钮， …

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

场景：希望输入要搜索的关键词时，会立即返回结果数据。实现：使用jquery 的 keyup 方法。示例：

<input type="text" id="search" placeholder="请输入要搜索的内容"></input>

<script type="text/javascript">
  $(function(){
    $('#search').keyup(function(event) {
      console.log($(this).val());
    });
  });
</script>

$(function(){

$('#search').keyup(function(event) {

console.log($(this).val());

});

</script>

类似：若希望光标离开输入框时再触发事件，可以使用jquery的[crayon-5d35 …

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中使用jsonp实现跨域访问

在web2.0的时代，ajax的盛行给web带来了翻天覆地的变化，允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。不过，由于受到浏览器 …

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/2619684 …

日期时间选择器

1. jQuery Timer Plugin 2. Timepicki 3. Rome

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代替 …

Jquery Mobile开发——奇怪的空行

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

jquerymobile之datebox

问题：使用jquerymobile开发webapp时，免不了会用到时间选择器。jquerymobile没有专用的datepicker，而是借助使用jquery ui中的datepicker插件。但目前写此文字时，jquerymobile官网推荐使用的开源的wrapper尚有问题——示例中的Popup Datepicker，在点击 …