笔记（数组的操作&数值的转换&js如何让获取元素并对元素进行操作&link标签的加载解析&border边框）

最新推荐文章于 2023-09-06 15:40:33 发布

小新大人y

最新推荐文章于 2023-09-06 15:40:33 发布

阅读量190

点赞数

分类专栏： js 文章标签：数组的操作数值的转换 js如何获取元素并对元素进行操作 link标签的解析和加载 border边框

本文链接：https://blog.csdn.net/qq_44885374/article/details/90416531

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

数组的操作

join 数组转化为string（字符串）类型，join（""）参数是什么就表示按照什么符号连接字符串。
reverse 数组的翻转。
slice 截断数组，参数 start（开始的索引） end（结束的索引，取消不取大），截取完成之后对数组没有影响。
splice 参数 start（开始的索引） count（要截取的个数），截取完成之后对原数组有影响。
push 数组的追加：数组内容之后追加，参数是要追加的值，返回的值是追加完成后数组的长度。
unshift 数组的追加：数组内容之前追加，参数是要追加的值，返回的值是追加完成后数组的长度。
shift 数组的删除：删除最前面的，返回的是删除的值。
pop 数组的删除：删除最后面的，返回的是删除的值。
sort() 数组的排序：

sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字，并按升序或降序。
默认排序顺序为按字母升序。
注意：当数字是按字母顺序排列时"40"将排在"5"前面。（会导致结果不正确）

 var num11=[2,0,6,5,40];
    console.log(num11.sort());

在这里插入图片描述

使用数字排序，你必须通过一个函数作为参数来调用。
函数指定数字是按照升序还是降序排列。
这些说起来可能很难理解，你可以通过下面的代码进一步了解它。
注意：这种方法会改变原始数组！。

*//用sort对数组进行排序 var num1=[10,7,12,1,5,7,9,0]; num=num1.sort(function(n1,n2){ return n2-n1;//n2-n1>0时,则将n2与n1进行交换；可以实现数组的从大到小排列 //如果是n1-n2，n1-n2>0时将n1与n2进行交换；可以实现数组的从小到大排列 }); console.log(num);

数值的转换

Number()可用于所有的数据类型转换成number类型
整数可以通过十进制，八进制或十六进制的字面值来表示。其中，八进制字面值的第一位必须是0，然后是八进制数字序列（0-7）如果字面值中的数值超过范围，那么前导0将被忽略，后面的数值将被当做十进制数值解析
例如：
var num8=070; var num9=079; var num10=08; console.log(num8);//八进制的56 console.log(num9);//无效的八进制数值，忽略前导0 按十进制解析为79 console.log(num10);//无效的八进制数值，忽略前导0 按十进制解析为8
ParseInt()和ParseFloat()都可以将字符串转换为数值
ParseInt()会忽略字符串前面的空格，直到找到第一个非空格。如果第一个字符不是数字或者符号，返回NaN；如果第一个是数字符号，会继续解析第二个字符，直到遇到一个非数字字符；它能识别出各种整数格式（十进制，八进制和十六进制），解析规则与Number()类似。
NaN是非数值！
NaN本身有两个非同寻常的特点。第一:任何涉及 NaN的操作（例如 NaN/10）都会返回 NaN；第二： NaN与任何值都不相等包括 NaN本身。
但是还是有区别的：
1.ParseFloat()字符串中的第一个小数点是有效的，而第二个小数点是无效的。
2.ParseFloat()始终都会忽略签到0.

link标签的加载解析问题

link标签是同时加载的（先加载完成的先解析），script标签是加载完一个再加载另一个

关于border边框的问题

当定义border:none时，表示无边框样式，浏览器并不会对边框进行渲染，也就没有实际的高度；
定义边框时，除了设置边框宽度外，还必须设置边框的样式才能显示出来。

获取元素：如何获取dom（document object model）元素？

js里面的获取方式
getElementsByClassName 返回集合 htmlcollection 用法和数组一致
getElementsByName 返回的是nodelist 类型用法和数组一致
getElementById　返回的是单个对象直接使用
getElementsByTagName 返回的是htmlcollection 集合用法和数组一致

怎样操作dom元素

操作dom元素的属性和行为（事件）
操作元素的属性
注意： js不能操作一组对象只能分开操作

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #btn{
            height: 100px;
        }
    </style>
</head>
<body>
<button id="btn">按钮</button>
<script>
    /*
     *操作dom元素怎么操作
     * 操作dom元素的属性和行为（事件）
     * js不能操作一组对象  只能分开操作
     * 操作元素的属性
     * */
    var btn=document.getElementsByTagName("button");
    /*修改属性     -----js操作的属性都是行内的  (设置或者获取)*/
    btn[0].style.background="red";
    btn[0].style.width="200px";

    /*获取对象的属性*/
    console.log(btn[0].style.width);

    /*
    * js获取非行内样式    window.getComputedStyle()
    * */
    console.log(window.getComputedStyle(btn[0]).height);
</script>
</body>
</html>

在这里插入图片描述

小新大人y

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
笔记（数组的操作&数值的转换&js如何让获取元素并对元素进行操作&link标签的加载解析&border边框）

数组的操作join 数组转化为string（字符串）类型，join（""）参数是什么就表示按照什么符号连接字符串。reverse 数组的翻转。slice 截断数组，参数 start（开始的索引） end（结束的索引，取消不取大），截取完成之后对数组没有影响。splice 参数 start（开始的索引） count（要截取的个数），截取完成之后对原数组有影响。push 数组的追加：...
复制链接

扫一扫