常见问题及解决方案（前端篇）

一、jquery validate

默认校验规则
序号规则描述
1 required=true 必须输入的字段。
2 remote= "check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email=true 必须输入正确格式的电子邮件。
4 url=true 必须输入正确格式的网址。
5 date=true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6 dateISO=true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7 number=true 必须输入合法的数字（负数，小数）。
8 digits="true" 必须输入整数。
9 creditcard="" 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept= 输入拥有合法后缀名的字符串（上传文件的后缀）。
12 maxlength=5 输入长度最多是 5 的字符串（汉字算一个字符）。
13 minlength=10 输入长度最小是 10 的字符串（汉字算一个字符）。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max=5 输入值不能大于 5。
17 min=10 输入值不能小于 10。

附原文路径：http://www.runoob.com/jquery/jquery-plugin-validate.html

二、Jquery 选择器

Jquery 选择器
1、基本选择器
a.ID选择器（#ID名称）
b.样式选择器（.样式名称）
c.标签选择器（标签名称）
2.符合选择器
a.交集选择器（并且）
多种选择器（li.class）
b.并集选择器（或者）
多种选择器之间添加(h2,h1)
c.后代选择器(后代选择器) (ul span)
d.子带选择器，只选择直接后代节点，第二级节点
e.属性选择器 $("li[name='age']")
3.过滤选择器
a.按下标过滤选择器(eq lt gt)
b.属性过滤

附原文路径：http://jquery3.2.1.com

三、js callback函数理解：

回调函数，就是放在另外一个函数（如 parent）的参数列表中，作为参数传递给这个 parent，然后在 parent 函数体的某个位置执行。说来抽象，看例子：

 1 // To illustrate the concept of callback
 2 var doit = function(callback)
 3 {
 4 var a = 1,
 5 b = 2,
 6 c = 3;
 7 var t = callback(a,b,c);
 8 return t + 10;
 9 };
10 var d = doit(function(x,y,z){
11 return (x+y+z);
12 });
13 console.log(d);

先定义 doit 函数，有一个参数 callback。这个 callback 就是回调函数，名字可以任意取。看函数体，先定义三个变量 a,b,c。然后调用 callback 函数。最后返回一个值。
下面就调用 doit 函数了。要注意的是，刚才定义 doit 时，callback 并没有定义，所以刚才并不知道 callback 是干什么用的。这其实很好理解，我们平时定义函数的时候，参数也只是给出了一个名字，比如 a,在函数体中使用 a，但整个过程也并不知道 a 到底是什么，只有在调用那个函数的时候才指定 a 的具体值，比如2.回过头来，在调用 doit 的时候，我们就需要指定 callback 究竟是个什么东西了。可以看到，这个函数完成了一个 sum 功能。
上述代码的执行过程是：
调用 doit函数，参数是一个匿名函数；进入 doit 的函数体中，先定义 a,b,c，然后执行刚才的匿名函数，参数是 a,b,c，并返回一个 t，最后返回一个 t+10给 d。

四、js获取html元素的宽度高度及相对位置

精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

五、js三元运算符

如名字表示的三元运算符需要三个操作数。

语法是条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

1 <script type="text/javascript">
2     var b=5;
3     (b == 5) ? a="true" : a="false";
4     document.write(" --------------------------- "+a);
5 </script>

结果： --------------------------- true

1 <script type="text/javascript">
2     var b=true;
3     (b == false) ? a="true" : a="false";
4     document.write(" --------------------------- "+a);
5 </script>

结果： --------------------------- false