javascript笔记

javascript_good

于 2023-07-21 18:16:12 发布

阅读量64

点赞数

分类专栏：前端文章标签： javascript 笔记开发语言

本文链接：https://blog.csdn.net/javascript_good/article/details/131855034

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JavaScript, 是一门编程语言，浏览器就是JavaScript语言的解释器。
DOM 和BOM

相当于编程语言内置的模块
就像是python中的re、random、time、json模块等

jQuery

相当于编程语言的第三方模块
就像python中的requests、openpyxl

1、javascript代码位置

在head里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //javascript代码
    </script>
</head>
<body>
</body>
</html>

在body标签的底部，在body标签里面，的最下面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div>
     用户名：<input type="text" />
 </div>
  <script type="text/javascript">
        //javascript代码
   </script>
</body>
</html>

推荐放body 中，因为html 页面也是从上向下加载的，如果javascript中的内容比较耗时，也不会影响很到，会先把页面加载出来。

2、js代码的存在形式

当前html中

 <script type="text/javascript">
        //javascript代码
   </script>

在其他js文件中，导入使用
比如在根目录有static/js/my.js

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

3、注释

HTML的注释

<!-- 注释的内容 -->

css的注释，在style代码块中

/* 注释的内容*/

JavaScript的注释，script代码块

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

4、变量

JavaScript的变量
var 是关键字，以分号结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div>
     用户名：<input type="text" />
 </div>
  <script type="text/javascript">
       var name = "黛玉";
    </script>
</body>
</html>

输出打印

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div>
     用户名：<input type="text" />
 </div>
  <script type="text/javascript">
       var name = "黛玉";
       console.log(name);
    </script>
</body>
</html>

查看，在页面进入代码检查的console
在这里插入图片描述

5、字符串类型

//声明
var name = "黛玉";
var name = String("黛玉");

//常用功能
var name = "灯火里的中国";
var v1 = name.length;     //获取字符串长度
var v2 = name[0];       //取第一个字符
var v3 = name.trim();   //去掉空格
var v4 = name.substring(0,2);    //截取字符串，左闭右开

6、数组

/1定义
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("联通"); //尾部追加[“联通"， 11,22,33,44]
vl.splice(索引位置,0,元素);
v1.splice(1,0,“中国");   // 尾部追加[11, “中国”,22,33,44 ]
v1.pop()   //尾部删除
v1.shift() //头部删除
v1.splice(索引位置,1)
vl.splice(2,1);     //索引为2的元素删除[11,22,44];

7、动态生成表格

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

     </tbody>
 </table>
<script type="text/javascript">
     datalist = [
        {id:"1",name:"黛玉",age:16},
        {id:"2",name:"黛玉2",age:16},
        {id:"3",name:"黛玉3",age:16},
        {id:"4",name:"黛玉4",age:16}
     ]
     for(var index in datalist){
        var info = datalist[index];
        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>
</html>

效果如下：
在这里插入图片描述

8、DOM

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

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

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

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

//如果要获取input输入框中用户输入的内容
tag.value;

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

9、事件绑定

在标签中可以事件比如单机、双击等，去出发javascript中的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <input type="button" value="点我添加" onclick="func()" />
<ul id="city">

</ul>

<script type="text/javascript">
    function func(){
        var newtag = document.createElement("li");
        newtag.innerText = "安娜";
        tag = document.getElementById("city");
        tag.appendChild(newtag);
    }

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