吕神的自我修养

jquery事件绑定只点击一次

jquery事件绑定只点击一次，想法就是绑定事件，函数内在执行时候 取消绑定事件。

$('#my-selector').bind('click', function() {
       $(this).unbind('click');
       alert('Clicked and unbound!');
});

或者one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。

当使用 one() 方法时，每个元素只能运行一次事件处理器函数。

$("p").one("click",function(){
  $(this).animate({fontSize:"+=6px"});
});

ajax页面底部 滚动加载效果 实例

html部分：

<ul id="scrollBox">
    //ajax读取的 data.html 使用append 的方式添加到这里        
</ul>
<div id="scrollPages">
    //ajax 状态文字输出到这里 【数据加载中】【数据加载成功】【没有数据了】
</div>

js代码需要jquery支持。

//滚动加载 开始
$(function(){
    var loading = false; // 状态锁 默认 false
    var next_url = 'ajax.php'; //ajax读取数据地址，ajax 每次都修改为 data.next_url 下一页地址
    var $pages = $('#scrollPages'); //绑定 分页容器 分页状态 在此位置输出
    var $scrollBox = $('#scrollBox'); // 绑定内容 ajax 把
    
    var _loading = function(){ console.log('数据加载中...');  $pages.html('数据加载中...');  }
    var _loadok = function(){ console.log('数据加载成功！');  $pages.html('数据加载成功！');  }
    var _nodata = function(){ console.log('没有数据了') ;     $pages.html('没有数据了'); }
    
    $(window).scroll(function(){
        var sH =  $(document).height() - $(this).scrollTop() - $(this).height();//页面底部距离
        var sp = $(window).height() - ( $pages.offset().top - $(document).scrollTop() ) ; //分页div 距离win 底部
        if( loading ){return false ;}
        //条件
        if ( sp > 33 ){
            loading = true;
            _loading();
            $.getJSON(next_url,{}, function(data){
                console.log(data);
                next_url = data.next_url;
                if(data.html){
                    $scrollBox.append( data.html );
                    $('.zzbsList .zzbsInfo').txtCur({n:60});
                    loading = false;
                    _loadok();
                }
                //判断是否还有吓一跳
                if( !next_url ){ loading = true ; _nodata() };
                
            });
        }
    });// 滚动 结束 $(window).scroll

    //页面加载完成 清空$scrollBox 内容
    //页面加载完成 执行第一次
    $(window).scroll();
});

php 文件 ajax.php 代码：

<?php
header("Content-type:text/html;charset=utf-8");
//休息1秒钟 ,模拟网速不好，可以看清 ajax状态变化
sleep(1);
//读取GET提交的页码
$p = (int)$_GET['p'] ;
//准备返回的数据
$d = array();
//下一页 地址
$d['next_url'] = 'api/bisai-list.php?p='.($p+1);
//数据 html格式 ，jquery会把他插入到 <ul id="scrollBox"> 中。
$d['html'] = '<li> ajax 读取到的数据，当前页面 '.($p+1).' </li>';
//简单判读 只有10页面内容
if($p > 10){
    $d =  array(); //没有数据了  js 主要判断 $d['next_url'] 的值
}
//返回json数据
die(json_encode($d));
?>

————–我是分割线—————

上边的 js 代码存在一个问题。

//页面加载完成 执行第一次$(window).scroll(); 尽管调用了滚动事件，但无法满足条件： if ( sp > 33 ) 出发ajax加载数据。
后来想想，干脆把 ajax加载数据部分代码封装成函数_ajaxLoad，在需要的时候直接调用。
1.页面第一加载时调用
2.滚动满足条件时调用
修改js代码如下：

//滚动加载 开始
$(function(){
    var loading = false; // 状态锁 默认 false
    var next_url = 'api/bisai-list.php'; //ajax读取数据地址，ajax 每次都修改为 data.next_url 下一页地址
    var $pages = $('#scrollPages'); //绑定 分页容器 分页状态 在此位置输出
    var $scrollBox = $('#scrollBox'); // 绑定内容 ajax 把
    
    var _loading = function(){ console.log('数据加载中...');  $pages.html('数据加载中...');  }
    var _loadok = function(){ console.log('数据加载成功！');  $pages.html('数据加载成功！');  }
    var _nodata = function(){ console.log('没有数据了') ;     $pages.html('没有数据了'); }
    var _ajaxLoad = function(){
            loading = true;
            _loading();
            $.getJSON(next_url,{}, function(data){
                console.log(data);
                next_url = data.next_url;
                if(data.html){
                    $scrollBox.append( data.html );
                    $('.zzbsList .zzbsInfo').txtCur({n:60});
                    loading = false;
                    _loadok();
                }
                //判断是否还有吓一跳
                if( !next_url ){ loading = true ; _nodata() };
                
            });
    }
    
    $(window).scroll(function(){
        var sH =  $(document).height() - $(this).scrollTop() - $(this).height();//页面底部距离
        var sp = $(window).height() - ( $pages.offset().top - $(document).scrollTop() ) ; //分页div 距离win 底部
        console.log(sp);
        if( loading ){return false ;}
        if ( sp > 33 ){
            //滚动满足条件时调用 加载数据
            _ajaxLoad();
        }
    });
    //页面加载完成 执行第一次加载数据
    _ajaxLoad();
});
//滚动加载 结束

jQuery on() 的使用方法

jQuery on()方法是官方推荐的绑定事件的一个方法。


$(selector).on(event,childSelector,data,function,map)
由此扩展开来的几个以前常见的方法有.

$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});

jquery字符输入个数限制插件，支持显示剩余字符个数 iptMaxNum

jquery字符输入个数限制插件，支持显示剩余字符个数 iptMaxNum

———————————

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery限制输入字数</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript"> 
/**
 * $.iptMaxNum();
 * @charset utf-8
 * @extends jquery.1.8.3
 * @example
 * $('#Comment_txt').iptMaxNum({max:50 });
 * $('#Comment_txt').iptMaxNum({max:50 , box:"#Comment_txt_num"});
 */
;(function($){   
    $.fn.extend({     
         iptMaxNum: function(options) {   
            //默认参数
            var defaults = {
                 /* 最多多少个字符 */
                 max:60, 
                 /* 显示个数的容器 选择器*/
                 box:'' 
           }        
            var options = $.extend(defaults, options);   
            return this.each(function(){
                var o = options;   
                var $this = $(this);
                var _boxnum =function(){
                    $(o.box).text( o.max -0 - $this.val().length );
                }
                _boxnum();
                $this.on("keyup , change ",function(){
                    var curLength=$this.val().length; 
                    if(curLength >= o.max){
                        var str=$this.val().substring(0, o.max );
                        $this.val(str);
                        alert("超过字数限制，多出的字将被截断！" );
                    }
                    else{
                        
                    }
                    _boxnum();
                })          

 
            });   
        }   
    });   
       
})(jQuery);
</script>
</head>
<body>
您还可以输入<span id="textCount">5</span>个字符<br />
<textarea name="textarea" id="TextArea" cols="45" rows="5" ></textarea>
<script type="text/javascript">
    $(function(){
        $('#TextArea').iptMaxNum({max:50 , box:"#textCount"});
    });

</script>
</body>
</html>

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

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

$("form").serializeObject(); 

类似

$("form").serialize(); 
$("form").serializeArray();  

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};

来源：https://css-tricks.com/snippets/jquery/serialize-form-to-json/

其他方法：

http://blog.csdn.net/flashdelover/article/details/8185775

http://marsvaadin.iteye.com/blog/1717188

用JQuery来监听浏览器改变窗口大小事件

做web开发的时候会遇到需要监听浏览器窗口大小改变事件，而进行相关操作。这里像大家介绍一下 JQuery浏览器窗口改变事件。

$(window).resize();

这里需要注意 这个事件不要写在页面加载完成事件（ $(function(){…} ）内部，而需要写在他外面。

<script type=”text/javascript”>
$(window).resize(function() {
var width = $(this).width();
var height = $(this).height();
alert(‘width’+width+’-height’+height);

});
</script>