前端学习 JavaScript

JS基础

JS三种书写位置

1.行内式，直接写在元素内部

<body>
<input type="button" value="我" onclick="alert('挺好的')">
</body>

2.内嵌式

<head>
  <script>
    alert('')
  </script>
</head>

3.外部式

写完后引用

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

引用中间不能写代码

JS的注释

单行注释 // Ctrl+/
多行注释 /* */ Shift+Alt+A

JS的输入与输出

prompt('');        输入
alert('')          浏览器弹出
console.log()      控制台输出

变量

变量的声明

//声明变量
var age;
//赋值
age = 10;
//输出结果
console.log(age);

//变量初始化
var age = 10;  //声明变量同时赋值为10

同时声明多个变量，用逗号隔开

变量命名规范

由字母、数字、下划线、$组成
大小写区分
不能数字开头
不能是关键词
遵守驼峰命名法，首字母小写，后面单词大写

简单数据类型

字符串

'我的名字是'+name+'对吧'

布尔型

true的值为1，false的值为0

DOM

获取元素

根据ID获取

document.getElementById('id名')

1.因为文档从上往下加载，所以script写在标签下
2.返回的是元素对象
3.console.dir可以打印我们返回的元素对象

根据标签名获取

document.getElementByTagName('标签名')

也可以指定一个父元素后获取其中的标签名
var ol = document.getElementByTagName('父元素名')
ol[0].getElementByTagName('子标签名')
必须指定父元素的哪一个数组对象

获取body，html元素

document.body
document.documentElement

事件

事件源事件被触发的对象
事件类型如何触发比如需要鼠标点击或者键盘按下等
事件处理程序通过一个函数赋值的方式完成

<body>
  <button id = "btn">你好</button>
  <script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
      alert('世界');
    }
  </script>
</body>

改变元素内容

element.innerText
起始到终止，去除标签、空格、换行
element.innerHTML
起始到终止，保留标签、空格、换行
用的更多

<body>
    <button>显示系统时间</button>
    <div>时间</div>
    <script>
        //当我们点击按钮，div会发生变化
        var btn = document.querySelector('button')
        var div = document.querySelector('div')
        //注册事件
        btn.onclick = function() {
            // div.innerText = '2022.3.23'
            div.innerText = getDate();
        }
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['日','一','二','三','四','五','六']
            var day = date.getDay();
            return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
    </script>
</body>

改变元素属性

<body>
    <button id="Peko">佩可</button>
    <button id="Kokkoro">可妈</button><br><br>
    <img src="D:\Documents\JavaScript\image\Peco.png" alt="佩可">
    <script>
        var Peko = document.getElementById('Peko');
        var Kokkoro = document.getElementById('Kokkoro');
        var img = document.querySelector('img');
        Peko.onclick = function() {
            img.src = 'D:/Documents/JavaScript/image/Peco.png'
        }
        Kokkoro.onclick = function() {
            img.src = 'D:/Documents/JavaScript/image/Kokkoro.jpg'
        }
    </script>
</body>

posted @ 2022-03-29 18:01 旅者与他的雄关漫道阅读(29) 评论(0) 收藏举报

刷新页面返回顶部