javascript与css、html配合的高级使用
网页的主体是由html构成，因此要用javascript实现与用户的交互，就要获取到目标标签
获取标签元素并操作标签元素
-
获取标签元素
可以使用内置对象 document 上的 getElementById 方法来获取页面上设置了id属性的标签元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var div1 = document.getElementById("div1") alert(div1) </script> </head> <body> <div id="div1">这是一个要被获取的标签</div> </body> </html>这段代码，弹出的窗口会显示一个null，那是因为script的语句在定义这个div这个标签之前，他会先执行，所以document.getElementById("div1")会找不到这个div1的，因此会打印出null。
-
解决方法一：将javascript的语句放在定义div标签之后，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="div1">这是一个要被获取的标签</div> <script> var div1 = document.getElementById("div1") alert(div1) </script> </body> </html>这是就会返回一个[object HTMLDivElement]的对象
-
解决方法二：设置页面加载完成执行的函数，在执行函数里面获取标签元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // window.onload 表示的是窗口加载完成这个事件，匿名函数function表示窗口加载完成之后要执行的代码 window.onload = function(){ // 通过id获取到标签 var div1 = document.getElementById("div1") alert(div1) } </script> </head> <body> <!-- 给标签设置一个id属性，以便于javascript的获取 --> <div id="div1">这是一个要被获取的标签</div> </body> </html>这种方法运行的结果和是第一种方法一样，里面的注释写得很详细。
-
-
操作标签元素的属性
上面我们知道了如何获取标签元素，但是我们还不知道如何获取标签的属性和操作属性，接下来就来学习如何获取和操作属性
-
首先获取的页面标签元素，然后就可以对页面标签元素的属性进行操作，属性的操作包括:
属性的读取
-
属性的设置
- 特别注意的是：
- html的属性和js里面属性大多数写法一样，但是“class” 属性写成 “className”
- “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 窗口加载完成之后执行的是function匿名函数里面的代码 window.onload = function(){ var input1 = document.getElementById("input1"); var link = document.getElementById("link01"); // 读取属性 alert(input1.name); alert(input1.value); // 更改属性link.href link.href = "https://www.baidu.com"; } </script> </head> <body> <input type="text" name="setsize" id="input1" value="20px"> <a href="http://www.itcast.cn" id="link01" class="sty01">这是一个链接</a> </body> </html> - 特别注意的是：
-
-
读取或设置标签包裹的内容
innerHTML可以读取或者设置标签包裹的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> window.onload = function(){ var sDiv = document.getElementById("div1") ; // 查看div标签内的内容 alert(sDiv.innerHTML); // 更改div标签里面包裹的内容 sDiv.innerHTML = "hahah"; alert(sDiv.innerHTML); // 把div标签替换成一个新的标签 sDiv.innerHTML = '<a href="https://www.baidu.com">百度</a>' } </script> </head> <body> <div id="div1">这是一个div标签</div> </body> </html>
javascript数组循环和定时器
-
数组及操作方法
-
数组的介绍
- 数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的数据，好比 python 里面的列表。
-
数组的定义
-
实例化对象方式创建
<script> // 实例化创建一个数组 var aList = new Array(1,2,3,4) </script>
-
-
- 字面量方式创建（推荐使用）
```javascript
<script>
var aList1 = [1,2,3,4]
</script>
```
-
多维数组(类似于python里面的列表里面嵌套列表)
<script> var aLsit2 = [[1,2,3],[4,5,6]] </script>
-
数组的操作
-
获取数组的长度
// 获取数组的长度 var aList1 = [1,2,3] alert(aList1.length)
-
2. 根据下标取值
```html
alert(aList1.length)
// 根据下标取值
var nNum = aList1[1]
alert(nNum)
```
3. 从数组最后添加和删除数据
```html
// 往数组里面追加数据
aList1.push(4)
alert(aList1.length)
// 从数组最后面去除一个数据，并返回（有返回值）
aList1.pop()
alert(aList1.length)
```
4. 根据下标添加和删除元素
数组.splice(start,num,element1,.....,elementN)
参数解析：
1. start：必需，开始删除的索引。
2. num：可选，删除数组元素的个数。
3. elementN：可选，在start索引位置要插入的新元素。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var aList = [1,2,3,4,5]
// 从索引为0的位置删除一个元素（即下标为0的元素）
aList.splice(0,1)
alert(aList)
// 从索引为0的位置开始删除两个元素
aList.splice(0,2)
alert(aList)
// 在索引为0的位置删除0个元素，插入"abc","bcd","haha"这三个元素
aList.splice(0,0,"abc","bcd","haha")
alert(aList)
</script>
</head>
<body>
</body>
</html>
```
-
循环：循环就是某个时间重复执行
- for循环语法：for(初始值；比较表达式；增量){每次满足条件要执行的代码}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var aList = [1,2,3,4,5] // for(初始值；比较表达式；增量){每次满足条件要执行的代码} // 注意：括号里面的语句要用";"隔开 for(var i = 0; i< aList.length;i++){ alert(aList[i]) } </script> </head> <body> </body> </html>-
while 循环语法:先定义两个变量while(比较表达式){满足条件执行的代码;自增量}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var aList = [1,2,3,4,5]; var nNum = 0; while(nNum < aList.length){ alert(aList[nNum]); nNum++; } </script> </head> <body> </body> </html>-
do while循环：do while语法：do{满足条件执行的代码;自增量}while(比较条件表达式)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // do while语法：do{满足条件执行的代码;自增量}while(比较条件表达式) var aList = [1,2,3,4,5]; var nNum = 0; do{alert(aList[nNum]);nNum++ }while(nNum < aList.length) </script> </head> <body> </body> </html>-
拓展：字符串拼接：用“+”
如果拼接的多个不是字符串类型，会自动转换成字符串类型，然后再拼接。
-
-
-
定时器
定时器就是在一段特定的时间后执行某段程序代码。
- 定时器的使用
- setTimeout(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器
- setInterval(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器
setTimeout函数的参数说明:
- 第一个参数 func , 表示定时器要执行的函数名
- 第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
- 第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> // 这是定时器要执行的函数 function fnOk(){ alert("ok") } // 用setTimeout调用该函数，设置延迟的时间（ms） setTimeout(fnOk,2000) </script> </head> <body> </body> </html> - 定时器的使用
