JavaScript应用基础

时间:2024-04-15 18:54:23

一、变量的声明:使用var:

var a = 5  //表示a为整型值为5
var b = "字符"   //表示b为字符型,值为字符
var c = true/false   //表示c为布尔型,有两种取值
var d    //未赋初值则d的值为Undefined,未定义
var e = null  // 表示空值

变量声明可以有三种方式:

使用var声明的变量是函数作用域或全局作用域的变量,可以被重新赋值。

使用let声明的变量是块级作用域的变量,可以被重新赋值。

使用const声明的变量是块级作用域的常量,一旦被赋值就不能再改变。

二、JavaScript中的多种document.getElement方法:

  • document.getElementById(id):根据元素的id属性获取元素对象。用法示例:
    var element = document.getElementById("myElement");

    这样就获取了http中一个ID为myElement的元素,由element这个变量名表示。后续示例也是同理

  • document.getElementsByClassName(className):根据元素的class属性获取元素对象的集合。用法示例:

var elements = document.getElementsByClassName("myClass");
  • document.getElementsByTagName(tagName):根据元素的标签名获取元素对象的集合。用法示例:
var elements = document.getElementsByTagName("div");
  • document.getElementsByName(name):根据元素的name属性获取元素对象的集合。用法示例:
var elements = document.getElementsByName("myName");
  • document.querySelector(selector):根据CSS选择器获取匹配的第一个元素对象。用法示例:
var element = document.querySelector("#myElement");
  • document.querySelectorAll(selector):根据CSS选择器获取匹配的所有元素对象的集合。用法示例:
var elements = document.querySelectorAll(".myClass");

获取这写元素后克通过对变量名进行操作达到对html中对应元素的操作。通常包括:

  1. 获取和修改元素的属性
  2. 获取和修改元素的文本内容
  3. 获取和修改元素的样式
  4. 添加和移除元素的类名
  5. 添加和移除元素的子元素
  6. 遍历元素的子元素

以下是一个通过点击事件切换呈现内容的示例:

html文件:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="./global.css">
</head>

<body>

    <ul id="ccc">
        <li class="active">一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
    </ul>
    <button id="pre">←</button>
    <button id="next">→</button>
<script src="index.js">
</script>

</body>
</html>

css文件global.css:

#ccc{
    width:300px;
    height:150px;
    position:relative;
}
ul {
    list-style-type: none;
}
#ccc li{
    width: 300px;
    height: 150px;
    position: absolute;
    text-align: center;
    text-shadow: 0 0 20px #147;
    font-size: 40px;
    color:red;
    opacity: 0;
    transition: opacity 1s;
    float: left;
}
#ccc li:nth-child(1) {background-color: wheat;
}
#ccc li:nth-child(2) {background-color: brown;
}
#ccc li:nth-child(3) {background-color: coral;
}
#ccc li:nth-child(4) {background-color: darkmagenta;
}
#ccc li.active{
opacity:1;
}

js文件index.js:

var ccc = document.querySelector("#ccc")
var items = ccc.children
var preBtn = document.querySelector("#pre")
var nextBtn = document.querySelector("#next")

var ind = 0
nextBtn.addEventListener('click',function (){
    items[ind].className = ''
    if (ind ===items.length-1){
        ind = -1
    }
    ind++
    items[ind].className = 'active'
})
preBtn.addEventListener('click',function (){
    items[ind].className = ''
    if (ind ===0){
        ind = items.length
    }
    ind--
    items[ind].className = 'active'
})

是通过将列表中的四个元素:内容分别是“一”、“二”、“三”、“四”四个汉字,分别为其设计了边框等一系列元素,并且将四个汉字重叠,通过css文件中opacity设置透明度,要显示的设置为不透明,其他的设置为全透明。通过点击bottom左箭头或右箭头来实现。两个点击事件对应两个函数,函数的作用就是将当前显示的透明度设为0,将下一个汉字透明度设为1,就实现了一个切换。