目录
我的第一个javaScript程序
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="js/qj.js">-->
<script>
// alert("Hello JavaScript!");
</script>
<!-- 不用显示定义type,也默认就是javascript-->
<script src="text/javascript"></script>
</head>
<body>
</body>
</html>基本语法
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var score=80;
if (score>75&&score<90){
alert("优秀");
}else alert("及格");
console.log("成绩")
</script>
</body>
</html>测试
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var 王者荣耀="王者荣耀";
var num=[1,2,3,4,5,'str',null,1.1];
var num1={
name:"张三",
age:1,
sex:"男",
hobby:["篮球","足球"]
}
</script>
</body>
</html>严格模式
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IEDA需要设置支持ES6语法
‘use strict’; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行！
局部变量建议都使用let去定义
-->
<script>
'use strict';
let i=1;
</script>
</head>
<body>
</body>
</html>字符串
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
'use strict';
let name = "zhangsan";
let age =3;
let msg='';
console.log("a");
console.log('a');
console.log("a\'");
console.log("\u4e2d");
console.log("\x41");
var school="XX学院";
//破折号``
let msg1=`XX大学${school}`
console.log(msg1)
var person={
name:"张三",
age:18,
email:"123344@qq.com"
}
</script>
</body>
</html>控制流
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var num=[3,2,3,2,4,5];
for (let i = 0; i < num.length; i++) {
console.log(num[i]);
}
console.log("=================")
for ( numKey in num) {
console.log(num[numKey])
}
console.log("==================")
var i=0;
while (i<5){
console.log(i);
i++;
}
console.log("=======")
do {
i++;
console.log(i);
}while (i<10);
console.log("===========")
num.forEach(function (value) {
console.log(value)
})
</script>
</body>
</html>Map和Set集合
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var map= new Map([['tom',200],['jack',79],['haha',90]]);
var name=map.get('tom');//通过key获取value
map.set('admin',1234);//新增或修改
// map.delete("tom");//删除
console.log(map.get('tom'));
console.log(map.delete("tom"))
console.log(map)
// var set = new Set([2,2,21,1,43,45,3,3]);//set可以去重
// console.log(set);
// console.log(set.delete(1));
// console.log(set.add(5));
// console.log(set.has(4));
</script>
</body>
</html>迭代器
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var arr=[1,2,3,4];
for (var x of arr){
console.log(x);
}
</script>
</body>
</html>函数
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// var asd=function (a) {
// // console.log(a);
// console.log(arguments.length)
// }
var asd=function (a,b,...rest) {
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest)
}
var asdf=function (score) {
if (score>=80){
console.log("良好");
}else if (score>60){
console.log("及格")
}
}
function ghj(score) {
console.log("成绩为"+score);
}
</script>
</body>
</html>变量的作用域
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//jQuery等价与$()
//唯一全局变量
// var ZhangSan={};
//
// //定义全局变量
// ZhangSan.name='zhangsan';
// ZhangSan.add=function (a,b) {
// return a+b;
// }
//
// console.log(ZhangSan)
// function aaa() {
// for (var i = 0; i < 100; i++) {
// console.log(i)
// }
// console.log(i+1); //问题？i出了这个作用域还可以使用
// }
//建议使用let去定义局部作用域的变量
// function aaa() {
// for (let i = 0; i < 100 ; i++) {
// console.log(i);
// }
// console.log(i+1);//Uncaught ReferenceError: i is not defined
// }
// var PI='3.14';
// console.log(PI);
// PI='123';//可以改变这个值
// console.log(PI);
// const PI= '3.14'; //只读变量
// console.log(PI);
// function qj() {
// var x=1;
//
// function qj2() {
// var x='A';
// console.log('inner'+x);//innerA
// }
// console.log('outer'+x);//outer1
// // qj2();
// }
// qj();
//全局变量
// var x=1;
// function f() {
// console.log(x);
//
// }
// f();
// console.log(1);
//全局对象window
// var x='xxx';
// alert(x);
// alert(window.x);//默认所有的全局变量，都会自动绑定在window()对象下；
//alert()这个函数本身也是一个window变量；
var x= 'xxx';
window.alert(x);
var old_alert=window.alert;
old_alert(x);
window.alert=function(){
}
//发现alert()失效了
window.alert(123);
//恢复
window.alert=old_alert;
window.alert(456);
</script>
</body>
</html>方法
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>3.方法</title>
</head>
<body>
<script>
<!-- 方法就是把函数放在对象的里面,对象只有两个东西:属性和方法-->
// var zhangsan={
// name:'张三',
// birth:2000,
// //方法
// age:function () {
// // 今年- 出生的年
// var now=new Date().getFullYear();
// return now-this.birth;
// }
// }
// //属性
// zhangsan.name;
// //方法
// zhangsan.age();
// this.代表什么？
function getAge() {
//今年-出生的年
var now=new Date().getFullYear();
return now-this.birth;
}
var zhangSan={
name:'张三',
birth:2000,
age:getAge
}
var xiaoMing={
name:'张三',
birth:2000,
age:getAge
}
// zhangSan.age();
// getAge.apply(zhangSan,[]);//this.指向了zhangSan，参数为空
// getAge.apply(xiaoMing,[]);
</script>
</body>
</html>Date
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var now=new Date();//Sun Nov 13 2022 15:58:41 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月 0--11
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一 1970 1.1 0:00:00 毫秒数
console.log(new Date(1668326547042));//Sun Nov 13 2022 16:02:27 GMT+0800 (中国标准时间)
now.toString();//'Sun Nov 13 2022 16:03:36 GMT+0800 (中国标准时间)'
now.toLocaleString();//'2022/11/13 16:03:36'
now.toGMTString();//'Sun, 13 Nov 2022 08:03:36 GMT'
</script>
</body>
</html>JSON
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>JSON</title>
</head>
<body>
<script>
var person={
name:'张三',
age:12,
sex: "男"
}
let s = JSON.stringify(person);
console.log(s);//{"name":"张三","age":12,"sex":"男"}
let p = JSON.parse('{"name":"张三","age":12,"sex":"男"}');
console.log(p);
// age
// :
// 12
// name
// :
// "张三"
// sex
// :
// "男"
</script>
</body>
</html>面向对象原型继承
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var Student={
name:"zhangsan",
age:3,
run:function () {
console.log(this.name+" run....");
}
}
var xiaoming={
name: "xiaoming"
}
//小明的原型是Student
xiaoming.__proto__=Student; //xiaomingrun....
var Bird={
fly:function () {
console.log(this.name+" fly.....");
}
};
//小明的原型是Bird
xiaoming.__proto__=Bird; //xiaoming fly.....
</script>
class继承
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// function Person(name) {
// this.name=name;
// }
//
// //给Person新增一个方法
// Person.prototype.hello = function () {
// alert("Hello 张三")
// };
//
// var zhangSan=new Person("zhanSan");
// zhangSan.hello();
//定义一个学生的类
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert("hello")
}
}
class XiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一名小学生')
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong",1);
</script>
</body>
</html>操作BOM对象
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--window代表浏览器窗口-->
<!--window.alert(1)
undefined
window.console.log("111")
VM115:1 111
undefined
window.innerHeight
386
window.innerWidth
852
window.outerHeight
831
window.outerWidth
782-->
<!--Navigator,封装了浏览器的信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36'
navigator.platform
'Win32'
-->
<!--location代表 当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //刷新网页
-->
<!--document代表当前的页面，HTML DOM文档树
document.title
'百度一下，你就知道'
document.title='张三'
'张三'
-->
<!--获取具体的文档树节点-->
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl=document.getElementById('app');
</script>
<!--获取cookie
document.cookie
-->
</body>
</html>获得Dom节点
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css选择器
var h1=document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2');
var father=document.getElementById('father');
var childrens=father.children;//获取父节点下的所有子节点
console.log(h1)
console.log(p1)
console.log(p2)
console.log(childrens)
</script>
</body>
</html>更新Dom节点
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="dl"></div>
<script>
var ss=document.getElementById('dl');
</script>
<!--ss.innerHTML='345'
'345'
ss.innerHTML='<strong>2343</strong>'
'<strong>2343</strong>'
ss.style.color='yellow'
'yellow'
ss.style.fontSize='20px'
'20px'-->
</body>
</html>删除节点
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1"></p>
<p class="p2">p2</p>
</div>
<!--删除节点的步骤:先获取父节点，在通过父节点删除自己-->
<script>
var self=document.getElementById('p1');
var father=p1.parentElement;
father.removeChild(self)
//删除是一个动态的过程；
//注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！
// father.removeChild(father.children[0])
// father.removeChild(father.children[1])
// father.removeChild(father.children[2])
</script>
</body>
</html>插入节点
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，
但是这个DOM节点已经存在元素了，我们就不能这么干！会产生覆盖-->
<!--追加-->
<p id="js">JavaScript </p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var js=document.getElementById('js');
var ee=document.getElementById('ee');
var list=document.getElementById('list');
// list.append(js);//追加到后面
//
// //通过JS创建一个新的节点
// var newP=document.createElement('p');//创建一个p标签,实现插入
// newP.id='newP';
// newP.innerText='Hello,ZhangSan';
// list.append(newP);
//
// //创建一个标签节点 (通过这个属性，可以设置任意的值)
// var myScript=document.createElement('script');
// myScript.setAttribute('type','text/javascript');
// list.append(myScript);
//可以创建一个Style标签
// var myStyle = document.createElement('style');//创建了一个空style标签
// myStyle.setAttribute('type','text/css');
// myStyle.innerHTML='body{background-color:chartreuse;}';//设置标签内容
//
// document.getElementsByTagName('head')[0].appendChild(myStyle)
//要包含的节点:insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
</script>
</body>
</html>操作表单
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<p>
<span>用户名:</span><input type="text" id="username">
</p>
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="women" id="girl">女
</p>
</form>
<script>
var username=document.getElementById('username');
var boy_radio=document.getElementById('boy');
var girl_radio=document.getElementById('girl');
//得到输入框的值
username.value
console.log(username.value)
//修改输入框的值
username.value=123
//对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
boy_radio.checked;//查看返回的结果，是否为true,如果为true，则被选中
girl_radio.checked=true;//赋值
</script>
</body>
</html>提交表单(使用md5加密密码)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post">
<p> <span>用户名:</span><input type="text" id="username" name="username">
</p>
<p> <span>密 码:</span><input type="password" id="password" name="password">
</p>
<!-- 绑定事件onclick 被点击-->
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa() {
var uname=document.getElementById('username');
var pwd=document.getElementById('password');
console.log(uname.value);
console.log(pwd.value);
//MD5算法
pwd.value=md5(pwd.value);
console.log(pwd.value);
}
</script>
</body>
</html>提交表单(优化)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
表单绑定提交事件
onsubmit=绑定一个提交检测的函数，true,false
将这个结果返回给表单，使用onsubmit接收！
onsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名：</span><input type="text" name="username" id="username">
</p>
<p>
<span>密 码：</span><input type="password" id="input-password">
</p>
<button type="submit">提交</button>
<input type="hidden" id="md5-password" name="password">
</form>
<script>
function aaa() {
var uname=document.getElementById('username');
var pwd=document.getElementById('input-password');
var md5pwd=document.getElementById('md5-password');
md5pwd.value=md5(pwd.value);
//可以校验判断表单内容，true就是通过提交，false,阻止提交
return true;
}
</script>
</body>
</html>使用jQuery记得导入jquery库
初始jQuery
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-1.7.2.js"></script>
</head>
<body>
<!--jQuery公式：$(selector).action()-->
<a href="" id="test-jquery" >点我</a>
<script>
//选择器就是css的选择器
$('#test-jquery').click(function () {
alert('hello,jQuery');
})
</script>
</body>
</html>选择器
公式$(selector).action()
学习网站
https://jquery.cuishifeng.cn
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-1.7.2.js"></script>
</head>
<body>
<script>
<!-- 公式$(selector).action()-->
//原生js.选择器少，麻烦不好记
// 学习网站
//https://jquery.cuishifeng.cn/
//标签
document.getElementsByTagName();
//id
document.getElementById();
//class
document.getElementsByClassName();
//jQuery css 中的选择器它全部都能用！
$('p').click();//标签 选择器
$('#id').click();//id选择器
$('.class').click();//class选择器
</script>
</body>
</html>事件
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-1.7.2.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse : <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后，响应事件
$(function () {
$('#divMove').mousemove( function (e) {
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
</body>
</html>操作dom元素
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-1.7.2.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
// $('#test-ul li[name=python]').text();//设置值
$('#test-ul li[name=python]').css("color","red")//设置值
//元素的显示和阴藏：本质 display:none;
// $('#test-ul li[name=python]').show()//显示元素
// $('#test-ul li[name=python]').hide()//隐藏元素
// $('#test-ul li[name=python]').text('javaee');//设置值
// $('#test-ul').html();//获得值
// $('#test-ul').html('<strong>123</strong>');//设置值
// $(window).width()
// $(window).height()
// $('#test-url li[name=python]').toggle(); //切换
</script>
</body>
</html>小技巧： 1、如果巩固JS(看jQuery源码,看游戏源码) 2、巩固HTML,CSS(扒网站，全部down下来，然后对应修改结果)
1755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
