JavaScript入门到实战
1、入门
1.1、引入JavaScript
-
内部标签
<script> //asasda </script> -
外部引入
a.js
//asdatest.html
<script src="a.js"></script>
1.2、基本语法
<script>
const score = 71;
if (score>60&&score<=70){
alert("及格");//alert 在网页中弹窗
console.log("嘿嘿");//控制台输出
}else if (score>70&&score<=80){
alert("优秀");
}else{
alert("其他");
}
</script>
跟java的语法及其类似，重点是f12操作调试器
2、数据类型
大体上还是跟Java差不多，就写几个不一样的
-
跟Java差不多，需要注意的是不分整数和小数
-
只有null和undefined
- null 空
- undefined 未定义
-
数组
- 特别注意，数组下标越界：undefined，而不会报下标越界错误
-
对象
- 对象使用大括号{}
- 数组使用中括号[]
2.1、字符串
-
转义字符
\' \n \t \u4e2d \x41 -
多行字符串编写
let msg='hello asdad' + 'asd' + 'asd' + 'ad' -
模板字符串
let name="kongkong"; let age=9; let msg='加油，${name}' -
字符串长度
str.length -
字符串不可变性
-
大小写转换
student.toUpperCase()//变成大写 student.toLowerCase()//变成小写 -
正则表达式
[) student.substring(1); student.substring(1,2);//从第下标1截取到2
2.2、数组
-
定义一个数组
let array=[1,2,3,4,5,6] -
长度
array.length -
通过元素获取下标索引
array.indexOf(2) -
slice()截取数组的一部分
array.slice(xx,xx) -
push(),pop()尾部
push:插入到尾部 pop:弹出尾部元素 -
unshift(),shift()头部
unshift():插入到头部 shift():弹出头部元素 -
排序sort()
["A","c","B"] array.sort() ["A","B","C"] -
元素反转reverse
["A","C","B"] array.reverse() ["B","C","A"] -
concat返回一个新的数组
["A","c","B"] array.concat([1,2,3]) ["A","C","B",1,2,3] -
join连接字符串
["C","B","A"] array.join('-') "C-B-A" -
多维数组
array=[[1,2],[3,4],[2,3]] array[1][0] 2
2.3、对象
JavaScript中的所有键都是字符串，值是任意对象
-
对象赋值
person.name="kongkong" -
使用不存在的对象属性，不会报错
person.name -
删除属性
delete person.name -
动态添加
person.oo="asdas" -
判断属性是否在对象中
'age' in person
2.4、流程控制
-
if判断
-
while和do while循环
-
for循环
-
forEach循环（遍历每一个元素）
var age=[12,3,463,124,4,11,123] age.forEach(function(value){ console.log(value) })
2.5、Map和Set
-
Map集
//对于过多的列表，每次取值的解决 //var names=["sa","asd","ads"] //var score=["12","41","123"] var map=new Map([['sa',12],['asd',41],['ads',123]]); var name=map.get('tom');//通过key获取value map.set('adin',123);//新增和修改 map.delect("tom");//删除 -
set：无需不重复的集合
set.add(2);//添加 set.delect(1);//删除 console.log(set.has(3));//是否包含
3、函数
-
函数定义
- function()函数
function num(){ }- 匿名函数
var a =funtion num(){ }//a()调用 -
作用域
- 局部
function b(){ var x=1; .... }- 全局
var x=1; function c(){ ..... }- 全局对象
var x='xxx'; alert(x); alert(window.x);- let关键字
function a(){ for(var i=0;i<100;i++){ console.log(i); } console.log(i+1);//可以发现i即使出了整个作用域也可以继续运行 }解决局部作用域冲突问题
function a(){ for(let i=0;i<100;i++){ console.log(i); } console.log(i+1);//Uncaught ReferenceError:i is not defined }- const常量
用const定义的常量是不能被改变的，只可以读取
const PI='3.14'; console.log(PI); PI='123';//TypeError
3.1、方法
-
定义方法
方法就是把函数放在对象里面，对象只有两个东西：属性和方法
var kong={ name='kong', bithrday:2000, //方法 age:function(){ var now=new Date().getFullYear(); return now-this.bithrday; } //属性 kong.name //方法 kong.age() }通过apply方式调用,控制this的指向
function getAge(){ var now=new Date().getFullYear(); return now-this.birth; } var kong={ name='kong', birth:2000, age:getAge } var bai={ name='kong', birth:2000, age:getAge } getAge.apply(kong,[]);//apply控制了this的指向，指向kong
3.2、日期
常用时间调用
var now=new Date();
now.getFullyear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全国统一的时间
console.log(new Date(1578106175991))//当前时间
now.toLocaleString()//当地时间字符串
now.toLocaleString()//当前时间标准格式
3.3、JSON
-
什么是json
- 简洁和清晰的层次结构使得JSON称为理想对象
- 易于人阅读和编写，同时也易于机器解析
-
任何js支持的类型，格式：
- 对象用{}
- 数组用[]
- 键值对key:value
-
JSON字符串和JS 对象的转化
var user={ name:"kong", age:3, sex:'男' } //对象转化为json字符串 var jsonUser=JSON.stringify(user); //json字符串转为对象 var obj=JSON.parse('{"name":"kong","age":"2"}')
4、面向对象编程
- 类：模板
- 对象：具体的实例
var user={
name:"kong",
age:3,
sex:'男'
}
var zhiye={
name:"员工"
};
//原型对象
zhiye.__proto__=user;
- class继承
//Es6的新特性
//定义一个学生类
class student{
constructor(name){
this.name=name;
}
hello(){
alert('hello')
}
}
class littleStudent extends student{
constructor(name,score){
this.name=name;
this.score=score;
}
speak(){
alert('小学生')
}
}
var xiaoming=new student("xiaoming");
var xiaohong=new student("xiaohong");
5、操作BOM对象（重点）
BOM：浏览器对象模型
- window 浏览器窗口
window.alert
ƒ alert() { [native code] }
window.alert(1)
undefined
window.innerHeight
787
window.innerWidth
167
- Navigator 封装浏览器信息
Navigator.length
0
Navigator.name
"Navigator"
Navigator.caller
null
- screen 屏幕尺寸
screen.width
1536
screen.height
864
- location 当前页面的URL信息
hash: ""
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/s?ie=UTF-8&wd=jkh&tn=88093251_22_hao_pg"
origin: "https://www.baidu.com"
pathname: "/s"
port: ""
protocol: "https:"
- cookie
document.cookie
- history 服务器的历史记录
history.back()//后退
history.forword()//前进
- document 获取文本
document.title()
6、操作DOM对象
-
核心
- 更新：更新Dom节点
- 遍历dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的节点
-
获得dom节点
var h1=document.getElementsByTagName('h1'); var p2=document.getElementById('p1'); var kk=document.getElementsByClassName('kk'); var father = document.getElementById('father'); var child=father.children;//获取所有father下的子节点 father.firstChild father.lastChild -
更新dom节点
<div id="id1"> </div> <script> var id1=document.getElementById('id') </script>操作文本
- id1.innerText=‘456’ 修改文本的值
- id1.innerHTML=‘
asa
’ 解析HTML
操作JS
id1.style.color='yellow'; id1.style.fontSize='20px'; id1.style.padding='2em' -
删除节点
删除多个节点的时候，children一直在变化，也就是说删除了一个节点，下一个节点会依次顶替上一个节点
<div id="father"> <h1>2</h1> <p id="p1">3</p> <p class="p2">4</p> </div> <script> var self=document.getElementById('p1'); var father=p1.parentElement; father.removeChild(self) //假设先删除了第一条语句执行第三条语句的时候它就会报错，因为在第一条语句执行完毕后，第三条语句的存放位置会相应发生改变 father.removeChild(father.children[0]) father.removeChild(father.children[1]) father.removeChild(father.children[2]) </script> -
创建节点
<script> var newP=document.createElement('p');//创建一个P节点 newP.id='newP'; newP.innerText='hellword'; //创建一个标签节点 var myscript=document.createElement('script'); myscript.setAttribute('type','text/javascript'); var mystyle=document.createElement('style'); myscript.setAttribute('type','text/css'); mystyle.innerHTML='body{backgroud-color:chartreuse;}'//设置标签内容 document。getElementByTagName('head')[0].appendChild(mystyle) </script> -
插入节点(insertBefore)
var ee=document.getElementById('ee'); var js=document.getElementById('js'); var list=document.getElementById('list'); //要包含的节点，insertBefore(newNode,targetNode) list.insertBefore(js,ee);
7、表单
- 文本框 text
- 下拉框
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- …
表单目的：提交信息
<form action="post">
<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="woman" id="girl">女
</p>
</form>
<script>
var text=document.getElementById('username');
var boy=document.getElementById('boy');
var girl=document.getElementById('girl');
//得到输入框的值
text.value
//修改输入框的值
text.value='123'
boy.checked;
girl.checked=true;
</script>
- md5加密
<form action="https://www.baidu.com/" method="post" onsubmit="return a()">
<p>
<span>用户名：</span>
<input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span>
<input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!--绑定事件onclick-->
<button type="submit">提交</button>
</form>
<script>
function a() {
alert(1);
var name=document.getElementById('username');
var pwd=document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value=md5(pwd.value);
return true;
}
</script>
8、jQuery
- 语法：$(selector).action()
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
//选择器就是css
$('#test-jquery').click(function () {
alert('hello,world')
})
</script>
- 选择器
$('p').click();
$('#id').click();
$('.class').click();
9、总结
1、重点是要多参考jquery中文文档学习
2、学好了可以去参考一下做一些小游戏
793
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
