JQuery | 吕神的自我修养

一个简单的jquery选项卡例子_tabforid

2016.03.30

一个简单的jquery选项卡例子_tabforid

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个简单的jquery选项卡例子_tabforid</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
	$('[_tabforid] li').click(function(){
		var $that  = $(this);//获取当前 操作对象 （谁被点击了）
		var i = $that.index(); //获取当前 对象 的 下标 （第几个被点击）
		var ul = $that.parent();//获取父元素对象 为 获取 _tabforid 做准备
		
			$that.addClass('selected');	
			$that.siblings('li').removeClass('selected');
			//*** 拼接 选择器 
			$('#'+ul.attr('_tabforid')+' div').eq(i).show().siblings('div').hide();

	});
	//默认 每组[_tabforid] li的第一个 触发点击事件。
	$('[_tabforid]').each(function(){
       $(this).children('li').first().click() ;
    });
	//[_tabforid=tabContentA] li 第一个 触发点击事件 
	$('[_tabforid=tabContentA] li').eq(0).click();
						   
});
</script>


<style>
ul,li{ list-style:none; margin:0px; padding:0px;}
.tabBox{ border:2px solid #000; width:800px; margin:0px auto 20px;}
.tabBox-title{ border-bottom:2px solid #000; }
.tabBox-title li{ background:#FFFF00; float:left; line-height:40px; width:100px; text-align:center; border-right:1px solid #000; cursor:pointer;}
/* tab 被中 状态 */
.tabBox-title li.selected { background:#f88; color:#FFFFFF;}
</style>
</head>
<body>


<div class="tabBox">
	<div class="tabBox-title">
   	  <ul _tabforid='tabContentA' >
        <li>选项卡1</li>
            <li>选项卡2</li>
            <li>选项卡3</li>
            <li>选项卡4</li>
      </ul>
        <br clear="all"/>
    </div>
  <div class="tabBox-body" id="tabContentA">
    	<div>选项卡1 de 内容</div>
        <div>选项卡2 de 内容</div>
        <div>选项卡3 de 内容</div>
        <div>选项卡4 de 内容</div>
  </div>
</div>

<center>
右一个选卡 修改了 【_tabforid='tabContentB'】 和 【id="tabContentB"】
</center>

<div class="tabBox">
	<div class="tabBox-title">
   	  <ul _tabforid='tabContentB' >
        <li>选项卡1</li>
            <li>选项卡2</li>
            <li>选项卡3</li>
            <li>选项卡4</li>
      </ul>
        <br clear="all"/>
    </div>
  <div class="tabBox-body" id="tabContentB">
    	<div>选项卡1 de 内容</div>
        <div>选项卡2 de 内容</div>
        <div>选项卡3 de 内容</div>
        <div>选项卡4 de 内容</div>
  </div>
</div>

</body>
</html>

JS实现自动倒计时30秒后按钮才可用

2015.11.22

WEB开发中经常会用到倒计时来限制用户对表单的操作，比如希望用户在一定时间内看完相关协议信息才允许用户继续下一步操作，又比如在收取手机验证码时允许用户在一定时间过后（未收到验证码的情况下）再次获取验证码。那么今天我来给大家介绍下如何使用Javascript来实现这一简单应用。

应用场景1：用户注册时阅读完相关协议信息后才能激活按钮
某些网站注册时要求用户同意所谓的用户协议之类的信息，如果协议内容非常重要，有些网站会要求新注册的用户一定要阅读完相关协议信息才能激活下一步按钮提交表单。为了让用户能阅读完协议信息（实际用户有没有真正阅读咱不知道），开发者会设计一个倒计时比如30秒，30秒过后，表单提交按钮才会激活生效，下面来看具体如何实现。

<form action="http://www.lrxin.com/" method="post" name="agree">
    <input type="submit" class="button" value="请认真查看<服务条款和声明> (30)" name="agreeb">
</form>

假设有上面这样一个表单，表单的其他部分我们省略，只有一个提交按钮，初始时按钮不可用，当显示30秒倒计时结束后，按钮就会显示“我同意”，并且可以点击激活。
我们用原生的js来实现这一效果：

<script>
var secs = 30;
document.agree.agreeb.disabled=true;
for(var i=1;i<=secs;i++) {
    window.setTimeout("update(" + i + ")", i * 1000);
}
function update(num) {
    if(num == secs) {
        document.agree.agreeb.value =" 我 同 意 ";
        document.agree.agreeb.disabled=false;
    }
    else {
        var printnr = secs-num;
        document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +")";
    }
}
</script>

我们设置时间为30秒，当然你也可以设置你想要的时间，将按钮禁用，也就是不可点击，然后循环30秒，通过window.setTimeout调用update()函数，将当前秒与倒计时对比，如果已经倒计时完成则显示“我同意”，并激活按钮。

应用场景2：用户激活短信通道向用户手机发送验证码短信以验明正身
很多网站在验证用户身份的时候需要提高用户信息的安全性，这样就会与用户手机绑定，于是就会向用户手机发送验证码信息，如果用户填写了正确的验证码提交后台，那么操作才会成功。而发送验证码也可能由于各种原因有发送不成功的情况，又不能让用户不停点击发送。如此开发者使用倒计时来处理这类问题，用户激活短信后，如果30秒后未收到验证码短信则可以再允许点击发送短信。

<form action="http://www.lrxin.com/" method="post" name="myform">
    <input type="button" class="button" value="获取手机验证码"  name="phone" onclick="showtime(30)">
</form>

上面的表单在按钮上添加了一个onclick事件，调用了showtime()函数。

<script>
function showtime(t){
    document.myform.phone.disabled=true;
    for(i=1;i<=t;i++) {
        window.setTimeout("update_p(" + i + ","+t+")", i * 1000);
    }
 
}
 
function update_p(num,t) {
    if(num == t) {
        document.myform.phone.value =" 重新发送 ";
        document.myform.phone.disabled=false;
    }
    else {
        printnr = t-num;
        document.myform.phone.value = " (" + printnr +")秒后重新发送";
    }
}
</script>

和场景1一样，当点击按钮后，按钮状态为禁用，通过调用window.setTimeout的update_p()显示倒计时，当倒计时完成后，按钮显示“重新发送”，这时按钮状态为可用。

jquery 倒计时

2015.11.22

倒计时在WEB上应用非常广泛，如考试系统倒计时，团购网站中的优惠活动倒计时等等。今天，我们来使用jQuery实现一个简单的倒计时功能。

html代码：

<div class="box3 " data-endtime="<?php echo strtotime('2015-12-1');?>" ></div>
<div class="box3 " data-endtime="1448928000"></div>

js代码

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
var serverTime = <?php echo time();?> * 1000;
$(function(){
    var dateTime = new Date();
    var difference = dateTime.getTime() - serverTime;
    
    setInterval(function(){
      $("[data-endtime]").each(function(){
        var obj = $(this);
        var endTime = new Date(parseInt(obj.data('endtime')) * 1000);
        var nowTime = new Date();
        var nMS=endTime.getTime() - nowTime.getTime() + difference;
        var myD=Math.floor(nMS/(1000 * 60 * 60 * 24));
        var myH=Math.floor(nMS/(1000*60*60)) % 24;
        var myM=Math.floor(nMS/(1000*60)) % 60;
        var myS=Math.floor(nMS/1000) % 60;
        var myMS=Math.floor(nMS/100) % 10;
        if(myD>= 0){
            var str = "开班倒计时："+myD+"天"+myH+"小时"+myM+"分"+myS+"."+myMS+"秒";
        }else{
            var str = "已结束！";    
        }
        obj.html(str);
      });
    }, 100);
});
</script>

jQuery圆形统计图（百分比）

2015.11.10

今天我给大家介绍一款圆形统计图circliful，它基于HTML5的画布和jQuery，无需使用图像轻松实现圆形统计图，而且有很多属性设置，使用起来非常方便。

如何使用circliful

将jquery库文件和jquery.circliful.min.js引入到页面中。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>

添加css样式：

<style>
.circliful {
    position: relative; 
}
.circle-text, .circle-info, .circle-text-half, .circle-info-half {
    width: 100%;
    position: absolute;
    text-align: center;
    display: inline-block;
}
.circle-info, .circle-info-half {
    color: #999;
}
.circliful .fa {
    margin: -10px 3px 0 3px;
    position: relative;
    bottom: 4px;
}
</style>

在需要展现统计图的位置加入以下html代码：

<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" 
data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" 
data-bgcolor="#eee" data-fill="#ddd"></div>

然后在页面中加入调用circliful的代码：

<script>
$( document ).ready(function() {
        $('#myStat').circliful();
    });
</script>

然后预览页面，你会看到一个非常简洁漂亮的圆形统计图。

选项设置

Circliful提供了丰富的属性选项设置，基于html5的data属性，以下是设置清单。

参数	描述	默认值
data-dimension	圆形图的宽度和高度px	250
data-text	显示在圆圈内侧的文字内容	empty
data-info	显示在data-text下的说明信息	empty
data-width	圆圈的厚度px	15
data-fontsize	圈内文字大小px	15
data-percent	圆圈统计百分比%，1-100	50
data-fgcolor	圆圈的前景色	#556b2f
data-bgcolor	圆圈的背景色	#eeeeee
data-fill	圆形的填充背景色	empty
data-type	圆形统计类型，可以是”half”或”full”	full
data-total	数据总量，和data-part配合使用	empty
data-part	数据量，与data-total配合使用	empty
data-border	圆形样式，可以加边框，如inline或outline	empty
data-icon	Fontawesome图标样式，详情可参照：Fontawesome Website – Icons	empty
data-icon-size	图标大小	empty
data-icon-color	图标颜色	empty

想了解最新版的circliful请访问：https://github.com/pguso/jquery-plugin-circliful

Jquery CDN jquery国内常用cdn

2015.10.29

Jquery是个非常流行的JS前端框架，很多网站都喜欢采用一些Jquery CDN加速服务，这样网站加载jquery会更快。
由于很多Jquery插件使用Google的jquery CDN，如：http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 。
由于Google打不开，这些CDN地址也无法访问，而JS往往放在网页的head里，JS无法访问导致网站打开非常慢，只能是全部替换掉CDN链接了。
推荐几个国内的jquery CDN服务地址吧：
★新浪CDN，感觉很快，用的人很多，推荐使用！

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

其它版本可以在这里找地址 http://lib.sinaapp.com/?path=/jquery
★百度CDN

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

其它版本之间修改代码中的版本号就行了
★360的CDN

<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>

其它版本也是直接修改版本号就可以了
如果担心CDN地址加载失败，可以这样载入本地jquery

<script type="text/javascript">
!window.jQuery && document.write('<script src="js/jquery.min.js"><\/script>');
</script>

http://www.bootcdn.cn/jquery/

jQuery插件的开发

2015.10.29

jQuery插件的开发包括两种：
一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发-为jQuery添加静态方法
类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：

1.1 添加一个新的全局函数
添加一个全局函数，我们只需如下定义：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>jQuery插件开发</title>
    <script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script>    
    <script type="text/javascript">
    $(function(){
        //添加一个新的全局函数
        jQuery.foo = function() { 
            alert('This is a test. This is only a test.');
        };  
        
        $("#btn").click(function(){
            //调用新的全局函数
            $.foo();//或写成：jQuery.foo();
        });
    });
    </script>

  </head>
  
  <body>
      <input type="button" id="btn" value="点击"/>
  </body>
</html>

1.2 增加多个全局函数
添加多个全局函数，可采用如下定义：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>jQuery插件开发</title>
    <script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script>    
    <script type="text/javascript">
    $(function(){
        //增加多个全局函数
        jQuery.foo = function() { 
            alert('This is a test. This is only a test.');
        };  
        jQuery.bar = function(param) {   
            alert('This function takes a parameter, which is "' + param + '".');  
        };   
        
        $("#btn").click(function(){
            //调用多个全局函数
            $.foo();//或写成：jQuery.foo();
            $.bar('bar'); //或写成：jQuery.bar('bar');
        });
    });
    </script>

  </head>
  
  <body>
      <input type="button" id="btn" value="点击"/>
  </body>
</html>

1.3 使用jQuery.extend(object);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>jQuery插件开发</title>
    <script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script>    
    <script type="text/javascript">
    $(function(){
        jQuery.extend({    
            foo: function() {    
                alert('This is a test. This is only a test.');    
            },    
            bar: function(param) {    
                alert('This function takes a parameter, which is "' + param +'".');    
            }   
        });
        
        
        $("#btn").click(function(){
            //调用多个全局函数
            $.foo();//或写成：jQuery.foo();
            $.bar('bar'); //或写成：jQuery.bar('bar');
        });
    });
    </script>

  </head>
  
  <body>
      <input type="button" id="btn" value="点击"/>
  </body>
</html>

1.4 使用命名空间
虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>jQuery插件开发</title>
    <script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script>    
    <script type="text/javascript">
    $(function(){
        jQuery.myPlugin = {        
            foo:function() {        
                alert('This is a test. ');        
            },        
            bar:function(param) {        
                alert('This function takes a parameter, which is "' + param + '".');  
            }       
        };
        
        $("#btn").click(function(){
            //调用多个全局函数
            $.myPlugin.foo();//或写成：jQuery.myPlugin.foo();
            $.myPlugin.bar('bar'); //或写成：jQuery.myPlugin.bar('bar'); 
        });
    });
    </script>

  </head>
  
  <body>
      <input type="button" id="btn" value="点击"/>
  </body>
</html>

通过这个技巧(使用独立的插件名)，我们可以避免命名空间内函数的冲突。

2、对象级别的插件开发-给jQuery对象添加方法
对象级别的插件开发需要如下的两种形式：、

形式1：

(function($){   
   $.fn.extend({   
      pluginName:function(opt, callback){   
         // Our plugin implementation code goes here.     
      }   
   })   
})(jQuery);

形式2：

(function($) {     
   $.fn.pluginName = function() {   
      // Our plugin implementation code goes here.   
   };   
})(jQuery);

上面定义了一个jQuery函数，形参是$，函数定义完成之后，把jQuery这个实参传递进去。立即调用执行。这样的好处是，我们在写jQuery插件时，也可以使用$这个别名，而不会与prototype引起冲突。例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>jQuery插件开发</title>
    <script type="text/javascript" src="jquery-1.8.1.min.js"></script>    
    <script type="text/javascript">
    $(function(){
        //插件定义-方法一
        (function($) {
            $.fn.alertWhileClick = function() {
                $(this).click(function (){
                    alert($(this).val() + "2");
                });
            }
        })(jQuery); 
        
        //插件定义-方法二
        (function($) {
            $.fn.extend({ 
                alertWhileClick2:function(){
                    $(this).click(function(){
                        alert("2");
                    });
                }
            })
        })(jQuery);         
        
        //调用插件
        $('#btn').alertWhileClick();
          $('#btn').alertWhileClick2();
    });
    </script>

  </head>
  
  <body>
      <input id="btn" type="button" value="点击"/>
  </body>
</html>

注意：
这里使用了闭包的方式

(function($) {
   // Code
})(jQuery);

上面的代码等价于下面的代码

var jQueryFucntion=function($) {
   // Code
} 
jQueryFucntion(jQuery);

这样定义之后，很大程序上毕免了第三方的误操作，从而破坏封装性。如比较常见的场景就是防止’$’与其它js库的冲突。

JQuery中$.ajax()方法参数详解

2015.06.06

url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和
delete也可以使用，但仅部分浏览器支持。
timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设
置。
async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。
如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等
待请求完成才可以执行。
cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。
设置为false将不会从浏览器缓存中加载请求信息。
data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格
式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格
式，例如{foo1:”bar1″,foo2:”bar2″}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同
值对应同一个名称。例如{foo:[“bar1″,”bar2”]}转换为&foo=bar1&foo=bar2。
dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime
信息返回responseXML或responseText，并作为回调函数参数传递。
可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求
时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个
“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义
HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参
数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。
参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错
误信息、捕获的错误对象(可选)。
ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认
为”application/x-www-form-urlencoded”。该默认值适合大多数应用场合。
dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。
提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的
dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局
ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。
服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。
该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分，例如
{jsonp:’onJsonPLoad’}会导致将”onJsonPLoad=?”传给服务器。
username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。
processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度
来讲并非字符串）以配合默认内容类型”application/x-www-form-urlencoded”。如果要发送DOM
树信息或者其他不希望转换的信息，请设置为false。
scriptCharset：要求为String类型的参数，只有当请求时dataType为”jsonp”或者”script”，并且type是GET时
才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

案例代码：

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "POST",// GET , POST
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json", // xml , html , script , json , jsonp , text
             success: function(d){
			 console.log(d);
                         $('#resText').empty();   //清空resText里面的所有内容
                         var html = ''; 
                         $.each(d, function(i, v){
                               html += '<div class="comment"><h6>' + v['username']
                                         + ':</h6><p class="para"' + v['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});

顺便说一下$.each()函数:
$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容。

JQuery的Ajax跨域请求的解决方案

2015.04.21

	$.ajax({
		type : "get",
		async:false,
		url : "http://127.0.0.3/json/ajax_do.php",
		dataType : "jsonp",
		jsonp: "callback",//服务端用于接收callback调用的function名的参数
		jsonpCallback:"success_jsonpCallback",//callback的function名称
		success : function(json){
			alert(json);
			console.log(json);
		},
		error:function(){
			alert('fail');
		}
	});




/************************************/

$.ajax({
    url:'http://127.0.0.3/json/ajax_do.php?callback=?',
    type:'get',
    dataType:'jsonp',  
    data:$("#projectForm").serialize(),
    success:function(d){
       console.log(d);
    },
    error:function(msg){
        alert("授权申请提交失败,请联系技术服务！"); 
    }
});


/******************************************/
var jqxhr = $.getJSON( "http://127.0.0.3/json/ajax_do.php?callback=?",
						$("#projectForm").serialize() ,
						function(d) {
						  console.log( "success" );
						})
						.done(function() {
							console.log( "second success" );
						})
						.fail(function() {
							console.log( "error" );
						})
						.always(function() {
							console.log( "complete" );
						});
jqxhr.complete(function() {
  console.log( "second complete" );
});

jQuery手机移动端日历日期选择插件.rar

2015.04.12

jQuery手机移动端日历日期选择插件.rar

下载地址：http://pan.baidu.com/s/1bnHDDIv

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<title>jQuery手机移动端日历日期选择 - A5源码</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="js/date.js" ></script>
<script type="text/javascript" src="js/iscroll.js" ></script>
<script type="text/javascript">
$(function(){
	$('#beginTime').date();
	$('#endTime').date({theme:"datetime"});
});
</script>
</head>
<body>   
<style type="text/css">
.demo{width:300px;margin:40px auto 0 auto;}
.demo .lie{margin:0 0 20px 0;}
</style>
<div class="demo">
	<div class="lie">日期设置-1:<input  id="beginTime" class="kbtn" /></div>
	<div class="lie">日期设置-2:<input id="endTime" class="kbtn" /></div>
</div>
<div id="datePlugin"></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</div>
</body>
</html>

基于jquery mobile的手机日历插件 – jqueryMobilomobiscroll

2015.04.09

基于jquery mobile的手机日历插件 – jqueryMobilomobiscroll

下载地址：http://pan.baidu.com/s/1bnq9jwb

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

mobiscroll_all.rar

http://pan.baidu.com/s/1o6ifnZG

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

mobiscroll.rar

http://pan.baidu.com/s/1kTl9iJH

———————————————————————-

官方网站：http://mobiscroll.com/

演示地址：http://www.wglong.com/index/demos/mobiscroll/index.html

var currYear = (new Date()).getFullYear();	
    var optDate = {
            preset: 'date', //日期
            theme: 'android-ics light', //皮肤样式
            display: 'modal', //显示方式 
            mode: 'scroller', //日期选择模式
            lang:'zh',
            showNow: true,
		    nowText: "今",
            startYear:currYear, //开始年份
            endYear:currYear + 10 //结束年份
        };
    var optDateTime = {
            preset: 'datetime', //日期
            theme: 'android-ics light', //皮肤样式
            display: 'modal', //显示方式 
            mode: 'scroller', //日期选择模式
            lang:'zh',
            showNow: true,
		    nowText: "今",
            startYear:currYear, //开始年份
            endYear:currYear + 10 //结束年份
        };
    var optTime = {
            preset: 'time', //日期
            theme: 'android-ics light', //皮肤样式
            display: 'modal', //显示方式 
            mode: 'scroller', //日期选择模式
            lang:'zh',
            showNow: true,
		    nowText: "今",
            startYear:currYear, //开始年份
            endYear:currYear + 10 //结束年份
        };

$("#appDate").mobiscroll(optDate);
$("#appDatetiem").mobiscroll(optDateTime);
 $("#apptiem").mobiscroll(optTime);

<input type="text" name="appDate" id="appDate" />
<input type="text" name="appDatetiem" id="appDatetiem" />
<input type="text" name="apptiem" id="apptiem" />

Mobiscroll移动端日期时间插件精简实例

2015.04.08

mobiscroll_手机上下滚动选择日期时间

演示地址：http://demo.mycodes.net/chajian/Mobiscroll/

下载地址：http://pan.baidu.com/s/1dDD5FG1

仿百度新闻首页左右按钮控制焦点图片淡出淡进轮播切换 – jquery.yx_rotaion

2015.04.08

仿百度新闻首页左右按钮控制焦点图片淡出淡进轮播切换 – jquery.yx_rotaion

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title>仿百度新闻首页左右按钮控制焦点图片淡出淡进轮播切换 - jquery.yx_rotaion</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<!--开始-->
<div class="yx-rotaion">
	<ul class="rotaion_list">
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/1.jpg" alt="美国俄州遭遇龙卷风 已致91人死"></a></li>
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/2.jpg" alt="深圳路面塌陷形成直径10米大坑"></a></li>
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/3.jpg" alt='"520" 武汉新人扎堆结婚'></a></li>
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/4.jpg" alt="暴雨突袭广州 南沙上演科幻大片"></a></li>
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/5.jpg" alt="上海美博会模特赤身才会博眼球"></a></li>
	</ul>
</div>
<link href="css/yx_rotaion.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.yx_rotaion.js"></script>
<script type="text/javascript">
$(".yx-rotaion").yx_rotaion({auto:true });
</script>
<!--结束-->
</body>
</html>

幻灯片参数说明：

$(".yx-rotaion").yx_rotaion({
    /**轮换间隔时间，单位毫秒*/
    during:3000,
    /**是否显示左右按钮*/
    btn:true,
    /**是否显示焦点按钮*/
    focus:true,
    /**是否显示标题*/
    title:true,
    /**是否自动播放*/
    auto:true		
});

设置幻灯片图片大小在 yx_rotaion.css 文件中

/* 这里修改图片大小*/
.yx-rotaion img{ width:549px; height:366px; }

演示地址：http://www.17sucai.com/preview/53522/2013-11-22/jquery.yx_rotaion_1/demo.html

下载地址：http://pan.baidu.com/s/1nt63Juh

怎样用JQuery实现当鼠标停留在某区域3秒后执行方法

2015.03.23

$('div').hover(function(){
    timer = setTimeout(function(){
        //做你想做的事
    },3000);
},function(){
   //这里去clear
    clearTimeout(timer);//如果没停留3秒,直接会被clear掉,如果停留超过3秒,也一样会被clear,但是你要做的方法已经被执行了
});

jquery each函数 break和continue功能

2015.03.19

jquery each函数 break和continue功能幸运的是另一个突破，持续一个jQuery循环方式。你可以打破在函数返回一个jQuery参数虚假循环。一个可以继续执行只是在做不指定返回值或返回值以外的任何其他虚假的回报

jquery each函数 break和continue功能

幸运的是另一个突破，持续一个jquery循环方式。你可以打破在函数返回一个jquery参数虚假循环。一个可以继续执行只是在做不指定返回值或返回值以外的任何其他虚假的回报。

$(‘.container’).each(function(i){

if($(this).attr(‘name’)==”continue”){

return ;//实现continue功能

}else if($(this).attr(‘name’)==”break”){

return false;//实现break功能

}

})

来看看jquery each函数

在each里想使用return true给这个function返回时，其实只是让each继续执行而以

连each都没有中断，所以function也就不能return了

jquery中each非常好用，除常用它取代网页特效的for循环

function methodone(){

….

$.each(array,function(){

if(条件成立){

return true;

}

});

….

}

break continue实例

continue :return true;

break :return false;

直接return也会跳出jquery。

所以，就可以写出下面的代码：

$(‘li’).each(function(index){

if(index==2)return true;

if(index==4)return false;

$(this).css教程(“border”,”1px red solid”);

});

Cookie操作插件 jQuery.Cookie

2015.03.17

jQuery操作cookie的插件,大概的使用方法如下

$.cookie(‘the_cookie’); //读取Cookie值
$.cookie(’the_cookie’, ‘the_value’); //设置cookie的值
$.cookie(’the_cookie’, ‘the_value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});//新建一个cookie 包括有效期路径域名等
$.cookie(’the_cookie’, ‘the_value’); //新建cookie
$.cookie(’the_cookie’, null); //删除一个cookie

软件首页：http://www.oschina.net/action/project/go?id=2252&p=home

下载地址：http://www.oschina.net/action/project/go?id=2252&p=download
备用地址：

网页滚动到底部ajax加载数据

2015.02.09

var loading = false;

$(window).scroll(function(){
      // 当滚动到最底部以上50像素时， 加载新内容
   
    if ($(document).height() – $(this).scrollTop() – $(this).height()<200){
      if(next_url && !loading){
        loading = true;
        $.getJSON(next_url, function(data){
          next_url = data.next_url;
          if(data.html){
            $(‘#infinite_scroll’).append( data.html );
            loading = false;
          }
        });
            }
            if(!next_url)$(‘.loading’).remove();
    }
  });

});

在ajax的url参数中callback=? 起什么作用

2015.02.05

在 jQuery 中，可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据，如 “myurl?callback=?”。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
jQuery 会把？注册成window.? 的系统函数，然后映射调用。
一般用于跨域ajax请求，提供URL的一方会返回一个callback函数的JSON数据，然后回调时就能获取了。

请求的URL例子：
“myurl?callback=123123123” //这个123123就是?号，jquery自动生成的。
返回的数据例子：
123123123({“id”:”1″,”name”:”张三”})

利用Data URL(data:image/jpg;base64,)加速网页加载的方法

2014.12.23

利用Data URL(data:image/jpg;base64,)base64形式存储图片,将小图片生成数据流形式

先来看下下边这段代码：

其实“data:image/gif;base64,R0lGODlhJ……” 就是一张图片的Data URL，就是利用base64编码把图片数据翻译成标准ASCII字符。
等同于：

显示结果：

Data URL它现将图片转换成base64编码，以文本的形象随着文件加载。
再由浏览器在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用。

语法：
data:image/jpg;    声明数据协议及类型名称
base64,               编码形式为base64
/9j/4AAQSkZ……    base64编码结果

最后附上Data URL的生成方法（PHP）：

<?php 
//php读取和保存base64编码的图片内容
header('Content-type:text/html;charset=utf-8'); 
//读取图片文件，转换成base64编码格式
//$image_file = './loading.gif'; 
$image_file = 'http://www.lrxin.com/images/loading.gif'; 
$image_info = getimagesize($image_file); 
$base64_image_content = "data:{$image_info['mime']};base64," . chunk_split(base64_encode(file_get_contents($image_file)));
?>

<img src="<?php echo $base64_image_content;?>" />

需要注意：本方法适合于小图片，大图片就不要考虑了，另外IE8以下浏览器不支持这种方法。
用这种方法会加重客户端的CPU和内存负担，总之有利有弊。
IE8 之前的浏览器不支持 Data URL

在线生成工具：
http://www.greywyvern.com/code/php/binary2base64
http://www.kawa.net/works/js/data-scheme/base64-e.html

简单的说，data类型的Url大致有下面几种形式。

data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<HTML代码>
data:text/html;base64,<base64编码的HTML代码>
data:text/plain;charset=UTF-8;base64,<base64编码的HTML代码>
data:text/css,<CSS代码>
data:text/css;base64,<base64编码的CSS代码>
data:text/javascript,<Javascript代码>
data:text/javascript;base64,<base64编码的Javascript代码>
data:image/gif;base64,<base64编码的gif图片数据>
data:image/png;base64,<base64编码的png图片数据>
data:image/jpeg;base64,<base64编码的jpeg图片数据>
data:image/x-icon;base64,<base64编码的icon图片数据>

吕神的自我修养

不积跬步无以至千里

一个简单的jquery选项卡例子_tabforid

Jquery将Form表单序列化为JSON对象

JS实现自动倒计时30秒后按钮才可用

jquery 倒计时

jQuery圆形统计图（百分比）

Jquery CDN jquery国内常用cdn

jQuery插件的开发

JQuery中$.ajax()方法参数详解

JQuery的Ajax跨域请求的解决方案

jQuery手机移动端日历日期选择插件.rar

jQuery手机移动端日历日期选择插件.rar

基于jquery mobile的手机日历插件 – jqueryMobilomobiscroll

mobiscroll_all.rar

mobiscroll.rar

Mobiscroll移动端日期时间插件精简实例

mobiscroll_手机上下滚动选择日期时间

仿百度新闻首页左右按钮控制焦点图片淡出淡进轮播切换 – jquery.yx_rotaion

怎样用JQuery实现当鼠标停留在某区域3秒后执行方法

jquery each函数 break和continue功能

Cookie操作插件 jQuery.Cookie

网页滚动到底部ajax加载数据

在ajax的url参数中callback=? 起什么作用

利用Data URL(data:image/jpg;base64,)加速网页加载的方法