• 常见问题及解决方案(前端篇)


    一、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

    六、js属性及方法

    Math.round(x) 四舍五入最接近的整数,参数x必须是数字。

    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

    语法
    setTimeout(code,millisec)
    参数 描述
    code 必需。要调用的函数后要执行的 JavaScript 代码串。
    millisec 必需。在执行代码前需等待的毫秒数。

    javascript的方法可以分为三类:

    a 类方法

    b 对象方法

    c 原型方法

    z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
    注释:元素可拥有负的 z-index 属性值。
    注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
    说明

    该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

    默认值: auto
    继承性: no
    版本: CSS2
    JavaScript 语法: object.style.zIndex="1"

  • 相关阅读:
    1822. Sign of the Product of an Array
    1828. Queries on Number of Points Inside a Circle
    1480. Running Sum of 1d Array
    C++字符串
    Git&GitHb学习记录
    54. Spiral Matrix
    104. Maximum Depth of Binary Tree
    110. Balanced Binary Tree
    136. Single Number
    19、泛型入门
  • 原文地址:https://www.cnblogs.com/laowangc/p/8921247.html
Copyright © 2020-2023  润新知