AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Python自动化开发学习15-JavaScript和DOM

2017-11-15 1407
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

初识JavaScript

JavaScript（后面都简写为js）是一门独立的语言。浏览器本身就具有js解释器。

js的存在形式

和css类似，js代码要放在<script>标签中。
同样和css类似，还可以写在一个js文件中，比如文件名就叫 commons.js ，然后在head中引入 &lt;script src="commons.js"&gt;&lt;/script&gt; ，src的值就是js的文件路径。
<script type="text/javascript"> 和 <script> 是一样的，或者说script默认就是js。看到这么写全的情况要认识。
<script>标签存放的位置
上面两种情况都用的是 <script> 标签。而这个标签可以放在head中，也可以放在body中。解释器是从上到下顺序执行的，所以放在越上面就越早执行。这就有一个问题，如果script先执行，那么执行完成script代码后才会导入网页内容。这样用户体验会比较差。而且用户只有先看到网页的内容才有可能会需要用到script的代码。所以建议把<script>标签放到最后，也就是body的内部的最下面。这样就是先显示网页的内容，然后再导入js的动态内容。

hellow world

语法：alert(message) 会显示一个带有消息和确定按钮的警告框。
举例如下，顺便看一下上面提到的代码的执行顺序：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert("Hello 1")
    </script>
</head>
<body>
<h1>什么时候出现这里的内容</h1>
<script>
    alert("Hello 2")
</script>
</body>

在head里写了一个alert，在body的下面也写了一个alert。打开网页后，会先弹出上面的消息，然后显示网页的内容，最后再弹出最下面的消息。

注释

js代码的注释的语法如下：
单行注释：// 你的代码
多行注释：/* 你的代码 */

<body>
<h1>什么时候出现这里的内容</h1>
<script>
    // alert("Hello 1")
    alert("Hello 2")
    /*
    这里的内容也不会执行
    alert("Hello 3")
    */
</script>
</body>

JavaScript 语句

js可以通过换行或者是分号来区分单独的语句。所以对于单行语句，行尾有没有分号都一样。但是建议加上分号，这样我们的js在编辑完成上线时，可以去掉语句间的缩进和换行（即变成很长的一行代码），节省空间。保证用户端的访问的流畅。

学习JavaScript

变量

变量直接赋值就可以是使用：

<script>
    a = "hello"
    alert(a)
</script>

但是在函数中的变量就存在全局变量和局部变量的区别。需要先用var声明变量，这个变量才是局部变量，否则就是全局变量。建议都先加上var声明为局部变量。

<script>
    function func() {
        // 局部变量
        var a = 'A';
        // 全局变量
        b = 'B'
    }
</script>

用控制台调试js代码

除了写一个html文件来调试代码外，也可以用浏览器自带的控制台来调试，用起来就类似一个IDE。
先用 about:blank 来打开一个空白页，然后F12进入开发调试工具，找到控制台（Console）标签就可以在这里直接写代码了。
另外使用js命令 console.log() 可以直接向你的控制台输出信息：

<body>
<script>
    console.log("你好！")
</script>
</body>

打开这样的一个页面，应该是空白的，去控制台看一下有没有一条消息。

定义函数（function）

使用function来定义函数，后面跟函数名，然后是一个"{}"大括号。大括号js的代码块，大括号内部就是这个函数的代码。

<script>
    // 定义一个函数，函数名 fun
    function fun() {
        alert("你好！")
    }
    // 调用执行函数
    fun();
</script>

数据类型

js中的数据类型分为原始类型和对象类型：

  • 原始类型
    • 数字
    • 字符串
    • 布尔值
  • 对象类型
    • 数组
    • 字典

另外还有2个特别的值：

  • null，它表示一个特殊值，常用来描述“空值”。
  • undefined，是一个特殊值，表示变量未定义。

数字（Number）

字符串转数字的方法：
parseInt() ：转为整形，不成功则NaN。
parseFloat() ：转为浮点数，不成功则NaN。

> parseInt('123')
< 123
> parseInt('123.123')
< 123
> parseInt('abc')
< NaN
> parseFloat('321')
< 321
> parseFloat('321.123')
< 321.123
>

一些常量：
Math.E ：常量e，自然对数的底数。
Math.PI ：圆周率。

一些静态函数：
Math.sin() ：计算正弦值
Math.asin() ：计算反正弦值，根据值计算出弧度
Math.cos() ：计算余弦值
Math.acos() ：计算反余弦值，根据值计算出弧度
Math.tan() ：计算正切值
Math.atan() ：计算反正切值，根据值计算出弧度
Math.abs() ：计算绝对值
Math.round() ：返回一个整数，4舍5入。
Math.ceil() ：返回一个整数，浮点数向上取整。
Math.floor() ：返回一个整数，浮点数向下取整。

> Math.ceil(1.234)
< 2
> Math.ceil(-1.234)
< -1
> Math.floor(1.234)
< 1
> Math.floor(-1.234)
< -2
>

Math.random() ：生成随机数
Math.sqrt() ：计算平方根

字符串（String）

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
常用方法：
str.length ：获取字符串的长度
str.trim() ：移除字符串两边的空白，也可以指定只移除左边（trimLeft）或右边（trimRight）。

> str = '  abc  '
< "  abc  "
> str.length // 字符串长度
< 7
> str.trim() // 移除空白
< "abc"
> str.trimLeft() // 移除左边的空白
< "abc  "
> str.trimRight() // 移除右边的空白
< "  abc"
>

str.concat() ：字符串拼接

> str = 'aaa'
< "aaa"
> str.concat('bbb')
< "aaabbb"
> str.concat(' ','bbb',' ','ccc',' ',111)  // 可以拼接多个字符串，数字也能处理
< "aaa bbb ccc 111"
>

str.charAt() ：返回字符串中的第n个字符
str.substring() ：根据索引获取子序列，字符串切割。
str.slice() ：字符串切片，其实和上面的subsring差不多。不过如果第一个参数大于第二个参数，这里会返回空字符串，而substring会自动调整两个参数的位置。

> str = 'abcdefg'
< "abcdefg"
> str.charAt(0)  // 下标是0的字符
< "a"
> str.charAt(2)  // 下标是2的字符
< "c"
> str.substring(2) // 返回下标2到末尾的字符串
< "cdefg"
> str.substring(2,5) // 返回下标2，到下标5（不包括）之前的字符串
< "cde"
> str.slice(2,5)  // 结果和substring一样
< "cde"
> str.substring(5,2)  // 会自动调整参数位置
< "cde"
> str.slice(5,2)  // 返回空字符串
< ""
>

到这里可以先暂停一下，看一下下一个小标题定时器和跑马灯示例
str.indexOf() ：获取子序列的下标
str.lastIndexOf() ：获取子序列的下标，从后往前找。

> str = 'sonmething for nothing!'
< "sonmething for nothing!"
> str.indexOf('thing')
< 5
> str.indexOf('thing',6) // 从下标6的位置开始查找
< 17
> str.lastIndexOf('thing',16)  // 从下标16的位置开始往前查找
< 5
>

str.toLowerCase() ：转为小写字母
str.toLocaleUpperCase() ：转为大写字母

> str = "Any Way"
< "Any Way"
> str.toLowerCase()
< "any way"
> str.toLocaleUpperCase()
< "ANY WAY"
>

str.split() ：把字符串分割成数组。第一个参数，指定进行分隔的字符串或正则表达式。第二个参数，指定返回数组的最大长度。

> str = 'What are you doing?'
< "What are you doing?"
> str.split()  // 没有参数的话，就没有分隔，但是变成了一个数组
< [object Array]: ["What are you doing?"]
> str.split(' ')  // 按空格进行分隔
< [object Array]: ["What", "are", "you", "doing?"]
> str.split(' ',2)  // 指定返回数组的最大长度，多余的就丢弃了
< [object Array]: ["What", "are"]
> str.split('')  // 如果按字符串进行分隔，就是分隔每个字符
< [object Array]: ["W", "h", "a", "t", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", "?"]
>

最后还有3个方法，先放这里留个空，之后讲正则表达式的时候还会再遇到。
str.search() ：检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
str.match() ：在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
str.replace() ：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

布尔值（Boolean）

js里的布尔值分别是 'true' 和 'false' ，都是小写的。
比较运算符：

  • == ：等于。值相等，类型可以不一样
  • != ：不等于。只比较值
  • === ：全等。值和类型都相等
  • !== ：不等于。比较值和类型
  • &lt;、&gt;、&lt;=、&gt;= ：小于、大于、小于等于、大于等于

逻辑运算符：

  • && ：and，与
  • || ：or，或
  • ! ：not，非

数组（Array）

常用方法：
arr.length ：数组的大小
arr.push() ：向数组的末尾添加一个或多个元素，并返回新的长度
arr.pop() ：删除并返回数组的最后一个元素
arr.unshift() ：向数组的开头添加一个或更多元素，并返回新的长度
arr.shift() ：删除并返回数组的第一个元素

> arr = [11,22,33,44]
< [object Array]: [11, 22, 33, 44]
> arr.length
< 4
> arr.push(55,66)  // 添加2个元素到末尾
< 6
> arr.pop()  // 取出最后一个元素
< 66
> arr.unshift('a','b')  // 在头部插入2个元素
< 7
> arr.shift()  // 取出第一个元素
< "a"
> arr  // 现在数组的成员
< [object Array]: ["b", 11, 22, 33, 44, 55]
>

arr.splice() ：在数组中添加/删除元素，然后返回被删除的元素。
语法： arrayObject.splice(index,howmany,item1,.....,itemX)
index ：必需。整数，规定起始元素的位置，使用负数可从数组结尾处规定位置。
howmany ：必需。要删除的元素数量。如果设置为 0，则不删除元素。
item ：可选。向数组添加的新元素。

> arr = [11,22,33,44]
< [object Array]: [11, 22, 33, 44]
> arr.splice(1,2,'a','b','c')  // 从下标1的位置，删除2个元素，并且在这个位置插入新的元素
< [object Array]: [22, 33]
> arr  // 操作后的数组
< [object Array]: [11, "a", "b", "c", 44]
>

arr.slice() ：切片
arr.reverse() ：反转
arr.join() ：把数组中的所有元素拼接为一个字符串。参数可选，指定要使用的分隔符。如果省略参数，则使用逗号作为分隔符。
arr.concat() ：连接两个或多个数组。参数可以是具体的值，也可以是数组对象。可以是任意多个。
arr.sort() ：对数组的元素进行排序

字典

字典没有太多内容，直接看定义和取值的例子：

> dic = {'k1':'v1','k2':'v2','k3':'v3'}
< [object Object]: {k1: "v1", k2: "v2", k3: "v3"}
> dic['k1']
< "v1"
>

定时器

使用setInterval可以创建一个定时器，第一个参数是要执行的代码（一般是一个函数），第二个参数是间隔时间（ms）。
下面是一个每个一段时间弹框的例子：

<script>
    // 创建一个定时器
    // 第一个参数可以是一个函数，第二个参数是间隔时间（ms）
    setInterval("alert('Hellow')", 2000)
</script>

跑马灯示例

运用定时器和上面的字符串的内容来实现一个字符串滚动显示的效果：

<body>
<div id="welcome">欢迎公司领导莅临指导。 </div>
<script>
    function func() {
        // 根据id来获取到标签
        var tag = document.getElementById('welcome');
        // 获取标签内部的内容
        var content = tag.innerText;
        var f = content.charAt(0);
        var l = content.substring(1, content.length);
        // 重新拼接成新的字符串
        var new_content = l.concat(f);
        // 给标签内容重新赋值，赋值后页面显示就会有变化
        tag.innerText = new_content;
    }
    setInterval("func()", 500)
</script>
</body>

JavaScript 语句

for/in 循环

遍历的是索引，不是值。遍历一个数组，遍历的就是数组的下标：

> arr = ['a','b','c','d']
< [object Array]: ["a", "b", "c", "d"]
> for (i in arr){
      console.log(i)  // 这个是下标不是值
      console.log(arr[i])  // 这样才能取到值
  }
    0
    a
    1
    b
    2
    c
    3
    d
< undefined
>

遍历一个字典，就是遍历字典的key：

> dic = {'k1':'v1','k2':'v2','k3':'v3'}
< [object Object]: {k1: "v1", k2: "v2", k3: "v3"}
> for (k in dic){
      console.log(k);
      console.log(dic[k]);
  }
    k1
    v1
    k2
    k3
    v3
< undefined
>

for 循环

这种for循环是用的比较多的。但是这种循环驾驭不了字典的key，所以遍历不了字典。遇到字典的情况还是得用for/in。

for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块
  }

语句1：在循环（代码块）开始前执行
语句2：定义运行循环（代码块）的条件
语句3：在循环（代码块）已被执行之后执行

> for (var i=0; i<5; i++){
      console.log(i)
  }
    0
    1
    2
    3
    4
< undefined
>

if 语句

语法：

if (条件 1)
  {
  当条件 1 为 true 时执行的代码
  }
else if (条件 2)
  {
  当条件 2 为 true 时执行的代码
  }
else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码
  }

js的基础先会这么多，下一节在补充其他的内容

DOM

文档对象模型 DOM（Document Object Model）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

查找

首先，要先通过查找的方法获取到对象。

直接查找

document.getElementById() ：根据ID获取一个标签
document.getElementsByName() ：根据name属性获取标签集合
document.getElementsByClassName() ：根据class属性获取标签集合
document.getElementsByTagName() ：根据标签名获取标签集合
根据ID获取到的是唯一的值，返回的是对象。其他的方法获取到的值可能是多个，返回的都是包含每一个对象的数组。
我们可以通过获取对象的innerText属性，来获取到标签中的文本内容。也可以通过修改这个属性，来修改页面的内容。
举例：

<body>
<div id="i1" class="c1">我是i1</div>
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<script>
    i1 = document.getElementById('i1');
    alert(i1.innerText);  // 弹框显示i1的信息
    t1 = document.getElementsByTagName('span');
    // 修改span标签中的内容
    for (var i=0; i<t1.length;i++){
        t1[i].innerText = i;
    }
</script>
</body>

间接查找

parentElement ：父标签
children ：所有子标签集合，这个是数组
firstElementChild ：第一个子标签
lastElementChild ：最后一个子标签
nextElementtSibling ：下一个兄弟标签
previousElementSibling ：上一个兄弟标签

<body>
<div>我是父标签
    <div id="i1">我是i1
        <div>我是子标签1</div>
        <div>我是子标签2</div>
    </div>
</div>
<div>（空）</div>
<script>
    i1 = document.getElementById('i1');  // 先获取到i1标签的对象
    // 子标签集合第一个元素的，下一个兄弟标签的，文本内容
    alert(i1.children[0].nextElementSibling.innerText);
    // 修改父标签的下一个兄弟标签的内容
    i1.parentElement.nextElementSibling.innerText = "我是父标签的兄弟";
</script>
</body>

操作

之前我们已经对innerText属性进行过操作了。能做的还有很多

操作内容

innerText ：开始和结束标签之间的文本内容
innerHTML ：开始和结束标签之间的 HTML 内容
value ：元素的值

操作对象的class属性

className ：获取所有类名
classList.add ：添加一个类名
classList.remove ：删除一个类名

<body>
<div id="i1">我是i1</div>
<script>
    d1 = document.getElementById('i1');
    d1.className = 'i1 i2 i3';
    alert(d1.className);
    d1.classList.remove('i2');
    d1.classList.add('i4');
    alert(d1.className);
</script>
</body>

后面示例中的模态对话框有应用场景的例子。操作起来比直接修改style方便。

事件

下面2个事件，后面的示例中会用到：

  • onclick ：事件会在对象被点击时发生。
  • onmouseover ：事件会在鼠标指针移动到指定的对象上时发生。

后面的示例中有例子。这里直接跳到后面看示例就好。
下面关于事件的内容还未学习，应该是下次要讲的补充内容了。

事件句柄　(Event Handlers)

属性 此事件发生在何时...
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。

对于事件需要注意的要点：

  • this ：当前正在操作的标签
  • event ：封装了当前事件的内容
  • 事件链以及跳出

示例

模态对话框

这里的思路是，单独定义个hide的class，样式里定义隐藏属性（display: none;）。只要有标签加上hide这个class，就会被隐藏。我们之后只需要进行标签的class的add和remove的操作，就实现了样式的变化。
实现的方法有很多，直接把display写在class的样式里，然后修改样式的属性也是可以的。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*遮罩层样式*/
        .c1{
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 5;
        }
        /*弹出框样式*/
        .c2{
            width: 500px;
            height: 400px;
            background-color: pink;
            position: fixed;
            left: 50%;
            margin-left: -250px;
            margin-top: 100px;
            z-index: 10;
        }
        /*显示/隐藏 遮罩层和弹出框*/
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div>
    点击
    <input type="button" value="按钮" onclick="ShowModel()" />
    弹出对话框
</div>
<!--遮罩层-->
<div class="c1 hide" id="i1"></div>
<!--弹出框-->
<div class="c2 hide" id="i2">
    <div style="padding: 100px 50px">
        <p>
            <label for="username">用户名：</label>
            <input type="text" id="username" />
        </p>
        <p>
            <label for="password">密码：</label>
            <input type="password" id="password" />
        </p>
        <p>
            <input type="button" value="确定" onclick="HideModel()" />
            <input type="button" value="取消" onclick="HideModel()" />
        </p>
    </div>
</div>
<script>
    function ShowModel() {
        document.getElementById('i1').classList.remove('hide')
        document.getElementById('i2').classList.remove('hide')
    }
    function HideModel() {
        document.getElementById('i1').classList.add('hide')
        document.getElementById('i2').classList.add('hide')
    }
</script>
</body>

全选、取消、反选

操作选择框：对于单选框（type="radio"）和复选框（type="checkbox"），可以通过checked属性获取它当前的状态，true为选中，false未选中。也可以通过赋值来改变它的状态。

<body>
<div>
    <input type="button" value="全选" onclick="ChooseAll()">
    <input type="button" value="取消" onclick="CancelAll()">
    <input type="button" value="反选" onclick="Reverse()">
</div>
<div>
    <table border="3">
        <thead>
        <tr>
            <th>choice</th>
            <th>name</th>
            <th>age</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr>
            <td><input type="checkbox" title="choose the student"></td>
            <td>Adam</td>
            <td>23</td>
        </tr>
        <tr>
            <td><input type="checkbox" title="choose the student"></td>
            <td>Bob</td>
            <td>24</td>
        </tr>
        <tr>
            <td><input type="checkbox" title="choose the student"></td>
            <td>Clark</td>
            <td>25</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    function ChooseAll() {
        var tbody = document.getElementById('tb');
        var tr_list = tbody.children;
        for (var i=0; i<tr_list.length; i++){
            var checkbox = tr_list[i].firstElementChild.firstElementChild;
            checkbox.checked = true;
        }
    }
    function CancelAll() {
        var tbody = document.getElementById('tb');
        var tr_list = tbody.children;
        for (var i=0; i<tr_list.length; i++){
            var checkbox = tr_list[i].firstElementChild.firstElementChild;
            checkbox.checked = false;
        }
    }
    function Reverse() {
        var tbody = document.getElementById('tb');
        var tr_list = tbody.children;
        for (var i=0; i<tr_list.length; i++){
            var checkbox = tr_list[i].firstElementChild.firstElementChild;
            checkbox.checked = !checkbox.checked;
        }
    }
</script>
</body>

后台管理左侧菜单

这里采用了鼠标悬停事件（onmousemove），会展开当前菜单。子菜单的隐藏依旧是通过操作class属性实现的。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: blue;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
<div style="height: 48px"></div>
<div style="width: 300px">
    <div class="item">
        <div class="header" onmousemove="ShowMenu(this)">菜单1</div>
        <div class="content hide">
            <div>内容1-1</div>
            <div>内容1-2</div>
            <div>内容1-3</div>
        </div>
    </div>
    <div class="item">
        <div class="header" onmousemove="ShowMenu(this)">菜单2</div>
        <div class="content hide">
            <div>内容2-1</div>
            <div>内容2-2</div>
            <div>内容2-3</div>
        </div>
    </div>
    <div class="item">
        <div class="header" onmousemove="ShowMenu(this)">菜单3</div>
        <div class="content hide">
            <div>内容3-1</div>
            <div>内容3-2</div>
            <div>内容3-3</div>
        </div>
    </div>
</div>
<script>
    function ShowMenu(x){
        var content_list = document.getElementsByClassName('content');
        for (var i=0; i<content_list.length; i++){
            content_list[i].classList.add('hide')
        }
        x.nextElementSibling.classList.remove('hide')
    }
</script>
</body>

作业

电子商务网站页面（动态）（仿京东），要做4个页面

主页

主要是实现中间的那个部分，四分格的商品展示的样式。还要做返回顶部的功能
Python自动化开发学习15-JavaScript和DOM

登陆

要做出右边有图标的input框
Python自动化开发学习15-JavaScript和DOM

注册

红色的星号（*）表示必填项
Python自动化开发学习15-JavaScript和DOM

购物车

左边有菜单：类似后台管理的左侧菜单
右边有表格：表格要有全选、反选。还能用模态框添加内容












本文转自骑士救兵51CTO博客，原文链接：http://blog.51cto.com/steed/2072109，如需转载请自行联系原作者

文章标签：
JavaScript
Python
前端开发
关键词：
Python开发
JavaScript开发
自动化python
开发JavaScript
Python自动化
技术小美
目录
相关文章
光明顶阳顶天
|
12天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
光明顶阳顶天
22 1
邹荣乐
|
17天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
邹荣乐
363 1
有路有乔-六月
|
21天前
|
JavaScript 前端开发 安全
TypeScript的优势与实践：提升JavaScript开发效率
【10月更文挑战第8天】TypeScript的优势与实践：提升JavaScript开发效率
有路有乔-六月
34 0
G0518
|
21天前
|
JavaScript 前端开发 IDE
深入理解TypeScript：提升JavaScript开发的利器
【10月更文挑战第8天】 深入理解TypeScript：提升JavaScript开发的利器
G0518
27 0
土木林森
|
7天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发：掌握ArkUI（包括Java UI和JS UI）进行界面开发
【10月更文挑战第22天】随着科技发展，操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI，探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发，性能较高；JS UI适合快速开发简单界面，跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
土木林森
44 8
疯狂的猿
|
6天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件，具有美观、易用，占用的资源较低等特点，可以给弹幕设置内容、颜色、头像、链接地址等属性，鼠标悬停等，简单实用，欢迎下载！
疯狂的猿
24 5
神明木佑
|
22天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
神明木佑
36 4
肥猪肥猪-17824
|
3天前
|
JavaScript 前端开发 安全
深入浅出Node.js后端开发
【10月更文挑战第26天】在这篇文章中，我们将一起探索Node.js的奇妙世界。不同于传统的Java或Python，Node.js以其异步非阻塞I/O和事件驱动的特性，在后端开发领域独树一帜。无论你是初学者还是资深开发者，这篇文章都将为你提供新的视角和思考。从基础概念到实际应用，我们一步步深入Node.js的世界，让你了解其不仅仅是JavaScript运行环境那么简单。
肥猪肥猪-17824
6 0
小Tomkk
|
17天前
|
监控 关系型数据库 MySQL
PowerShell 脚本编写 ：自动化Windows 开发工作流程
PowerShell 脚本编写 ：自动化Windows 开发工作流程
小Tomkk
17 0
邹荣乐
|
17天前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器：Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器：Vue-ls插件使用详解
邹荣乐
37 0

热门文章

最新文章

  • 1
    阿里云RPA（机器人流程自动化）干货系列之二：认识RPA（下）
  • 2
    SharePoint自动化系列——通过Coded UI录制脚本自动化创建SharePoint Designer Reusable Workflow
  • 3
    半自动化运维之动态添加数据文件（一)
  • 4
    网络管理自动化之一、SMS服务器的安装准备工作详解
  • 5
    FTP自动化上传的Shell脚本
  • 6
    测试自动化和准时交付直接的关联
  • 7
    10968134>正文 52.puppet自动化运维工具
  • 8
    网络管理自动化之三、SMS服务器的配置详解
  • 9
    透析QTP自动化测试框架SAFFRON
  • 10
    测试：脱离VS2010使用自动化测试时出现 6DA215C2-D80D-42F2-A514-B44A16DCBAAA 错误
  • 1
    深入理解虚拟DOM：原理、优势与实践
    312
  • 2
    XML DOM 解析器
    34
  • 3
    XML DOM - 导航节点
    37
  • 4
    XML DOM - 访问节点
    25
  • 5
    XML DOM 解析器
    28
  • 6
    XML DOM 遍历节点树
    35
  • 7
    XML DOM - 访问节点
    20
  • 8
    DOM 属性列表（命名节点图 Named Node Map）
    38
  • 9
    XML DOM 遍历节点树
    35
  • 10
    XML DOM 浏览器差异
    42

    • 相关课程

    更多
  • Python语言基础 - 语法入门
  • Python语言基础 - 列表、元组、字典、集合
  • Python Web 框架 Flask 快速入门
  • Python Web 框架 Django 快速入门
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 搭建Node.js编程环境
  • Python新手入门
  • Python入门
  • 基于Mappings自动化配置yum源
  • Python选择及循环结构
  • 使用资源编排自动化开通云服务

    • 推荐镜像

    更多
  • python-release
  • nodejs-release
  • golang
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月