作者： admin

水平滚动

简单制作，速度自行修改。

对于初学者感兴趣可以学习，制作的思路提高下水平。

demo:https://sdeno.com/wp-content/uploads/2016/06/up_down.html

2016 06.22
js函数工具–lodash.js

此函数工具类似于underscore.js。具体可以参考API：

https://sdeno.com/wp-content/uploads/2016/06/lodash/lodash.html

官网：https://lodash.com/

下载：lodash.js下载

浏览器的支持：

Chrome 49-50, Firefox 45-46, IE 9-11, Edge 13, Safari 8-9, Node.js 0.10-6 & PhantomJS 1.9.8.

2016 06.21

推荐：input表单验证插件–jquery.validate.min.js

input 正则表单验证

兼容IE8浏览器
表单验证插件推荐使用jquery.validate.min.js，原因：
1，插件从2006年持续更新直到现在，通用大部分功能，目前最新的1.15.0。
2，作者是jquery UI的组长是大牛，以后学习插件看看作者是不是大牛。

大概感受下代码风格：

$('#form').validate({
   debug:true,
   rules:{
     username:{ //rules里的属性是，表单的name属性值
        required:{
           depends:function(element){ //在rules中的每一个规则有一个depends属性,只有满足条件时候才返回true。
               return $('#pass').is(':filled'); //只有当密码填写后，username的必填才开启
           }
        },
       minlength:{
          param:2,
          depends:function(){} //当满足条件时，就输出参数param:2
       },
       maxlength:5,
       remote:{
         url:'check.php',
         type:'get',
         data:{name:'陈',age:33}
       }
     },

    pass:{
       required:true,
       minlength:2,
       maxlength:5
    }
  },  //rules对象闭合

  messages:{
     username:{
       required:'必填',
       minlength:jQuery.format('帐号不得小于{0}');, //帐号不得小于2位
       maxlength:'jQuery.format('帐号必须在{0}-{1}');', //帐号要在2到5之间
       remote:'用户名不存在'
     },
     pass:{
       required:'必填',
       minlength:'长度至少2位',
       maxlength:'长度不能超过5位'
     }
  },

   submitHandler:function(form){ //当表单验证都成功时，这里还可以修改提交方式使用ajax提交
       console.log( $('form').serialize() );
   },
   invalidHandler:function(event,validator){ //表单填写失败后的回调
       alert(validator.numberOfInvalids()) ;
   },
   groups:{
      login:'username pass ok_pass' // 让3个出错元素的信息，在一个地方显示,与errorPlacement配合使用
   },
   errorPlacement:function(error,element){ //错误信息放在哪里，与groups配合使用
      if( $(element[0]).attr('id')=='username' ){
         error.appendTo( $('.usererro') ); //将用户名错误的信息指定在一个地方显示
      }
   },
   onsubmit:true, //默认是true,如果是false,点击提交表单时所有的表单是不验证的，只有填写表单才验证
   errorClass:'errorclass', //自定义错误信息class
   validClass:'rightclass', //自定义正确时的class

   errorElement: "em", //修改错误信息的laber标签
   wrapper: "li", //用什么样的容器包裹错误信息
   errorLabelContainer: "#messageBox", //把错误信息统一放在一个容器里
   highlight:function(element,errorClass,validClass){ //给未通过验证的表单添加效果

   },
   unhighlight:function(element,errorClass,validClass){ //去除未通过验证的表单添加效果

   },
   showErrors:function(errorMap,errorList){ //动态更新错误信息条目，其实它的功能是时时更新的作用
       var error=this.numberOfInvalids();
          if(error){
             $('.myerror').html('目前有'+error+'条错误信息');
          }else{
             $('.myerror').hide();
          }
          this.defaultShowErrors(); //显示默认错误信息
   }，
   onfocusout:false, //默认值为true,如果false时，失去焦点就不会验证表单了,建议不修改
   onkeyup:false ,//默认为true,建议不修改
   onclick:false, //,建议不修改
   focusInvalid:false, //验证错误后无法获取焦点,建议不修改
   ignoreTitle:true, //建议开启，禁止读取title的值为错误信息
 
 });

基本验证方法(以下方法适用于90%的表单)：

required:true //必填
remote //远程校验，例如注册帐号先匹配下是否有重复的帐号，免得提交了在去匹配。

minlength:2 //最小长度
maxlength:10 //最大长度
rangelength //长度范围如：[2,10]

min:2 //设置最小值
max:10 //设置最大值
range:[2,10] //取值范围

email:true //邮箱格式
url:true // url格式，要有http://
data:true // 宽松型时间格式（不太推荐）
dataISO:true // 严格时间格式时间格式可以是2011-11-11、2011/11/11、2011-11/21

number:true //数字类型
digits:true //正整数
equalTo:’#pass’ //检查是否与某一个表单的值一样,要于id是pass的值一致

ignore:’#pass’ //跳过验证

高级方法：

$(‘#form’).valid() //检查#form下的所有表单是否填写正确，有一个错误，返回false,都对返true
$(‘#pass’).rules(); //获取某一表单规则
$(‘#pass’).rules(‘add’,{min:2,max:10}); //动态添加规则
$(‘#pass’).rules(‘remove’,’min max’); //动态删除规则

validator对象
$(‘#form’).validate(); //返回一个validator对象
var validator=$(‘#form’).validate();
validate()方法默认返回一个validator对象，所以对象中就有很多方法可以使用：

validator.form() //验证所有表单是否符合规则，类似valid()
validator.element(‘#pass’) //验证某一个表单是否符合规则
validator.resetForm() //隐藏所有错误提示
validator.showErrors({username:’动态添加错误信息’}) //为某一个元素添加错误信息
validator.numberOfInvalids() //提交表单时候返回，出错表单的数量
validator静态方法

jQuery.format();

jQuery.validator.setDefaults({ //修改默认配置
   debug: true //默认为validator对象的debug开启，以后遇到多个form就不需要一个个起开启了
});

 jQuery.validator.addClassRules({
    name: { //有class="name"的表单都会有以下规则
      required: true,
      minlength: 2
    },
    zip: { //有class="zip"的表单都会有以下规则
      required: true,
      digits: true,
      minlength: 5,
      maxlength: 5
    }
 });

选择器
$( “input:blank” ) //选择所有空的表单
:filled //选择所有不为空的
:unchecked //选择所有没有被选中的

自定义验证规则
$.validator.addMethod(‘postcode’,function(value,element,params){
//自定义规则
},’错误信息’);

例如：

$('#code').rules('add', {
  required : true,
  code : true,
  messages : {
    required : '邮编不得为空！',
  },
});
 
 $.validator.addMethod('code', function (value, element) {
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
 }, '请输入正确的邮政编码！');

以后需要添加什么规则就自己套用

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

以上方法是写在js中，还有另外一种写法是用class和在当前属性中写相应的属性名和值
$(‘#form’).validate(); //执行一下

学习站点：http://www.verycd.com/topics/2956408/ 47-49

http://www.imooc.com/video/7474

官网：https://jqueryvalidation.org/

jquery.validate.min

2016 06.21

破解PhpStorm 10.0.2

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

安装后运行:

输入：http://idea.lanyus.com

一些习惯配置：

主题选择：Blackboard

http://jingyan.baidu.com/article/20095761cbef40cb0721b417.html

2016 06.20

js的事件监听、捕获和冒泡的关系

js的事件监听一般有两种写法

方法一：

element.addEventListener(type, listener[, useCapture]); // IE6~8不支持
element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持（垃圾IE专属）

方法二：

element[’on’ + type] = function(){} // 所有浏览器

这两种方法的区别是除了兼容性还有：

使用addEventListener时

<div id="father"></div>

document.getElementById('father').addEventListener('click',function(){
 alert('爸爸1');
},false);

document.getElementById('father').addEventListener('click',function(){
 alert('爸爸2');
},false);

结果：都能执行，先弹出爸爸1之后是爸爸2
（对于attachEvent结果类似但是顺序有点不同可以参考《addEventListener 的用法示例介绍》）
----------------------------------------

使用on+type方法时：
element.onclick = function(){ console.log(0); }
element.onclick = function(){ console.log(1); }

结果：只能执行最后一个事件

谈谈事件的捕获和冒泡

红色：捕获事件

深蓝：目标事件

绿色：冒泡事件

捕获阶段：在事件对象到达事件目标之前，事件对象必须从window经过目标的祖先节点传播到事件目标。这个阶段被我们称之为捕获阶段。在这个阶段注册的事件监听器在事件到达其目标前必须先处理事件。
目标阶段：事件对象到达其事件目标。这个阶段被我们称为目标阶段。一旦事件对象到达事件目标，该阶段的事件监听器就要对它进行处理。如果一个事件对象类型被标志为不能冒泡。那么对应的事件对象在到达此阶段时就会终止传播。
冒泡阶段：事件对象以一个与捕获阶段相反的方向从事件目标传播经过其祖先节点传播到window。这个阶段被称之为冒泡阶段。在此阶段注册的事件监听器会对相应的冒泡事件进行处理。

如果以上文字抽象，就用例子来说明：

<div id="father" style="height: 100px;width: 100px;background: red; position: absolute; left: 100px;top: 100px;">
  <div id="son" style="height: 50px;width: 50px;background: yellow;">
     <div id="son2" style="height: 40px;width: 40px;background:pink;"></div>
  </div>
</div>


<script>
 document.getElementById('father').addEventListener('click',function(){
   alert('爸爸1');
 },false);


 document.getElementById('son').addEventListener('click',function(Event){
   alert('儿子');
 },false);



 document.getElementById('son2').addEventListener('click',function(Event){
   alert('儿子2');
 },false);

 </script>

在三个div层监听了click事件当点击了粉红色区域时也就是点击了son2的同时，也就相当于点击了father和son，就会发生以下事情：
捕获：要找到点击的目标事件前，要从html标签在到body标签以此往下找直到找到目标为止，
在这过程中经过的DOM不会触发事件它们自己绑定的事件，这过程就叫捕获阶段。

目标：也就是用户想要触发事件DOM的元素，这时候目标事件就会第一个先触发了。

冒泡：从目标元素开始在经过其他DOM元素直到body标签在到html标签，跟捕获相反的方向叫冒泡，
在这过程中，从最接近目标元素开始一一执行自己绑定的事件，这过程就叫冒泡阶段。

结果：先弹出儿子2 在到 儿子 最后爸爸1

阻止所有默认行为以及冒泡（不了解默认行为可以参考《html中默认行为有哪些》）

<script>
 document.getElementById('father').addEventListener('click',function(){
   alert('爸爸1');
 },false);


 document.getElementById('son').addEventListener('click',function(Event){
  //Event.stopPropagation(); //阻止所有默认行为，冒泡从这里开始停止
  // Event.bubbles(false); //跳过此冒泡，冒泡不经过这里，继续往上冒泡，不兼容IE
  alert('儿子');
 },false);



 document.getElementById('son2').addEventListener('click',function(Event){
  alert('儿子2');
 },false);

 </script>

在一个事件完成了所有阶段的传播路径后，它的Event.currentTarget会被设置为null并且Event.eventPhase会被设为0。Event的所有其他属性都不会改变（包括指向事件目标的Event.target属性）

（currentTarget 获取监听元素的DOM，绑定谁就获取谁的DOM $(‘.move’).click ..得到的是.move的DOM（专一）
alert(e.currentTarget)=alert(this)）

2016 06.17

作者： admin

水平滚动

js函数工具–lodash.js

推荐：input表单验证插件–jquery.validate.min.js

破解PhpStorm 10.0.2

js的事件监听、捕获和冒泡的关系

谈谈事件的捕获和冒泡