JS
1.JS基础命令和变量:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTest</title>
</head>
<body>
<script>
// 1.弹出警告框
window.alert("JS");
// 2.在前端页面显示
document.write("JS");
// 3.在控制台输出
console.log("JS")
//var定义变量
var a=18;
a="xiangxiang";
alert(a);
//特点1:作用域很大,定义的是全局变量
//特点2:可以重复定义,后面的会覆盖前面的
{
var x=1;
var x="haha";
}
alert(x);
//let关键字定义变量
{
let b=1;
document.write(b);
}
//特点1:是局部变量
//特点2:不能重复定义
//const关键字,定义的是常量
const name="nono";
document.write(name);
</script>
</body>
</html>
------------------------------------------
2.JS的数据类型:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTest2</title>
</head>
<body>
<script>
//原始数据类型
alert(typeof 1);//number
alert(typeof 1.5);//number
alert(typeof "xiangxiang");//string
alert(typeof 'haha');//string
alert(typeof true);//Boolean
alert(typeof false);//Boolean
alert(typeof null);//object
var a;
alert(typeof a);//undefined
</script>
</body>
</html>
-----------------------------------------------
3.JS运算符:与java基本一致, 唯一区别, == (会进行类型转换)和===(不会进行类型转换)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTest3</title>
</head>
<body>
<script>
var a1=20;
var a2='20';
var $a3=20; //$没有实际意义,只是变量名,允许以$作为变量名开头
alert(a1==a2);//true
alert(a1===a2);//false
alert((a1===$a3));//true
//类型转换
//1.将字符串转换为数字
alert(parseInt("12"));//12
alert(parseInt("12A45"));//12 字母前面有数字将数字转换为数字,字母后面的内容将被忽略
alert(parseInt("A33"));//NaN(not a number) 字母前面没有数字,将返回NaN
//2.将其他类型转换为boolean类型
if(0){//false
alert("0 转换为false");
}
if(NaN){//false
alert("NaN 转换为false");
}
if(-1){//true
alert("除0和NaN其他全部转换为true");
}
if(""){//false
alert("空字符串转换为false,其他字符串均转换为true");
}
if(null){//false
alert("null 转换为false");
}
if(undefined){//false
alert("undefined 转换为false");
}
</script>
</body>
</html>
-------------------------------------------
4.JS流程控制语句: 和java一样;
---------------------------------
5.JS函数:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTest4</title>
</head>
<body>
<script>
//定义函数-1
function add(a,b){
return a+b;
}
//定义函数-2
var add=function (a,b){
return a+b;
}
//调用
var result=add(10,20);
alert(result);
</script>
</body>
</html>
-------------------------------------------
6.JS对象:
1.Array数组:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTest5</title>
</head>
<body>
<script>
//1.定义数组
//方式1:
var arr1=new Array(1,2,3,4);
//方式2:
var arr2=[1,2,3,4];
console.log(arr1[0]);//1
console.log(arr2[0]);//1
//特点:长度可变,类型可变
arr1[10]=50;
console.log(arr1[10]);//50
arr1[9]=true;
arr1[8]="a";
console.log(arr1[9]);//true
console.log(arr1[8]);//a
console.log(arr1[7]);//undefined
//数组的属性(.length)
console.log(arr1.length); //11
//数组的方法
//1.foreach遍历数组中有值的元素 (与for循环的区别,for循环是遍历所有的元素,foreach是遍历所有有值的元素)
arr1.forEach(function (e){
console.log(e);
})
//简化(类似于lambda表达式):
arr1.forEach((e) => {
console.log(e);
})
//2.push添加元素到数组尾部
arr2.push(7,8,9);//可以添加多个元素
//3.splice删除元素
arr2.splice(2,2); //第一个参数是删除的起始索引,第二个参数是删除元素的个数
</script>
</body>
</html>
----------
2.stirng字符串对象(与java类似):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTest6</title>
</head>
<body>
<script>
//string字符串对象
var str1=new String("Hello"); //方式1
var str2="World";//方式2
console.log(str1);
console.log(str2);
//属性:length
console.log(str1.length); //5
console.log(str2.length); //5
//方法:
//1.charAt(index):返回指定索引位置的字符
console.log(str1.charAt(0)); //H
//2.indexOf(substr):检索字符串的位置
console.log(str1.indexOf("lo"));//3
//3.trim():删除字符串两端的空格
var str3=" Hello World ";
console.log(str3);
console.log(str3.trim());
//4.substring(start,end):提取字符串中介于两个指定索引之间的字符
console.log(str3.substring(2,5));
</script>
</body>
</html>
------------
3.自定义js对象和JSON:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTest7</title>
</head>
<body>
<script>
//1.自定义js对象
var user={
name: "xiangxiang",
age: 10,
eat: function (){
alert("吃饭~");
},
//简化
drink(){
alert("喝水~");
}
}
user.eat();
user.drink();
console.log(user.name);
//2.自定义JSON
var jsonStr='{"name":"xiangxiang","age":18,"addr":["北京","杭州"]}'; //JSON本质是一个字符串
//将JSON转换为js对象
var obj =JSON.parse(jsonStr);
console.log(obj.name);
//将对象转换为JSON
var str =JSON.stringify(obj);
console.log(str);
</script>
</body>
</html>
------------
4.BOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTest8</title>
</head>
<body>
<script>
//1.window对象
//获取window. 可以省略
window.alert("hello world!");
alert("hello world!");
//方法
//confirm()方法:显示一个确认对话框,返回一个布尔值
var result=confirm("yes?");
console.log(result);
//定时器,setInterval --周期性执行某一个函数
setInterval(function (){
console.log("hello world!");
},2000); //每2000毫秒执行一次
//定时器-setTimeOut -- 延迟指定时间执行一次
setTimeout(function (){
alert("no!");
},3000);
//2.location对象
//获取,window.location , window.可以省略
alert(location.href);//警告当前的地址栏
location.href="https://www.xianghaha.site";//自动跳转到指定地址栏
</script>
</body>
</html>
---------------------------------------
5.DOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTest9</title>
</head>
<body>
<img id="h1" src="/img/123.jpg"> <br>
<div class="cls">xiangxiang</div>
<div class="cls">haha</div>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 游戏
<input type="checkbox" name="hobby"> 运动
<script>
//1.获取element元素
//1.1根据id获取
var img = document.getElementById("h1");
alert(img);
//1.2根据标签名获取
var divs=document.getElementsByTagName("div");
for (let i=0;i<divs.length;i++){
console.log(divs[i]);
}
//1.3根据name属性获取
var hobbys= document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
console.log(hobbys[i]);
}
//1.4根据class属性获取
var cls= document.getElementsByClassName("cls");
for (let i = 0; i < cls.length; i++) {
console.log(cls[i]);
}
//查询参考手册,属性,方法
var div1=divs[0];
div1.innerHTML="xiangxiang666";
</script>
</body>
</html>
6.事件绑定:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTest10</title>
</head>
<body>
<input type="button" id="btn1" value="按钮一" onclick="on()">
<input type="button" id="btn2" value="按钮二">
</body>
<script>
//绑定方法1:
function on(){
alert("按钮一被点击了!");
}
//绑定方法2:
document.getElementById("btn2").onclick=function (){
alert("按钮二被点击了!");
}
//除onclick之外的其他事件
//例如,onload事件:当页面加载完成后执行
window.onload=function (){
alert("页面加载完成了!");
}
//onblur失去焦点事件
//onfocus获得焦点事件
//onkeydown 某个键盘的键被按下
//onmouseover 鼠标悬停事件
//onmouseout 鼠标离开事件
//onsubmit 提交表单事件
</script>
</html>
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Hexo！