Web开发：django+前端+数据库（4）

最新推荐文章于 2024-07-20 18:16:53 发布

橘粒咕噜111

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量355

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/weixin_58326457/article/details/135703547

版权

前端三大组件：HTML、CSS、Javascript

Javascript是一门编程语言，浏览器就是Javascript的解释器，使程序实现一些动态效果

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

Jquery相当于是编程语言的第三方模块，例如：Requests

5 JavaScript

5.1 代码位置

<!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>

<!--    位置1-->
    <script type="text/javascript">
        //编写JavaScript代码
    </script>

</head>
<body>
    <div class="menus">
        <div class="header" onclick="myFunc">大标题</div>
        <div class="item">内容</div>
    </div>

<!--    位置2-->
    <script type="text/javascript">
        //编写JavaScript代码
    </script>

</body>
</html>

js代码的存在形式：

1.当前的HTML的中。一般情况下放在<body>模块的最下面。

2. 写在其他js文件中，进行导入使用。

5.2 注释

HTML的注释 —>

CSS的注释，style代码块 —> /* 注释内容*/

Javascript的注释，script代码块（两种） —> //注释内容 /* 注释内容*/

5.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>

5.4 字符串类型

// 声明 
var name = "广东";
var neme = string("广东");

//常见功能
var name = "中国广东";
var v1 = name.length;    //字符串长度
var v2 = name[0];        //中，等同于name.charAt(3)
var v3 = name.trim();    //去除空白得到新的字符串
var v4 = namr.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），innerText就是内部文本
        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中的定时器，1000是1000毫秒，如：每1s执行一次show函数。
    setInterval(show, 1000);
</script>
</body>
</html>

5.5 数组

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

//操作
var v1 = [11, 22, 33, 44];
//通过索引获取值
v1[1]
//通过索引修改值
v1[0] = "111";

//在尾部追加值
v1.push("55");

//在前面插入值
v1.unshift("00");

//在指定的位置加入元素,v1.splice(索引位置,0,元素);
v1.splice(1,0,"1.5");

//从尾部删除
v1.pop();

//从头部删除
v1.shift()

//指定位置删除元素，v1.splice(索引位置,1);
v1.splice(2,1)

//循环，第一种方式
var v1 = [11, 22, 33, 44];
for(var item in v1){
    // idx=0/1/2/3   data=v1[idx]
}

//循环，第二种方式
var v1 = [11, 22, 33, 44];
for(var i=0; i<v1.length; i++){
    // idx=0/1/2/3   data=v1[idx]
}

注意：也可以使用break和continue

5.6 对象（字典）

info = {
    name:"广东",
    age:100
}

//读取
info.age

//修改
info.age = "5000"   //第一种方式
info["name"] = 中国    //第二种方式

//删除
delete info["age"]

//循环
info = {
    name:"广东",
    age:100
}
for(var key in info){
    //key=name/age    data=info[key]
}

5.7 条件语句

if(条件){

}else{

}

if(条件){

}else if(条件){

}else if(条件){

}else{

}

5.8 函数

function func(){

    ...
}

func()

6 DOM

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

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

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

//修改标签中的文本
tag.innerText = "床前明月光";

//创建标签<div>疑是地上霜<div>
var tag = document.createElementById("div");

//标签写内容
tag.innerText = "疑是地上霜";

6.1 事件的绑定

单击为onclick，双击为ondblclick

<!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>

橘粒咕噜111

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Web开发：django+前端+数据库（4）

前端三大组件：HTML、CSS、JavascriptJavascript是一门编程语言，浏览器就是Javascript的解释器，使程序实现一些动态效果DOM和BOM相当于编程语言内置的模块Jquery相当于是编程语言的第三方模块，例如：Requests。
复制链接

扫一扫