测试开发-前端JS······

本文链接：https://blog.csdn.net/qq_20427967/article/details/125015309

JS引入方式

第一种：行间事件: 直接在元素上 通过给元素添加事件绑定，来执行js代码
第二种：通过script标签引入外部的js文件
第三种：直接在页面的script标签中编写js代码*/

基本语法

this

相当于python中的self

注释

需要在script标签内

变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			/**
			var：定义的变量可以跨代码块访问(全局变量)。
			let：定义块级作用局的变量（代码块内的局部变量）
			const: 定义常量，初始化必须赋值，值不可修改，只能在块级作用域访问

			{} :包起来的代码，就是代码块
	
			 */
			const c10 = 1000
			let b10 = 99
			
			if (10>5){
				var a = 10
				let b = 20
				const c = 30
			}
			
			for (item in [11,22,33]){
				var aa = 100
				let bb = 200
				console.log(a)
			
			}
	
		</script>
	</body>
</html>

数据类型

运算符

条件语句

if else

函数

箭头函数

箭头函数和普通函数中this的区别
普通函数中的this代表的对象本身
箭头函数中的this代表的当前对象外层作用域的对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var objA ={
				// 箭头函数
				func: ()=>{
					console.log('这个是func方法')
				},
				func3:(a,b)=>{
					return a+b
				},
				// 箭头函数只有一个参数时，括号可以省略
				func4:a=>{
					console.log(a)
					// 这个this代表的window对象
					console.log(this)
				},
				func2:function (){
					console.log('这个是func2方法')
					// this代表objA
					console.log(this)
				}
			}
		</script>
		
	</body>
</html>

循环

while循环

for循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 1、for条件循环 ：for(循环开始之前执行的代码，是否执行循环体的条件，循环体执行完执行执行的代码)
			 // for (var i=1;i<=10;i++){
				//  console.log(i) 
			 // }
			 
			 // 2、for 遍历循环
			// var arryA = [11,22,33,44]
			// for循环遍历数组
			// for(i in arryA){
			// 	console.log(i,arryA[i])
			// }
			// 注意点：for循环遍历数组时，遍历出来的时数组的索引
			
			var objA = {
				name:'木森',
				age:18,
				func1:function(){
					console.log('objA的func1方法')
				},
				func2:function(){
					console.log('打印对象中的this')
					console.log(this.name)
				}
			}
			// for循环遍历对象
			for (i in objA){
				console.log(i,objA[i])
			}
			// 注意点：for循环遍历对象时，遍历出来的是对象的属性名
		</script>
	
	</body>
</html>

遍历数组

对象（Python的字典）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			对象的定义：1、{}   ,2、new Object()
			对象的属性和方法：
				属性名：属性值
				方法名：函数
			对象中的this:代表的是对象本身
			*/
			var objA = {
				name:'木森',
				age:18,
				func1:function(){
					console.log('objA的func1方法')
				},
				func2:function(){
					console.log('打印对象中的this')
					console.log(this.name)
				}
			}
			var objB = new Object()
			objB.name ='yuze'
			objB.age =18
			objB.func001 = function(){
				console.log('objB的func1方法')
			}
			//  扩展：函数中的this:代表的是window对象（窗口）
			function work01(){
				console.log(this)
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩托价格表</title>
</head>
<body>
<table border="1">
    <thead>
    <re>
        <th>ID</th>
        <th>姓名</th>
        <th>价格</th>
    </re>
    </thead>
    <tbody id="body">
    </tbody>
</table>
<script type="text/javascript">
    var info = {
        id: 2,
        name: "维多利亚150",
        price: 14999
    };
    // 提取值
    var name = info.name;
    var name = info['name'];
    // 修改值
    info.price = 159999;
    // 删除
    delete info['id']
    var tr = document.createElement("tr");
    for (var key in info) {
        var txt = info[key];
        var td = document.createElement("td");
        td.innerText = txt;
        tr.appendChild(td);
    }
    var bodyTag = document.getElementById('body')
    bodyTag.appendChild(tr)

</script>
</body>
</html>

字符串

字符串基础操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    // 声明变量
    var name = '中国最厉害'
    var name = String('test02')
    // 输出变量值
    console.log(name);
    // 获取长度
    var v1 = name.length;
    // 去除空格
    var v2 = name.trim();
    // 取值,中。name.charAt(0 )
    var v3 = name[0]
    // 中国，与python一致
    var v4 = name.substring(0,2);
</script>
</body>
</html>

提取标签文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="c1">获取标签文本，整体思路和Selenium一致</span>
<script type="text/javascript">
    // 1.想获取到标签对象
    var tag = document.getElementById('c1');
    // 2.提取该标签文字
    var data = tag.innerText;
    // 3.打印
    console.log(data)
</script>
</body>
</html>

跑马灯案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="c1">获取标签文本，整体思路和Selenium一致</span>
<script type="text/javascript">
    function horse() {
        // 1.想获取到标签对象
        var tag = document.getElementById('c1');
        // 2.提取该标签文字
        var data = tag.innerText;
        // 3.提取第一个字符
        var firstString = data[0];
        // 4.提取剩余的字符
        var otherString = data.substring(1, data.length);
        // 5. 拼接一波
        var newData = otherString + firstString;
        // 6.在标签内更新内容
        tag.innerText = newData
    }

    // JavaScript中的定时器,Interval:间隔，传入函数名和间隔时间ms
    setInterval(horse, 1000)

</script>
</body>
</html>

数组

遍历/过滤/筛选数组

查找数组索引，根据索引删除对应数据

数组基本应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    function one() {
        var v1 = [1, 2, 3, 4, 5];
        var v2 = Array([1, 2, 3, 4, 5, 6]);
        // 追加
        v1.push('追加')
        // 插入到第一位
        v1.unshift('插入到第一位')
        // 指定下标插入：下标，0是添加的意思，目标值
        v1.splice(1, 0, '指定下标插入')
        // 头部删除
        v1.shift()
        // 尾部删除
        v1.pop()
        // 指定下标删除：下标，1是删除的意思
        v1.splice(3,1)
        console.log(v1)
    }
    function two() {
        var v1 = [1, 2, 3, 4, 5];
        for(var item in v1){
            console.log('取的是下标',item)
            console.log('对应的下标值',v1[item])
        }
        for (var i=0; i<v1.length; i++){
            console.log('第二种循环取值',v1[i])
        }
    }
</script>
</body>
</html>

4.2 数组应用到Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="motor"></ul>
<script type="text/javascript">
    var v1 = ["春风狒狒", "维多利亚150", "赛6"];
    for (var item in v1) {
        var moList = v1[item];
        // 创建标签
        var tag = document.createElement("li");
        // 在li标签写入内容
        tag.innerText = moList;
        // 添加到id=motor的标签内，首先获取标签对象
        var parentMotor = document.getElementById("motor");
        // 给父标签塞一个孩子li
        parentMotor.appendChild(tag);
    }
</script>
</body>
</html>

操作页面

修改HTML属性啥的

修改CSS样式

JS使用注意点

规避元素未加载就调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// window.onloan 是窗口的一个事件，这个事件会等到页面元素加载完毕之后才会执行
			window.onload = function(){
				document.querySelector('#box1').innerText='python001'
			}
		</script>
		
		<div id="box1">
			box1
		</div>

		<div id="box2">
			box2
		</div>
		
		<script>
			document.querySelector('#box1').innerText='python001'
		</script>

	</body>
</html>