JavaScript基础

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

zsnbaby

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

阅读量74

点赞数

分类专栏： JavaScript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/qq_45295297/article/details/120186482

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了JavaScript的基础知识，包括ECMAScript语法、DOM操作、BOM使用、变量类型、运算符、控制结构、函数、事件处理及DOM事件。通过实例展示了如何遍历数组、设置和获取元素样式、添加和删除DOM元素以及使用定时器。此外，还涵盖了浏览器对象模型如window、screen、location等。

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

概述

在这里插入图片描述

组成

①ECMAScript语法
②文档对象模型（DOM Doucument Object Model）
③浏览器对象类型(BOM Browser Object Model)

使用方式

在这里插入图片描述

变量

在这里插入图片描述

基本类型

在这里插入图片描述

引用类型

在这里插入图片描述

遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历数组</title>
</head>
<body>
<script>
    var nums =[10,20,30,40];
    //使用for遍历
    for (let i = 0; i <nums.length ; i++) {
        document.write(nums[j]);
        document.write("<br/>");
    }
    //使用for in遍历
    for (var j in nums){
        document.write(nums[j]);//j是下标
        document.write("<br/>");
    }

    var map = new Array();
    map["cn"]="中国";
    map["uk"]="英国";
    map["kar"]= "韩国";
    for (var k in map){
        document.write(k+"----"+map[k]);//k是键
        document.write("<br/>");
    }
</script>
</body>
</html>

运算符

算数运算符

在这里插入图片描述

赋值运算符

在这里插入图片描述

逻辑运算符

在这里插入图片描述

关系运算符

在这里插入图片描述

三目运算符

在这里插入图片描述

分支结构

if

在这里插入图片描述

switch

在这里插入图片描述

循环结构

在这里插入图片描述

函数

在这里插入图片描述

弹窗函数

在这里插入图片描述

系统函数

在这里插入图片描述

事件

onfocus：当获取焦点时执行
onblur：当失去焦点时执行
在这里插入图片描述

DOM

查找HTNL元素

在这里插入图片描述

修改HTML内容

在这里插入图片描述

修改属性

在这里插入图片描述

改变css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取设置样式</title>
</head>
<body>
<h1 id="title" style="color: green;background-color: blanchedalmond;">赠汪伦</h1>
<h3>李白</h3>
<p>李白乘舟将欲行</p>
<p>忽闻岸上踏歌声</p>
<p class="class1">桃花潭水深千尺</p>
<p class="class1">不及汪伦送我情</p>
<input type="button" value="获取样式" onclick="click1()">
<input type="button" value="设置样式" onclick="click2()">
<script type="text/javascript">
    function click1() {
        //获取样式
        var poem = document.getElementById("title");
        var c = getStyle(poem,"background-color");
        alert(c);
    }
    function getStyle(elem,attr) {
        if (window.getComputedStyle){//标准浏览器
            return window.getComputedStyle(elem,"")[attr];
        } else if (elem.currentStyle) {//IE
            return elem.currentStyle[attr];
        }else{
            return null;
        }
    }
    function click2() {
        var poem = document.getElementById("title");
        poem.style.color="red";
        var ps = document.getElementsByTagName("p");
        for (let i = 0; i < ps.length; i++) {
            ps[i].style.fontSize="20px";
        }
    }
</script>
</body>
</html>

设置DOM事件

在这里插入图片描述

EventListener

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置Dom事件</title>
</head>
<body>
    <input type="button" value="按钮1" id="btn1">
    <div id="div1" style="width: 200px;height: 100px; background-color: darkgreen">
        <div id="div2" style="width: 100px;height: 50px;background-color: blanchedalmond"></div>
    </div>
    <script type="text/javascript">
        var btn1 = document.getElementById("btn1");
        btn1.addEventListener("click",function () {
            alert("恭喜你，中奖了");
        });
        btn1.addEventListener("click",function () {
            alert("恭喜你，再次中奖了。");
        });
        document.getElementById("div1").addEventListener("click",function () {
            alert("点击了div1")
        },false);//如果为true：从外向里;false:从里向外
        document.getElementById("div2").addEventListener("click",function () {
            alert("点击了div2");
            //阻止事件传播
            event.stopPropagation();
        },false);
    </script>
</body>
</html>

新建和删除元素

在这里插入图片描述

BOM

在这里插入图片描述

window对象

在这里插入图片描述

screen对象

在这里插入图片描述

location对象

在这里插入图片描述

history对象

在这里插入图片描述

navigator对象

在这里插入图片描述

javascript定时器

在这里插入图片描述

案例：定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<body>
<h1>定时器</h1>
    <div id="box">

    </div>
    <input id="btn1" type="button" value="暂停" onclick="click1()">
    <input id="btn2" type="button" value="开始" onclick="click2()">
<script type="text/javascript">
    function showTime() {
        var now=new Date();
        var year = now.getFullYear();
        var month = now.getMonth()+1;
        var date = now.getDate();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        var box = document.getElementById("box");
        box.innerHTML=year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds;
    }
    var tid = setInterval(showTime,1000);
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    function click1() {
        clearInterval(tid);
        btn1.disabled=true;
        btn2.disabled=false;
    }
    function click2() {
        tid = setInterval(showTime,1000);
        btn1.disabled=false;
        btn2.disabled=true;
    }
</script>
</body>
</html>