JS中遇到的问题总结

琪公子呀

于 2023-05-05 19:01:16 发布

阅读量777

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Benxiaohai_311/article/details/130512082

版权

JavaScript 专栏收录该内容

60 篇文章 3 订阅

订阅专栏

文章目录

1、[css中用opacity、visibility、display属性将元素隐藏的对比分析](https://segmentfault.com/a/1190000015116392)
2、html中cursor的属性
3、在引入的css或者js文件后面加参数的作用
4、原生js使用getComputedStyle方法获取css内部属性值
5、JS处理语言国际化的一个方法
6、[js数组删除某个未知索引的元素](https://www.jianshu.com/p/dc9126afe547)
7、[Jquery如何获取子元素](https://blog.51cto.com/qilei/5024922)
8、[js 判断网络状态](https://www.cnblogs.com/-LemonWater-/p/15589752.html)
9、[纯JS打造级联选择器控件，仿ElementUi(附源码)](https://juejin.cn/post/6844904194189557773)
10、有关ztree的一些代码
11、有关上下左右拖动的代码

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 方法

其中的正则表达式用到了字符串拼接
(^|&) 表示行首或者以&开头
name 表示传进来的变量
= 还是表示等号
([^&]*) 表示非&的任意个字符 (0到多个)
(&|$) 表示以&结束或者是行尾
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>