JavaScript基础

最新推荐文章于 2024-10-02 05:39:15 发布

小梁今天敲代码了吗

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量368

点赞数

分类专栏： Python Web开发文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_43780415/article/details/130232038

版权

Python Web开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JavaScript是一门编程语言，浏览器就是JavaScript语言的解释器

DOM 和 BOM 相当于编程语言内置的模块

JavaScript代码书写的位置

1.head标签尾部

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
    <script type="text/javascript">
        <!-- 编写JS代码-->
    </script>
</head>

2.body标签尾部

<body>
    <div>  </div>
    <script type="text/javascript">
        <!-- 编写JS代码-->
    </script>
</body>

一般我们写在body尾部的位置

JS代码的存在形式：

当前HTML中

    <script type="text/javascript">
        <!-- 编写JS代码-->
    </script>

写在JS文件中导入使用

注释

HTML：

<!--注释内容 -->

CSS（一般放在style代码块中）：

/* 注释内容 */

JavaScript的注释：

//注释内容

/*注释内容*/

变量

var name="abc"; /*声明变量并对它赋值*/

console.log(name);/*可以使用 console.log() 方法在浏览器中显示 JavaScript 值*/

字符串类型

var name ="中国北京";

var v1 = name.length;//获取字符串长度 4
var v2 = name[0];//中 （和Python不一样的是没有[-1][-2]这种）
var v5 = name.charAt(0)//和上面效果一样
var v3 = name.trim();//移除字符串收尾空白
var v4 = name.substring(0,2);//中国 （前取后不取和Python一样）

数组

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


//操作
v1[1]//22

v1.push(55);//在尾部进行追加[11,22,33,44,55]
v1.ubshift(00);//首部追加[00,11,22,33,44]

v1.splice(索引,0,元素);//按照索引位置更改元素
v1.splice(1,0,88);//[11,88,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]
}

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

//break 和continue也能使用

对象

info = {
        name:"李明",
        age:18
}

//读取
info.age
info["age"]
//修改
info.name = "mary"
info["name"] = "mary"
//删除
delete info["age"]

循环

for (var key in info){

    //key=name/age   data=info[key]

}

条件语句

if (条件){
}else{

}


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

函数

function func():
{
        函数的内容
}

func()

DOM

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

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

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

//创建标签<div>1234</div>
var tag =document.createElement("div");
//标签些内容
tag.innerText = "1234";

//添加标签
tag.appendChild(newTag);

事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="点击添加" onclick="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);
        }
    </script>
</body>
</html>

点一次按钮，添加一个“北京”

相比于上面的代码加入了输入框，用户想输入什么再进行添加，并且当用户输入为空时会出现提示，输入完毕后输入框会清空

<!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="addCityInfo()">
    <ul id="city"></ul>
    <script type="text/javascript">
        function addCityInfo(){
            //1.先获取输入框中用户输入的数据
            var txtTag = document.getElementById("txtUser");
            //2.获取用户输入的内容
            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>