JS初学3.0-CSDN博客

本文链接：https://blog.csdn.net/m0_63195227/article/details/123149735

操作元素

改变元素内容
1.

element.innerText

eg:

<button>显示当前系统时间</button>
<div>某个时间</div>

<script>
	//当我们点击按钮。div里的文字改变
	//1.获取元素
	var btn=document.querySelector('buttton');
	var div=document.querySelector('div');
	//2.注册事件
	btn.onclick=function(){
		div.innerText='2022-2-23'
		}
<script>

关于鼠标事件的关键词
借此复习对象–日期对象
ps：创建一个新Date对象的唯一方法是通过new 操作符，例如：let now = new Date();
若将它作为常规函数调用（即不加 new 操作符），将返回一个字符串，而非 Date 对象。

<script>
	var arr = new Array();//创建一个数组对象
	var obj = new  Object（）；//创建一个对象实例
	var date=new Date（）；
	console.log（date）；
	//如果没有提供参数，那么新创建的Date对象表示实例化时刻的日期和时间。
<script>

当Date作为构造函数调用并传入多个参数时，如果数值大于合理范围时（如月份为 13 或者分钟数为 70），相邻的数值会被调整。比如 new Date(2013, 13, 1)等于new Date(2014, 1, 1)，它们都表示日期2014-02-01（注意月份是从0开始的）。其他数值也是类似，new Date(2013, 2, 1, 0, 70)等于new Date(2013, 2, 1, 1, 10)，都表示同一个时间：2013-03-01T01:10:00。

element.innerHTML

<script>
	//innerText和innerHTML的区别
	//1.innerText不识别html标签
	var div=document.querySelector('div');
	//div.innerText='<strong>今天是：<strong> 2022';
	//2.innerHTML识别html标签
	div.innerHtml='<strong>今天是：<strong> 2022'
	//可以获取元素里的内容

表单元素

在这里插入图片描述
eg

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form>
    <input type="text" id="text">
</form>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var textInput = document.getElementById("text");

    /* 当文本框获取焦点，文本框背景为红色 */
    textInput.onfocus = function () {
        this.style.background = "red";
    };

    /* 当文本框失去焦点，文本框背景为绿色 */
    textInput.onblur = function () {
        this.style.background = "green";
    };
</script>
</body>
</html>

键盘元素

在这里插入图片描述
eg

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    /* 当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false */
    window.onkeydown = function (event) {
        /* 解决兼容性问题 */
        event = event || window.event;

        if (event.keyCode == 65) {
            console.log("true");
        } else {
            console.log("false");
        }
    };
</script>
</body>
</html>

常用元素的属性操作

innerText，innerHTML改变元素内容
arc,href
id, alt,title

排他思想

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

var btns=document.getElemrntsByTagName('button');
for(var i=0;i<btns.length;i++){
	btns[i].onclick=fuction(){
	//先把所有按钮的背景颜色去掉
	for(var i=0;i<btns.length;i++){
	btns[i].style.backgroundcolor='';
	}
	//改变元素颜色
	this.style.backgrounfcolor='pink';
	}
}

或者可以用css实现

.mask{
    display: none;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
}
.word:hover  .mask{
    display: block;
}

<!--顶部列表-->
            <div class="word">
                <div class="mask"></div>
                <a href="">首页</a>
            </div>
            <div class="word">
                <div class="mask"></div>
                <a href="">项目</a>
            </div>
            <div class="word">
                <div class="mask"></div>
                <a href="">成果</a>
            </div>
            <div class="word">
                <div class="mask"></div>
                <a href="">成员</a>
            </div>
           </div>