JavaWeb

最新推荐文章于 2026-06-19 11:36:35 发布

原创最新推荐文章于 2026-06-19 11:36:35 发布 · 104 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #开发语言

博客围绕WEB进阶展开，介绍了JavaScript的引用、常量变量定义、数据类型等基础内容，还涉及JSON、Cookie、LocalStorage等。同时讲解了DOM元素的查找、值的操作，以及DOM事件，如鼠标、表单、键盘事件，另外提及JQuery和Vue。

WEB进阶

JavaScript

是一门面向对象的解释型高级编程语言

面向对象
动态型语言
解释型语言（需要解释器，由浏览器提供，即JS代码是由浏览器来执行的）

JS的引用

1.内部JS：可以在script标签内编写js代码，且script可以放在html页面中任意位置

2.外部JS：在外部文件夹新建 .js 文件，通过script标签的src属性引入，如果script标签引入了外部js文件，那么改标签内就不能写js代码

常量定义

const 常量名 = 值;

变量定义

var 变量名 = 值;
var str = '';// 字符串用''或""囊括
let 变量名 = 值;// 定义变量尽量使用let

数据类型

Number，String，boolean，数组，对象

typeof()函数是js特有的，可用于检查数据的数据类型

数组

// 定义
let arr1 = Array();
let arr2 = [];
let arr3 = [1,'字符串',true];
// 元素添加
arr1[0] = '张三';// 下标索引添加
arr1[2] = '李四';// 当跳过了下标为1的位置，会默认为空，数组长度仍为3
arr2.push(10);// push添加到数组末尾
arr2.unshift(20);// unshift添加到开头
// 元素删除
arr2.pop();// 删除最后一个元素
aar2.shift();// 删除第一个元素
// 元素访问
console.log(arr3[2]);// 单个元素访问
for (let i = 0; i < arr2.length; i++) {// 遍历全部元素
    console.log(arr2[i]);
}
for (let item of arr3) {// for of 遍历
    console.log(item);
}

创建对象

js中的对象可以直接创建

// 第一种
let student = new Object();// 新建对象
student.name = '张三';// 为对象赋值
student.age = 31;
student.study = function() {
    console.log('我爱学习！')
}
console.log(student);
console.log(typeof(student));
console.log(student.name);
student.study();

// 第二种
let people = {
    name:'张三',
    age:30,
    eat:function(){
        console.log("吃饭！")
    }
}
console.log(people);
console.log(people.name);
people.eat();

信息打印

alert(内容);// 弹框打印
console.log(内容);// 控制台打印

控制语句

if else 语句
while 语句
for 语句
switch case 语句

函数

// js中var定义的变量和函数会被预先加载
// 定义
function 函数名(形参列表) {
    函数体;
    return;
}
// 调用
函数名(实参);

// 例
function f(num1,num2) {
    return num1+num2;
}
f(1,2);

JSON

json数据一般用来实现浏览器和服务器之间的数据交互

json可以理解为js对象的另一种表示方法

// JSON对象
{
    "key":value,// key值必须有双引号，value若是字符串也必须有双引号
    "key":value,
}
// JSON字符串
"{"key":value,"key":value}"

将json字符串转变成js对象

let jsonStr1 = '{"name":"张三","age":31}';// 这是一个json字符串
let user = JSON.parse(jsonStr1);// 将json字符串转换成json对象

将json对象转变成js字符串

let people = {
    "name":'张三',
    "age":31,
    "address":'四川省成都市',
}
let peopleJson = JSON.stringify(people);// 将json对象转变成js字符串

JSON对象和JS对象的区别：

JSON对象的key值必须要用双引号，若value值是字符串也要用双引号
JS对象内部可以有方法，JSON对象不行
JSON对象仅仅是一种数据格式，而JS对象表示实例
JSON对象可以跨平台传输，JS对象不行

Cookie

Cookie是浏览器存储数据的一种手段，通过key=value的形式进行存储

Cookie的存储是可以设置过期时间的

Cookie并不是能存储所有数据，对存储数据有大小限制

Cookie信息存储于浏览器中，当浏览器向服务器发送请求时，Cookie会一起携带着发送给服务器（html每个页面都有自己的Cookie，浏览器请求时会将当前页面的cookie一起发送给服务器）

document.cookie = "user=张三;expires = The, 18 Dec 2043 12:00:00 GMT";

LocalStorage

LocalStorage也是通过key-value的形式将数据保存到浏览器中

使用LocalStorage将数据保存在浏览器中后可以在任何一个页面中根据key拿到value值

SessionStorage与LocalStorage用法一样，SessionStorage的存储从属于回话，即浏览器中的页面

// 设置key-value
localStorage.setItem('name',"李四");
// 根据key获取value
let name = localStorage.getItem('name');
// 根据key删除value
localStorage.removeItem('name');
// 清除所有数据
localStorage.clear();

DOM

DOM编程：JS代码操作html标签

DOM对象：节点数对象，每个标签看成一个节点

浏览器在加载html页面时也会构建一个DOM节点数，这个DOM就是JS操作html的一个接口

若想通过js操作html标签，那就必须通过js去获取（通过选择器获取）该标签对应的DOM节点

html元素查找

querySelector：查询出符合css选择器的第一个DOM节点

querySelectorAll：查询出符合css选择器的所有DOM节点

获取html值

改变html值

修改html值

		<table class="my-table">
			<thead>
				<th><input type="checkbox"></th>
				<th>编号</th>
				<th>标题</th>
				<th>集数</th>
				<th>完结</th>
				<th>评分</th>
				<th>类型</th>
				<th>操作</th>
			</thead>
			<tbody>

			</tbody>
		</table>

// 第一种方法
// 1.选择器选择一个节点
// 2.循环获取数据数组中的单个数据
// 3.新建行，用于存放这个数据
// 4.遍历单个数据中的所有key值
// 5.通过key值新增列并写入
// 6.将遍历该单个数据得到的值写到一行
// 7.将这些行数据添加到指定节点中

		// 将数据渲染到表格中
		<script>
			let data1 = [{
				"id": "4310",
				"title": "鬼灭之刃 游郭篇\n",
				"index_show": "全11话",
				"is_finish": "1",
				"score": "9.7",
				"type1": "漫画改"
			}, {
				"id": "4311",
				"title": "鬼灭之刃 游郭篇\n",
				"index_show": "全11话",
				"is_finish": "1",
				"score": "9.7",
				"type1": "漫画改"
			}];
			
			fanjuDataShow();// 调用函数
			
			function fanjuDataShow(){
				let tableDom = document.querySelector('.my-table>tbody');//选择器选择一个节点（标签）
				
				// 在表格第一列新增一列复选框
				let td1Dom = document.createElement('td');// 为复选框新增列
				let inputDom = document.createElement('input');// 相当于新增input标签
				inputDom.type = 'checkbox';// input类型为checkbox
				td1Dom.appendChild(inputDom);// 将input标签添加到第一列中
				trDom.appendChild(td1Dom);// 再将列添加到行中
                
				/*
				for(let item in data){
					
				}
				如果data是对象则item表示对象的属性名
				如果data是数组则item表示数组的下标索引
				*/
			   
				//往表格中添加数据表格数据
				for (let i = 0; i < data1.length;i++) {
					let fanju = data1[i];// 获取data1数组中的数据
					
					let trDom = document.createElement('tr');//创建节点对象（行），data1中有多少数据就新增几行
					for (let key in fanju) {// fanju为data1中一个元素，遍历获取fanju中的key值
						let tdDom = document.createElement('td');// 每个key值对应的value值占据一列，有多少key值就新增多少列
						tdDom.innerText = fanju[key];// 根据key值将value值添加到新增列中
						trDom.appendChild(tdDom);// 再将所有数据写到一行中
					}
                    
					// 在表格最后一列添加按钮
					let td2Dom = document.createElement('td');// 新建列
					let buttonDom = document.createElement('button');// 新建button节点
					let button1Dom = document.createTextNode("click");// 设置button的value值
					buttonDom.appendChild(button1Dom);// 将值添加到button中
					td2Dom.appendChild(buttonDom);// 将button添加到列中
					trDom.appendChild(td2Dom);// 将列添加到行中
                    
					tableDom.appendChild(trDom);// 添加到指定节点（标签）中
				}
			}
		</script>

DOM事件

鼠标事件

表单事件

键盘事件

	<body>
		<button type="button" οnclick="button1()">按钮1</button>
		<button type="button" id="but2">按钮2</button>
		<button type="button" οnclick="button3(20)">按钮3</button>
		<button type="button">按钮4</button>
        
		<script type="text/javascript">
            // 点击事件第一种方法
			function button1() {
				alert(123);
			}
			
            // 点击事件第二种方法
			let bt1Dom = document.getElementById("but2");
			bt1Dom.onclick = function() {
				alert("按钮二");
			}
			
            // 带参数的点击事件
			function button3(id) {
				alert('id:'+id)
			}
		</script>
	</body>

JQuery

是一个轻量级的js框架

使用时需要先引入jquery.js文件，然后创建jquery对象，必须使用jquery对象去操作dom节点

// 获取到DOM节点
// $(css选择器)——获取的是符合当前选择器的所有节点
// eq(index)——获取指定索引的dom节点，索引范围[0,dom节点个数]
let dom = $('input').eq(0);

// 当前节点的子节点
dom.children('子节点选择器')
// 当前节点的父节点
dom.parent('父节点选择器')

// 常见操作
// （其中dom.xxx中的dom为获取到的dom节点，并不是固定的dom）
let str = dom.text()//获取标签内的文本
dom.text('字符串')//给标签设置文本
let html = dom.html()//获取当前标签所包含的html页面内容
dom.html('html字符串')//用自定义html字符串替换标签中原先的html页面内容
let data = dom.val()//用于获取input输入框的value值
dom.val(值)//给对应输入框设置值
let att1 = dom.attr('属性名')//获取标签的属性所对应的值
let att2 = dom.prop('属性名')//获取标签的属性所对应的值
dom.attr('属性名',属性的值)//给标签的属性设置值
dom.prop('属性名',属性的值)//给标签的属性设置值
dom.addClass('class选择器的名字')//给某个标签添加一个class选择器
dom.removeClass('class选择器的名字')//移除某个标签中指定的class选择器

// 增加事件
// input事件：当表单有值输入时触发事件
// focus事件：当输入框获取到焦点（鼠标光标在输入框中）后就会触发事件
// change事件：当表单中内容修改时就会触发事件
$('input').eq(0).on('change',function(){
// this写在方法内时代表当前获取到的节点对象,写在外部时代表的是window对象
// input表单中有value属性（即表单的值），jquery可以用val()方法获取
// 给输入框传值：节点对象.val(值);
	console.log($(this).val())
})	
// 当表单获取到焦点后边框变颜色
$('input').on('focus',function(){
	$(this).css({'border':'1px solid skyblue'})
})
// 失去焦点后颜色还原
$('input').on('blur',function(){
	$(this).css({'border':'1px solid lightgray'})
})
// 点击按钮实现跳转
$('.login-box button').on('click',function(){
	let account = $('input').eq(0).val();
	let password = $('input').eq(1).val();
	// 数据校验成功后就可以向后台发起请求
	// DOM:location.href 代表浏览器的地址栏
	location.href = '../index.html';
})

<!-- 第二种方法（第一种在DOM处） -->
		<script>
			let data1 = [data1数据同上];
			
			fanjuDataShow();// 调用函数
			// 向表格中渲染数据
			function fanjuDataShow(){
				let html = ``;
				for (var i = 0; i < data1.length; i++) {
					html += `<tr>
						<td>
							<input type="checkbox" name="" id="" value="" />
						</td>
						<td>${data1[i].id}</td>
						<td>${data1[i].title}</td>
						<td>${data1[i].index_show}</td>`
                    
						if (data1[i].is_finish == 1) {
							html += `<td>完结</td>`
						} else {
							html += `<td>未完结</td>`
						}
						
					html += `
						<td>${data1[i].score}</td>
						<td>${data1[i].type1}</td>
						<td>
							<input class = "shanchu" type = "button" value = "删除" data-id=${i}>
						</td>
					</tr>`;
				}
				$('.fanju-table>.my-table').html(html);
				
				// ？
				$('.shanchu').on('click',function(){
                    // data-id为自建的属性，作用是获取到当前所遍历数据的索引，i即为当前遍历元素的索引值
					let id = $(this).attr('data-id');
                    // confirm弹窗（自动生成）
					let flag = confirm('确认删除数据？','',['取消','确认'],function(e) {
						e.index
					},'div');
					if(flag) {
						data1.splice(id,1);// 第一个参数为删除项目的位置，第二个参数为删除的数量
						fanjuDataShow();// 刷新页面
					}
				})
			}
		</script>

jquery的ready和window.onload的异同：

相同：函数的代码都是在html页面的标签加载完成之后才能执行

不同：ready函数在js中可以写多个，onload只能一个；load要求html标签加载完毕同时要求图片等资源也加载完毕才执行代码，而ready知识要求html标签加载完毕即可

// 显示 隐藏
<body>
	<button>显示</button>
	<button>隐藏</button>
	<div style="width: 300px;height: 300px;background-color: orange;"></div>
	<script>
		$('button').eq(1).on('click', function() {
			$('div').hide();// 隐藏
		});
		$('button').eq(0).on('click', function() {
			$('div').show();// 显示
		});
	</script>
</body>

// 时间函数
<body>
    <button οnclick="clearDingshiFn()">清除定时器</button>
	<script>
		setTimeout(function() {
			alert(123);
		}, 2000);// 当time时间完成后就执行function内的代码

		let time1 = setInterval(function(){
			console.log("====================");
		},1000);// 每隔1秒执行一次，循环执行
		  
		function clearDingshiFn(){
			clearInterval(time1);// clearInterval停止执行
		}
	</script>
</body>

Vue

渐进式的JavaScript框架

使用vue首先需要引入vue.js文件

	<body>
		<div id="root">
            
			<div>
				<!-- 还可以放js表达式 -->
				{{name+"123"}}
			</div>
			<div>
				{{str1}}
			</div>
			<div>
				{{student.name}}
			</div>
            
			<div>
				<!-- 指令：
						数据的绑定：单向和双向
							单向绑定：v-bind，可以将数据绑定给标签中的属性;
									v-bind:属性名="data中的数据"
							双向绑定：数据的双向绑定只能发生在input输入框，即有value属性
									v-model="data中的数据"
				 -->
				 <img v-bind:src="image" v-bind:data-str="student.name" v-bind:class="style1"/>
				 
				 <input type="text" name="" id="" value="" v-model="number"/>
				 <!-- number值会发生同步更改 -->
				 {{number}}
			</div>
            
			<div>
				<!-- 事件绑定：v-on
					   v-on:事件名称="事件函数"
					   可简写为@事件名称="事件函数"
				-->
				<button type="button" v-on:click="butFn1()">按钮</button>
			</div>
            
             <div>
				<!-- 计算属性：计算+属性(data中的数据对象) ——>计算已有的属性，并将计算的结果赋值给一个新的属性 -->
				{{weatherName}}
				{{weatherName2}}
			</div>
            
		</div>
		
		<script type="text/javascript">
			new Vue({
				el:'#root',// 选择器选择节点，id为root的div与该vue绑定
                
                 // vue页面的数据都放在data里面
				data:{
					str1:'张三',
					name:'李四',
					student:{// 定义对象
						name:'王五',
						age:31,
					},
					image:'图片地址',
					style1:'img1',
					number:1,
                      flag:true,
				},
                
                 // 用于定义方法
				methods:{
				// 方法的定义：
				// 方法名:function() {
				// 	方法体;
				// }
					butFn1:function() {
						alert(123);
					}
				},
                
                  // 计算属性所做的事，事件处理也可以完成（给某个标签绑定事件，调用某个数据，对数据做处理）
				// 但是事件每次都会被触发，而计算属性则有缓存的帮助（当所要计算的属性修改后，修改后的值就会存到缓存中）
				computed:{// 用于存放计算属性
					weatherName:{
						get(){// 调用data中已有的属性，根据属性值去做一些处理，将结果交给weatherName
							return this.flag?'真的':'假的';
						},
						set(value){// 当weatherName的值发生改变时就会触发该方法，该方法的形参value就是weatherName修改后的值
							console.log(value);
						}
					},
					weatherName2(){
						// 当计算属性只需要调用get方法时就可以使用简写形式：
						return this.flag?'真的':'假的';
					}
				},
			});
		</script>
	</body>