JavaScript应用基础

一、变量的声明：使用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中对应元素的操作。通常包括：

获取和修改元素的属性
获取和修改元素的文本内容
获取和修改元素的样式
添加和移除元素的类名
添加和移除元素的子元素
遍历元素的子元素

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

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，就实现了一个切换。

秒客网

JavaScript应用基础

相关文章