Web前端笔记五(javascript)

最新推荐文章于 2024-07-29 11:53:27 发布

依米阳光08

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量77

点赞数

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

本文链接：https://blog.csdn.net/weixin_44371927/article/details/125637537

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript 是属于 HTML 和 Web 的编程语言。
HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中，也可以直接引用单独的js文件。通常会把javascript放置在页面的底部。
getElementById() 是多个 JavaScript HTML 方法之一,使用该方法来“查找” id="txt" 的 HTML 元素。
示例：

<!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:green;
            padding:20px 10px;
        }
    </style>

</head>
<body>
    <div class="menus">
        <div class="header" onclick="f1()">大标题</div>
        <div class="item" onclick="f2()">内容</div>
    </div>
    <span id="txt">欢迎市委书记贾郭涵莅临指导</span>
    <script type="text/javascript">
        var name="乐乐";
        console.log(name);
        function show() {
            var tag = document.getElementById("txt");
            var dataString = tag.innerText;
<!--            动态读取字符-->
            var firstString = dataString[0];
            var otherString = dataString.substring(1,dataString.length);
            var newText = otherString + firstString;
<!--            在标签页中更新字符串-->
            tag.innerText = newText;
        }
<!--        javascript中的定时器，每1000ms执行一次-->
        setInterval(show,1000);
        function f1(){
            alert("hello")
        }
    </script>

</body>
</html>

Javascript语法

变量

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：
var name=“乐乐”

数组

var v1 = [40, 100, 1, 5, 25, 10]
尾部追加数据：v1.push(“通讯”)；
开端追加数据：v1.unshift(“科讯”)；
指定位置追加数据：v1.splice(索引位置，0，元素)；
删除尾部元素：v1.pop();
删除头部元素：v1.shift();
删除指定位置元素：v1.splice(索引位置，1)
相关使用：

var cityList = ["北京","上海","深圳"]
        for(var idx in cityList){
            var text = cityList[idx];
<!--  创建li     -->
            var li_tag = document.createElement("li");
            li_tag.innerText = text;
            var parent_li =document.getElementById("city");
            parent_li.appendChild(li_tag);
        }

对象

var person={
firstname : “John”,
lastname : “Doe”,
id : 5566
};

DOM

是一个模块，通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素进行操作；

通过id查找html元素
var x=document.getElementById(“intro”);
通过标签名查找 HTML 元素
var y=x.getElementsByTagName(“p”);
通过标签名查找 HTML 元素
var y=x.getElementsByTagName(“p”);
获取标签中的文本
x.innerText
修改标签中的文本
x.innerText = “哈哈哈”
创建标签
var x =document.createElement(“div”)
添加绑定关系
x.document.appendChild(“tr”)
示例：获取输入框内容自动添加到列表中

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

    </ul>

    <script type="text/javascript">
        function addCollege(){
<!--先获取输入框中用户输入的数据-->
            var textTag =document.getElementById("text");
<!--获取input中输入的内容  -->
            var inputText= textTag.value;
    <!--创建标签,并将输入框中的内容给他赋值-->
             var newTag =document.createElement("li");
             newTag.innerText = inputText;
             var parentTag = document.getElementById("college");
             parentTag.appendChild(newTag);
    <!-- 添加后情空输入框     -->
             textTag.value= "";            
        }
    </script>

</body>
</html>

依米阳光08

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端笔记五(javascript)

Javascript语法变量JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：var name=“乐乐”var v1 = [40, 100, 1, 5, 25, 10]尾部追加数据：v1.push(“通讯”)；开端追加数据：v1.unshift(“科讯”)；指定位置追加数据：v1.splice(索引位置，0，元素)；删除尾部元素：v1.pop();删除头部元素：v1.shift();删除指定位置元素：v1.splice(索引位置，1)相关使用：对象var
复制链接

扫一扫

专栏目录