自我学习记录：JavaScript要点

yzybang

已于 2022-05-22 19:55:33 修改

阅读量186

点赞数

文章标签： javascript 学习前端

于 2022-05-21 22:00:51 首次发布

本文链接：https://blog.csdn.net/weixin_46075797/article/details/124904124

版权

本文介绍了JavaScript的基本语法、DOM操作、定时器使用、数组操作、对象与字典、动态表单、条件语句、函数定义以及事件绑定实例。通过跑马灯、动态显示城市列表和表单创建，展示了如何在实际项目中应用这些技术。

摘要由CSDN通过智能技术生成

来源此视频p19~21

<body>
……
	<script src="jquery.js的存放地址"> <!--一般static/js--></script>
	<script src="bootstrap.js的存放地址">
</body>

#javascript
一门编程语言，浏览器就是JavaScript的解释器，与python相同，按顺序读取

JavaScript代码导入位置

1.头部（不建议）
<head>
	<title>标题</title>
	<style>自编的css</style>
	<link />导入的css样式
	<script type="text/javascript">
	自编的JavaScript
	</script>
	<script src="jquery.js的存放地址"> 导入的JavaScript
</head>

2.尾部（常用），因html按顺序读取，JavaScript在头部被优先读取了,影响html+css内容读取。
	<script type="text/javascript">
	自编的JavaScript
	</script>
	<script src="jquery.js的存放地址"> 导入的JavaScript
</body>

##JavaScript编写

<script type="text/javascript">  /*固定格式*/
	var name="张三";   /*定义变量*/
	console.log(name);  /*打印*/
</script>

案例：跑马灯

<body>
    <div id="txt">热烈祝贺欢迎领导视察</div>


    <script type="text/javascript">
        function show(){     //函数包裹
         //去html中找个某个标签并获取其内容（DOM）
        var tag = document.getElementById("txt");  //找到对应id的元素
        var dataString = tag.innerText;  //拿到其内容


        //动态起来，文本第一个字符取出放置于最后
        var firstChar = dataString[0];   //取第一位
        var otherString = dataString.substring(1, dataString.length);  //（前取后不取）取除第一位的其他位
        var newText = otherString + firstChar   //拼接为新字符串

        //在html便签中更新
        tag.innerText = newText
        }

        //定时器
        setInterval(show, 1000);
    </script>
</body>

数组

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

//操作
v1.push("张三")//尾部追加
v1.unshift("张三") //头部追加
v1.splice(索引位置, 0, 元素) 
v1.splice(1, 0, "张三") //索引位置添加

v1.pop()//尾部删除
v1.shift()//头部删除
v1.splice(索引位置, 1, 元素)
v1.splice(1, 0, "张三")  //索引位置删除

//循环
var v1 = [11, 22, 33]
for (var idx in v1){   //此处循环出索引值，v1[idx]就可显示对应值
		//data = v1[idx]就可显示对应值
}

for(var i=0; i<v1.length; i++){ //效果相同
}

案例1：动态显示

<body>
    <ul id="city">
        <!--<li>北京</li>
        	<li>上海</li>
        	<li>南京</li>-->
    </ul>
    <script type="text/javascript">
        var cityList = ["北京", "上海", "南京"];
        for(var idx in cityList){
            var text = cityList[idx];

            //创建<li></li>
            var tag = document.createElement("li"); //Dom
            //在li标签中写入内容
            tag.innerText = text;

            //添加到对应的父类id=city
            var parentTag = document.getElementById("city");
            parentTag.appendChild(tag);
        }

    </script>
</body>

对象（python内叫字典）

//创建
info = {
	name="张三";
	age=18
}
//查询或修改
info.age = 20
info["age"] = 20

//删除
delete info["age"]

//循环
info = {
	name="张三",
	age=18
}
for(var keys in info){ 
	key   //键名
	info["key"] //value值
}

案例2：动态表单

<table>
        <thead>
            <tr> 
                <th>ID</th> <th>姓名</th> <th>年龄</th>   //表头
            </tr>
        </thead>
        <tbody id="body">
            <!--<tr> 
                   <td>10</td> <td>张三</td> <td>20</td>
                </tr>
                <tr> 
                   <td>11</td> <td>张三</td> <td>20</td> //动态表体,此处为两行数据，tr包裹
                </tr>-->
        </tbody>
    </table>

    <script type="text/javascript">
        var dataList = [   //动态数据
             {ID: 1, name: "张三", age: 18},
             {ID: 2, name: "张三", age: 18},
             {ID: 3, name: "张三", age: 18},
        ];                         
        for(var idx in dataList){
            var info = dataList[idx];   //获取单个对象（字典）
            var tr = document.createElement("tr");  //每行数据以tr包裹，所以从tr构建
            for(var key in info){
                var text = info[key];
                var td = document.createElement('td');
                td.innerText = text;
                tr.appendChild(td);
                }
            var bodyTag = document.getElementById("body");
            bodyTag.appendChild(tr);  //单个tr整体传入
        }
    </script>
</body>

条件语句

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

函数

function func(){
 ……
}
func()

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

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

//获取标签中的文本
tag.innerText  //<div>这里的文字<div>
tag.value  //获取诸如输入框的输入文字

//修改标签中的文本
tag.innerText = "新内容"

//创建标签
var tag = document.createElement("div");  //所有创建都以var开头

//添加标签体到父辈下
var parentTag = document.getElementById("body");  //获取父辈
parentTag.appendChild(新建的标签体名);  //添加进父辈

案例3：绑定事件（基于案例2）

<body>
    <input type="button" value="提交" onclick="addData()"/>  //onclick鼠标点击事件，触发addData()函数
    <table>
        <thead>
            <tr>
                <th>ID</th> <th>姓名</th> <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">
            <!--<tr>
                   <td>10</td> <td>张三</td> <td>20</td>
                </tr>-->
        </tbody>
    </table>

    <script type="text/javascript">
        function addData(){
            var dataList = [
             {ID: 1, name: "张三", age: 18},
             {ID: 2, name: "张三", age: 18},
             {ID: 3, name: "张三", age: 18},
            ];
            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);
                    }
                var bodyTag = document.getElementById("body");
                bodyTag.appendChild(tr);
            }
        }
    </script>
</body>

案例4：显示输入（基于案件1）

<body>
    <input type="text" id="txtUser" />
    <input type="button" value="添加" onclick="addCityInfo()" />  //触发事件
    <ul id="city">
       //<li></li>
    </ul>
    <script type="text/javascript">
        function addCityInfo(){ //对应触发事件的函数
            //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);

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