本文介绍了JavaScript的基础知识，包括this的用法、事件处理的优化、DOM操作以及变量和数据类型的处理。通过示例展示了如何在HTML元素中使用JavaScript进行交互，如按钮点击事件改变文本、下拉框选项变化更新图片，并讨论了变量声明、数据类型转换和正则表达式。此外，还探讨了JavaScript对象的动态特性、数组操作以及JSON对象的使用。
js
初识javascript
<!--js中的this和java中的this类似。js中的this写在哪个元素中。代表哪个元素的对象-->
<input type="button" value="一头公牛加一头母牛是哪三个字？" onclick=ask() />
在点击按钮后，按钮的文字变成了两头牛。
但是，如果逻辑比较多，会导致事件属性内容变得非常长，不便阅读和维护。同时，由于改变了按钮的文字，也导致问题无法显示。
<script>
function ask() {
//根据元素id，得到该元素的对象
var spanObj=document.getElementById("infoSpan");
//设置标签对象中的文本
spanObj.innerHTML="两头牛";
//设置标签对象的样式
spanObj.style.color="red";
//把标签对象的背景图设置为黄色
//在js中，标识符只允许字母、数字、下划线、$;
//如果样式中有-，则去掉-，采用驼峰命名
spanObj.style.backgroundColor="yellow";
}
</script>
显示消息内容
//弹出对话框，会有阻塞
// alert(selectObj.value);
//在浏览器控制台显示，没有阻塞
// console.log(selectObj.value);
<img src="../img/head.jpg" width="300px" height="300px" id="faceImg">
<!--onchange表示在下拉框选项变化的时候触发-->
<select onchange="imageChange()" id="imageSelect">
<option value="1">春香</option>
<option value="2">夏香</option>
<option value="3">秋香</option>
<option value="4">冬香</option>
</select>
<script>
function imageChange() {
//得到下拉框对象
var selectObj = document.getElementById("imageSelect");
//得到下拉框的值，也就是选中选项的value值
//弹出对话框，会有阻塞
// alert(selectObj.value);
//在浏览器控制台显示，没有阻塞
// console.log(selectObj.value);
var imgObj = document.getElementById("faceImg");
if (selectObj.value == "1") {
imgObj.src="../img/head.jpg";
}else if (selectObj.value == "2"){
imgObj.src="../img/2.jpg";
}
}
</script>
优化代码
<select onchange="imageChange(this)" id="imageSelect">
<option value="../img/head.jpg">春香</option>
<option value="../img/2.jpg">夏香</option>
<option value="../img/3.webp">秋香</option>
<option value="../img/4.webp">冬香</option>
</select>
//定义js形参变量时，直接写形参变量名，不能加类型
function imageChange(selectObj) {
document.getElementById("faceImg").src = selectObj.value;
}
定义js形参变量时，直接写形参变量名，不能加类型
//window.onload 等待文档加载完毕后，再执行
window.onload = function () {
divObj= document.getElementById("choose");
divObj.getElementsByTagName("img")
}
javascript是解释性语言，浏览器解释时，从上到下逐步读取，逐步解析。所以，一定确保浏览器已经读取了指定id的元素，该方法才生效。
window.onload的含义是，等待浏览器加载完毕网页中所有的内容后，再执行。可以确保浏览器已经加载了指定id的元素。
//得到divObj标签对象中，img子元素集合，返回数组
var imgArray = divObj.getElementsByTagName("img");
<script>
var divObj;
//window.onload 等待文档加载完毕后，再执行
window.onload = function () {
divObj = document.getElementById("choose");
//得到divObj标签对象中，img子元素集合，返回数组
var imgArray = divObj.getElementsByTagName("img");
for (var i = 0; i < imgArray.length; i++) {
imgArray[i].onclick = function () {
showImg(this);
}
}
}
</script>
<body>
<img src="photo/b1.jpg" id="faceImg"><br>
<input type="button" value="选择头像" onclick="showChoose()">
<div id="choose">
男士头像：<br>
<img src="photo/b1.jpg">
<img src="photo/b2.jpg">
<img src="photo/b3.jpg">
<img src="photo/b4.jpg">
<img src="photo/b5.jpg">
<img src="photo/b6.jpg">
<img src="photo/b7.jpg">
<img src="photo/b8.jpg"><br>
</div>
</body>
var array=document.getElementsByClassName("dd");
得到指定对象中class属性为”dd“的标签
js语法基础
js简介：
js全称是JavaScript，是一种嵌入在网页中的程序段。
js是一种解释型语言，被解释器（浏览器、手机APP等）解释执行。
js由Netscape发明，ECMA将其标准化。JavaScript借用了Java的名字和语法，但它和java没有关系。
js用于增强客户端的交互功能。
jsp(java sever page)是由服务器编译，并解释执行，所以称为服务器脚本语言
js嵌入在网页的方式
1、在html网页中的
2、将js代码独立成js文件，通过网页导入添加js代码
需要注意，如果
3、在标签元素的事件属性中，添加js代码
4、超链接伪URL
<a href="javascript:alert(‘111’)” >点击
js的变量和常量
js是一种弱类型语言，弱类型是指变量任何数据都可以存放。可以存放数字，可以存放字符串，也可以存放对象的引用。使用var声明一个变量。
正因为js是弱类型语言，所以定义函数形参时，只能写变量名，不能写变量类型
在ES6以后，增加了let和const关键字，定义变量和常量。
let关键字来声明变量，作用与var相似，但其所声明的变量只在声明所在块内有效。
const关键字用于定义常量，用const声明的常量，在运行期间，值不能变化。
js数据类型
JavaScript数据类型分为：原始类型和引用类型
原始类型分为5种：undefined、null、boolean、number、string
undefined：变量没有初始化，函数没有返回值。
var a； //变量没有初始化默认为undefined
alert(a);
function fun(){
}
alert(fun());//函数没有返回值，结果为undefined
function fun(num) {
if (num < 10) {
return "ok";
}else if(num<20){
return 5;
}
}
console.log(fun(5));//满足第一个if，结果为ok
console.log(fun(15));//满足第二个if，结果为5
console.log(fun(25));//不满足条件，没有返回值，结果为undefined
function fun(a,b,c){
alert(a+" "+b+" "+c);
}
fun(1);//1 undefined undefined
fun(1,2,3,4);//1 2 4
在调用js函数时，形参和实参的个数可以不匹配。对于没有赋值的形参为undefined。
**null：**null表示在变量种没有存放任何对象的引用。null是从undefined中演化过来的。所以，null==undefined为true
对null进行属性和方法调用，会报异常。
**boolean：**和java中的boolean一样，取值为true和false。表示条件是否满足。
js的if判断条件中，可以接收任何数据，可以是boolean、数字、引用。除了false、0、null以外的数据都是true。
**number：**表示数字类型，包含整数和浮点数
var x = 8;
console.log(8 / 4);//结果为2
console.log(8 / 5);//结果为1.6
NaN为非数字，一般发生在类型转换失败时，NaN和自身不相等。NaN==NaN为false
**string:**字符串型。可用单引号或双引号声明。string虽然是原始类型，但是，它的方法和java中String类的方法类似。
需要注意，string的长度为length属性。
js中数据类型转换
js中数据类型转换分为自动类型转换和强制类型转换
自动类型转换
//将“10”字符串转化为number类型，再运算
var x = "10" - 2;//结果为8
//进行加法运算时，如果有一个操作数字为字符串，那么进行连接运算
var y = "10" + 2;//结果为“102”
//先计算1+1，结果为2，再和“2”进行连接，最后和3进行连接
var a = 1 + 1 + "2" + 3;//结果为“223”
//先将“3”和”4“自动转化成number类型，再运算。
var b = "3" * "4";
//结果为NaN；在进行乘法运算时，会先将操作数转化为number类型
//在转化失败时，结果为NaN
var c = "四" * "五";//结果为NaN
//==比较内容，如果比较数类型不匹配，会发生自动转换
// alert(55 == '55');
//===除了比较内容以外，还要比较类型
// alert(55 === '55');
强制类型转换
//parseInt("3")将字符串转化为number类型，会自动丢弃第一个非数字以后的内容
var a = parseInt("39px123");
//结果为NaN
var b = parseInt("a123");
var a =parseInt("3.5") //结果为3，自动丢弃第一个非数字以后内容
var b =parseFloat("3.5"); //结果为3.5，parseFloat能转浮点型
typeof:用于得到变量中存放数据的类型
let a;
//判断变量中存放数据的类型
console.log(typeof a);
a = 0;
console.log(typeof a);
a = "2.3";
console.log(typeof a);
a = new Object();
console.log(typeof a);
a = null;
console.log(typeof a);
正则表达式：
正则表达式用于匹配字符串是否满足指定格式。主要用于数据验证。在js中，正则表达式也是对象。
定义正则表达式：
let rex = /^\d+$/;
//检测字符串，是否匹配正则表达式
alert(rex.test("ddd"));
onbluer是失去焦点事件
取消事件
元素对象.οnclick=null;
使用js跳转页面
location.href=“目标页面路径”；
function getQuery(variable){
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
//根据表单名，得到表单值
var id = getQuery("id");
var name = getQuery("name");
js事件
js事件分为三类：鼠标事件、键盘事件、html事件
鼠标事件：click 鼠标单击事件
Mousedown 鼠标按下事件
Mouseup 鼠标弹起事件
Mouseover 鼠标进入事件
Mouseout 鼠标离开事件
Mousemove 鼠标移动事件
键盘事件： keypress 键盘按下并弹起
keydown 键盘按下
keyup 键盘弹起
html事件： load 页面加载完毕触发
change 下拉框选择变化事件
submit 表单提交事件
blur 失去焦点事件
在js中，class是关键字。所以，改变class属性，需要用到className。
function changeClass(){
var divObj =document.getElementById("mydiv");
//改变class属性，需要className
divObj.className="two"
}
js对象的特点
1、js是基于原型的面向对象语言，有面向对象的部分特征，没有接口。
2、js函数本身也是对象。
3、js对象的属性和方法，可以在运行期间动态的添加和删除。
//创建对象
var obj = new Object();
//给对象添加属性
obj.age = 20;
obj.phone = "12321321312";
obj.name = "zhangsan";
obj.sex = "nan";
//给对象添加方法
obj.speak = function () {
alert("speak");
}
// obj.speak()
console.log(obj);
//删除obj对象的phone属性
delete obj.phone;
console.log(obj);
//得到对象的属性值
alert(obj.name+" "+obj["name"]);
//遍历对象中的属性名，然后根据属性名，得到属性值
for (var fieldName in obj) {
console.log("属性名: " + fieldName + "属性值： " + obj[fieldName]);
}
json格式对象
//创建一个没有属性的json对象，等价于var o=new Object();
var o = {};
var obj = new Object();
obj.code = 2;
obj.name = "tom";
//创建一个带属性的json对象，属性名和属性值之间用冒号隔开
//属性和属性之间以逗号隔开，属性名可以加引号，可以不加
var myobj = {code: 1, 'name': "jack"};
console.log(myobj);
js数组
js数组和java中的集合类似，长度可以随内容发生变化
//创建一个长度为0的数组
var array1 = new Array();
//创建一个长度为0的数组
var array2 = [];
//创建有初值的数组
var array3 = [1, 2, 3];
array3.length = 5;
array3[8] = 9;
//数组长度用length表示
for (var i = 0; i < array3.length; i++) {
console.log(array3[i]);
}
数组的length属性不是只读属性，是可以赋值的。如果将length长度赋为0；那就是清空数组。数组长度大于有效元素的个数，没有赋值元素为undefined。
js数组添加、删除、替换元素
var array = [1, 2, 3, 4, 5];
//在数组尾部追加元素
array.push(9);
//删除指定下标的元素
array.splice(2, 1);
//插入，在指定下标中，删除0个元素，添加指定元素
array.splice(2, 0, "adb", "abs")
console.log(array);
//替换，在指定下标中，删除3个元素，再添加指定元素
array.splice(2, 3, "123");
console.log(array);
//定义json对象数组
var array = [{code: 3, name: "张三"}, {code: 8, name: "李四"}, {code: 4, name: "王五"}, {code: 9, name: "赵六"}];
for (var i = 0; i < array.length; i++) {
console.log(array[i].code + " " + array[i].name);
}
console.log("------------------------------");
//排序。需要指定比较器
array.sort((a, b) => b.code - a.code);
//使用箭头函数遍历
array.forEach(n => {
console.log(n.code + " " + n.name);
});
//找出李四所在数组的下标,如果找不到返回-1
var index = array.findIndex(n => n.name == "李四");
console.log(index);
//查询李四全部信息，如果没有找到，返回undefined
var obj = array.find(n => n.name = "李四");
console.log(obj);
//筛选数组中的元素
var newArray = array.filter(n => n.code > 5);
console.log(newArray);
//得到处理数组元素后的新数组
//得到只存放编号的数组
var newArray = array.map(n => n.code);
console.log(newArray);
//得到每个员工的姓名和工资的新数组
var newArray = array.map(n => {
return [emName = n.name, emMoney = n.money]
});
console.log(newArray);
//速写属性，当属性名和属性值变量同名时，可以省去属性值
var name=$("speakTxt").value
var speakObj={name,cotent:$("contenTxt").value};
模板字符串
用于在字符串中插入变量的值，
var code="001";
var str=`<span>${code}</span>`;
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
