JavaScript快速回顾

最新推荐文章于 2024-07-09 18:13:44 发布

弗拉基米王

最新推荐文章于 2024-07-09 18:13:44 发布

阅读量327

点赞数 7

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/DSJDWWJ/article/details/136033919

版权

1.Javascript

Javascript一门编程语言。
Javascript的意义是什么呢？

前端三大组件：

HTML,裸体
CSS，好看的衣服
Javascript，动态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .menus {
            width: 200px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: gold;
            padding: 20px 10px;
        }

    </style>
</head>
<body>
<div class="menus">
    <div class="header" onclick="myfunc()">大标题</div>
    <div class="item">内容</div>
</div>
<script type="text/javascript">
    function myfunc() {
        alert("你好呀");
        confirm("是否要继续?")
    }
</script>
</body>
</html>

1.1 代码位置

当前HTML文件中
单独的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    位置1-->
    <script src="static/my.js"></script>
    <script type="text/javascript">
        //编写JavaScript代码
        //操作耗时先耗时再显示页面，导致显示效果不好
    </script>
</head>
<body>

<!--位置2-->
<script src="static/my.js"></script> //一般也放在这里
<script type="text/javascript"> //一般推荐放在这里
    // 编写javaScript代码
</script>
</body>

1.2 注释

HTML注释

<!--注释内容-->

CSS的注释, style代码块

/*注释内容*/

javascript的注释，script代码块

//注释内容
/*注释内容*/

1.3 变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var name = "张飞";
    console.log(name)
</script>
</body>
</html>

1.4 字符串类型

//声明
var name = "张飞";
var name = String("张飞");

//常见功能
var name = "中国移动";
var v1 = name.length;
var v2 = name[0]; //name.charAt(0)
var v3 = name.trim(); //去除空白
var v4 = name.substring(0, 2);//切片，前取后不取

案例：跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="txt">欢迎中国联通领导高倩莅临指导</span>

<script type="text/javascript">
    function show() {
        //1.去HTML找到某个标签获取他的内容（DOM）
        var tag = document.getElementById("txt")
        var dataString = tag.innerText;

        //2.动态起来，把文本中的第一个字符放在字符串的最后面
        var firstChar = dataString[0];
        var otherString = dataString.substring(1, dataString.length);
        var newText = otherString + firstChar

        //3.在HTML中更新内容
        tag.innerText = newText
    }
    //JavaScript中的定机器，每1s执行一次show函数
    setInterval(show, 1000);
</script>
</body>
</html>

1.5 数组

//定义
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);

//操作
var v1 = [11,22,33,44]
v1[1]
v1[0] = "高倩";
v1.push("联通"); //尾部追加 [11,22,33,44,联通]
v1.unshift("联通") //头部追加
v1.splice(索引,0,元素)
v1.splice(1,0,"中国") //[11,"中国",22,33,44]
v1.pop() //尾部删除
v1.shift()//头部删除
v1.splice(索引位置,1)
v1.splice(2, 1);//索引为2的元素删除

var v1 = [11,22,33,44]
for(var idx in v1){
	//idx=0/1/2/3
	//data = v1[idx]
}

var v1 = [11,22,33,44]
for(var i=0; i<v1.length; i++){
	//i=0/1/2/3
	//data = v1[idx]
}

案例：动态数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="city">

</ul>
<script type="text/javascript">
    //发送网络请求，获取数据
    var cityList = ["北京","上海","深圳"]
    for(var idx in cityList){
        var text = cityList[idx];

        //创建<li></>li>
        var tag = document.createElement("li");
        //在li标签内写入内容
        tag.innerText = text;
        //添加到id=city的标签内DOM
        var parentTag = document.getElementById("city");
        parentTag.appendChild(tag);
    }
</script>
</body>
</html>

1.6 对象

info = {
	name:"高倩",
	age:19
}
info.age
info.name = "张飞"
info["name"] = "张飞"
delete.info["age"]
for(var key in info){
	//key=name/age
	//data=info[key]
}

案例：动态表格

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

    </tbody>
</table>

<script type="text/javascript">
    // 网络请求获取，显示到页面中
    var dataList = [
        {id:1, name:"张倩", age:19},
        {id:2, name:"张倩", age:19},
        {id:3, name:"张倩", age:19},
        {id:4, name:"张倩", age:19},
        {id:5, name:"张倩", age:19}
    ]
    for (var idx in dataList) {
        var info = dataList[idx];
        var tr = document.createElement("tr")
        for (var key in info) {
            var text = info[key];
            var td = document.createElement("td");
            td.innerText = text;
            tr.appendChild(td);
        }
        console.log(tr);
        var bodyTag = document.getElementById("body");
        bodyTag.appendChild(tr);
    }
</script>

</body>
</html>

1.7 条件语句

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

if (1==1){
}else{
}

1.8 函数

function func(){
	...
}
func()

2.DOM

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

//根据ID获取标签
var tag = document.getElementById("xx");

//获取标签内的文本
tag.innerText

//修改标签中的文本
tag.innerText = "哈哈哈哈";

//创建标签
var tag = document.createElement("div");

//标签内写内容
tag.innerText = "哈哈哈";

//创建<li></>li>
var tag = document.createElement("li");
//在li标签内写入内容
tag.innerText = text;
//添加到id=city的标签内DOM
var parentTag = document.getElementById("city");
parentTag.appendChild(tag);

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser" />
<input type="button" value="点击添加" onclick="addCityInput()">
<!--<input type="button" value="点击添加" ondblclick="addCityInfo()">-->
<ul id="city">

</ul>
<script type="text/javascript">
  // function addCityInfo(){
  //   var newTag = document.createElement("li");
  //   newTag.innerText = "联通";
  //
  //   var parentTag = document.getElementById("city");
  //   parentTag.appendChild(newTag);
  // }

  function addCityInput() {
    //1.找到输入标签
    var txtTag = document.getElementById("txtUser");

    //2.获取Input框中的输入内容
    var newString = txtTag.value;

    //判断用户输入是否为空,只有不为空才继续
    if (newString.length > 0) {

      //3.创建标签<li></li>
      var newTag = document.createElement("li");
      newTag.innerText = newString;

      //4.标签添加到ul中
      var parentTag = document.getElementById('city');
      parentTag.appendChild(newTag);

      //5.将input框内容清空
      txtTag.value = "";
    }else{
      alert("输入不能为空");
    }
  }
</script>
</body>
</html>

注意:DOM还有很多操作

DOM可以实现很多功能,但是比较繁琐
页面上的效果,jQuery来实现 /vue.js/react.js