JS中遇到的问题总结

1、css中用opacity、visibility、display属性将元素隐藏的对比分析

1、opacity用来设置透明度
2、display 定义建立布局时元素生成的显示框类型
3、visibility 用来设置元素是否可见。
4、opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的

5、使用 opacity 和 visibility 属性时，元素还是会占据页面空间的，而使用 display 属性时，元素不占据页面空间

6、使用 opacity 和 display 属性时，父元素对子元素的影响很明显，子元素设置的 opacity 和 display 属性是不起作用的，显示的效果和父元素一样，而使用 visibility 属性时，子元素如果设置为 visibility:visible; 并没有受父元素的影响，可以继续显示出来

7、使用 display:none; 就不用举例子了，因为使用 display 属性的话，元素不仅看不见，而且也不占据页面空间，所有不会触发事件。

总的来说，使用 visibility 和 display 属性，自身的事件不会触发，而使用 opacity 属性，自身绑定的事件还是会触发的

8、visibility 和 display 属性是不会影响其他元素触发事件的，而 opacity 属性 如果遮挡住其他元素，其他的元素就不会触发事件了
回流
当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。
每个页面至少需要一次回流，就是在页面第一次加载的时候。
dispaly 属性会产生回流，而 opacity 和 visibility 属性不会产生回流。

重绘
当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color。则称为重绘。
dispaly 和 visibility 属性会产生重绘，而 opacity 属性不一定会产生重绘

注意：回流必将引起重绘，而重绘不一定会引起回流。

2、html中cursor的属性

• default ：默认光标，通常是一个箭头
• auto ：默认，浏览器设置的光标
• crosshair ：光标表示十字线
• pointer ：光标表示指示链接的指针(一只手)
• move： 光标表示对象可被移动
• e-resize： 光标表示矩形框的边缘可被向右移动
• ne-resize：光标表示矩形框的边缘可被向上及向右移动
• nw-resize：光标表示矩形框的边缘可被向上及向左移动
• n-resize： 光标表示矩形框的边缘可被向上移动
• se-resize：光标表示矩形框的边缘可被向下及向右移动
• sw-resize：光标表示矩形框的边缘可被向下及向左移动
• s-resize： 光标表示矩形框的边缘可被向下移动
• w-resize：光标表示矩形框的边缘可被向左移动
• text ：光标表示文本
• wait ：光标表示程序正忙(通常是一只表或沙漏)
• help： 光标表示帮助(通常是一个问号)

3、 在引入的css或者js文件后面加参数的作用

使用参数有两种可能：

第一、脚本并不存在，而是服务端动态生成的，因此带了个版本号，以示区别。
即代码对于文件来说 等价于 但浏览器会认为他是 该文件的某个版本！

第二、客户端会缓存这些css或js文件，因此每次升级了js或css文件后，改变版本号，客户端浏览器就会重新 下载新的js或css文件 ，刷性缓存的作用。大家可能有时候发现修改了样式或者js，刷新的时候不变，就是客户端缓存了css或者js文件，因此加上参数还是有好处的！

第二种情况最多，也可能两种同时存在。

版本号，可以是一个随机数，也可以是一个递增的值，大版本小版本的方式，或者根据脚本的生成时间书写，比如 20080727182553 就是精确到了生成脚本的秒，而 2.3.3 就是大版本小版本的方式。

4、原生js使用getComputedStyle方法获取css内部属性值

IE中使用的是obj.currentStyle方法，其他浏览器用的是getComputedStyle 方法

function getStyle(element, attr) {
        if(element.currentStyle) {
                return element.currentStyle[attr];
        } else {
                return getComputedStyle(element, false)[attr];
        }
}

如果想获得 lists 的 left 属性值，只需要：getStyle(lists,“left”)

5、JS处理语言国际化的一个方法

function getParameter(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
    var r = location.search.substr(1).match(reg);
    if (r!=null) return (r[2]); return null;
}

以上是一个用于获取url中的查询参数的 js 方法

1. 其中的正则表达式用到了字符串拼接
   (^|&) 表示行首或者以&开头
   name 表示传进来的变量
   = 还是表示等号
   ([^&]*) 表示非&的任意个字符 (0到多个)
   (&|$) 表示以&结束或者是行尾
2. var r = location.search.substr(1).match(reg);
   location.search.substr(1) 用于获得 URL 的查询部分 (?后面的内容).
   比如地址栏中的地址是：
   r[0] = “&name=QQ&” 是整个正则表达式匹配到的内容
   r[1] = “&” 是正则表达式中第一个括号匹配到的内容,即 (^|&) 匹配到的内容
   r[2] = “QQ” 是正则表达式中第二个括号匹配到的内容,即 ([^&]*)匹配到的内容
   r[3] = “&” 是正则表达式中最后一个括号匹配到的内容即 (&|$) 匹配到的内容

6、js数组删除某个未知索引的元素

举例数组：var arrays=[‘a’,‘b’,‘c’,‘d’,‘e’,‘f’]
你想要删除d这个元素，你又不知道d具体的索引，采用如下方法：
arrays.splice($.inArray(‘d’,arrays),1);

7、Jquery如何获取子元素

1、children()方法获取最外层ul下面直接子集元素li：$("#ul").children("li")
需要注意的是，如果li元素下还有li元素，children方法将不会被获取。我们可以用length来测试获取的个数“$("#ul").children("li").length”，最后输出结果为3
2、find()方法获取ul下所有元素li：$("#ul").find("li")
需要注意的是，find方法会无限循环查找ul标签节点下的li，一直找到没有为止，用length来测试获取个数“$("#ul").find("li").length”，最后输出结果为9

8、js 判断网络状态

1、navigator.onLine()

if (navigator.onLine) {
    alert("正常上网");
} else {
    alert('无网络');
}

2、addEventListener(‘online’/‘offline’)：网络状态改变时自动触发

window.addEventListener('online',function () {
    alert("正常上网");
})
window.addEventListener('offline',function () {
    alert('无网络');
})

3、获取网络资源： 插入一个网络图片，等同于发起请求

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<img id="img-test" style="display:none;" onerror="getImgError()" />
<script>
        function getImgError() {
            alert('无网络');
        }
        $().ready(function () {
            var imgPath = "https://www.baidu.com/img/bd_logo1.png";
            var timeStamp = Date.parse(new Date());
            $("#img-test").attr("src", imgPath + "?timestamp=" + timeStamp);
            alert("正常上网");
        });
</script>

9、纯JS打造级联选择器控件，仿ElementUi(附源码)

源码

10、有关ztree的一些代码

1、zTree笔记，设置无法勾选父节点（禁用父节点）和父节点禁用时回显选中子节点时关联父节点状态
2、ztree树的模糊搜索功能
3、ZTREE多选框模糊查询
4、Ztree实现搜索框自动检索功能
5、可搜索多选树形图（web前端）
6、获取ztree树的选中子菜单信息并且提交给后端
7、ZTree的全选 反选 全不选 取消 清空

11、有关上下左右拖动的代码

1、vue中实现左右，上下拖拽(全,可复制)
2、分隔条左右拖动 js 实现
3、jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小
4、js原生对页面做个改变左右边大小的鼠标拖件
5、js实现可调节左右栏
6、js左右分栏拖动效果，来自互联网