JavaScript基础与DOM操作：动态效果、变量管理与事件处理,-优快云博客

本文链接：https://blog.youkuaiyun.com/whyaibiancheng/article/details/136006830

文章目录

一、JavaScript
二、DOM
- 2.1事件的绑定
三、回顾

概要

javascript是一门编程语言.浏览器就是它的解释器。
DOM和BOM相当于编程语言内置的模块

例如：python中的re,random,time,json

jQuery

第三方模块
例如:requests、openpyxl

一、JavaScript

JavaScript的意义是什么？
让程序实现一些动态效果。

1.1存放位置

位置1，写作style下面
位置2，写作/body前面

位置2是推荐的，html从上到下解析。因为如果js效果很耗时，那么会有很久的白屏。

js的存在形式

1写作html里
2写作js里导入
导入一般也是写作下面，导入的形式如下

 <script src="static/my.js"></script>

1.2变量

js也是编程语言

<script type="text/javascript">
    var name="搞钱";
    console.log(name)

</script>

1.3字符串类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var name="中国联通"
    var v1=name.length;
    var v2=name[0];//name.charAt(3)
    var v3=name.trim();
    var v4=name.substring(0,2);//前取后不取
</script>
</body>
</html>

1.4案例跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="txt">欢迎中国联通领导莅临指导</span>
<script type="text/javascript">
    function f1() {
        // 1找到字符串
        var tag = document.getElementById("txt");
        var dataString = tag.innerText;
        console.log(dataString);
        // 2改变字符串
        var first = dataString[0];
        var other = dataString.substring(1, dataString.length);
        newstring = other + first;
        tag.innerText = newstring;
    }
    setInterval(f1,300)


</script>
</body>
</html>

1.5数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var v1=[11,22,33,44]
        var v2=v1[0]
        v1[1]=55
        v1.push("联通")
        v1.unshift("易懂")
        v1.splice(1,0,"abc")//这里参数为索引，0，添加的值
        
        v1.pop()
        v1.shift()
        v1.splice(1,1)//这里参数为索引,1
        //循环
        for(var idx in v1){
            //idx=0 1 2 3
        }
        for(var i=0;i<v1.length;i++){
            //完全同c语言
        }
        break和continue也是可以放进去使用的
    </script>
</body>
</html>

1.6列表动态数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="city">
<!--    <li></li>-->
</ul>
<script type="text/javascript">
    //发送网络请求获取数据
    var cityList=["北京","上海","深圳"];
    for(var idx in cityList){
        var text=cityList[idx];
        //创建li
        var tag=document.createElement("li");
        tag.innerText=text;
        //添加到id=city那个标签的里面dom
        var parentTag=document.getElementById("city")
        parentTag.appendChild(tag);
    }
</script>
</body>
</html>

1.7表格动态数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="body">
    <!--        <tr>-->
    <!--            <td>-->
    <!--                -->
    <!--            </td>-->
    <!--        </tr>-->
    </tbody>


</table>
<script type="text/javascript">
    dataList = [
        {id: 1, name: "郭志", age: 19},
        {id: 1, name: "郭志", age: 19},
        {id: 1, name: "郭志", age: 19},
        {id: 1, name: "郭志", age: 19},
    ]
    for (var idx in dataList) {
        var info = dataList[idx];
        tr = document.createElement("tr");
        for (var key in info) {
            text = info[key];
            td = document.createElement("td");
            td.innerText = text;
            tr.appendChild(td)
        }
        var bodyTag = document.getElementById("body")
        bodyTag.appendChild(tr)
    }

</script>
</body>
</html>

1.8条件

if(条件){
}
else{
}
if(条件){
}
else if(条件){}
else if(条件){}
else{}

1.9函数

function f1(){
...
}
f1()

二、DOM

DOM就是一个模块，模块可以对HTML页面中的标签进行操作

var tag=document.getElementById("");
tag.innerText;
tag.innerText="123123"
以及动态字典什么的哪些appendchild
onclik="函数名"

2.1事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser"/>
<button onclick="f1()">123123</button>
<ul id="city">

</ul>
<script type="text/javascript">
    function f1() {
        var txtTag = document.getElementById("txtUser");//找到标签
        var newstring = txtTag.value;//获取内容,注意这里不是innertext
        //创建新标签
        if (newstring.length > 0) {
            var newTag = document.createElement("li");
            newTag.innerText = newstring;
            //加入
            var parentTag = document.getElementById("city");
            parentTag.appendChild(newTag);
            //加入后清空
            txtTag.value = '';
        }
        else alert("输入不能为空")
    }
</script>
</body>
</html>

DOM中还有很多操作，比较繁琐，可以使用jQuery来实现

三、回顾

编码相关
utf-8中中文占3个字节
gbk中文是两个字节

data = "中"
res = data.encode('utf-8')
print(res)
#b'\xe4\xb8\xad'
res = data.encode('gbk')
print(res)
#b'\xd6\xd0'```

前端开发
HTML标签
CSS修改标签
js动态
HTML标签
块级标签，行内标签
inline-block
form+input/select…
CSS样式

布局一定会用到的样式div+float(脱离文档流,clear:both;clear=“clearfix”)
高度宽度
内边距padding
外边距margin
边框
背景颜色
hover