JavaScript
1、JavaScript概述
**HTML:**网站的结构搭建 CSS:网页界面的美化 JavaScript:网页动态实现
前端框架: BootStrap、ElementUI、LayUi、VUE…
什么是JavaScript?
JavaScript是一门世界上流行的脚本语言。由网景公司(1997年)耗时10天完成开发!
一个合格的java开发者,必须精通JavaScript,因为JavaScript在实际工作中JavaScript可能比java代码写的还多
JavaScript 特点:语法格式不是很严格,遵循java语法格式,基本不会有问题!!!
2、JavaScript入门
**学习JavaScript必须学会使用浏览器控制台等进行调试 **
1、内部引入
<script>
alert("lihui");
</script>
2、内部引入(lh.jjs)
<!--外部引入-->
<script src="js/lh.js"> </script>
3、基本语法入门
<!--script标签内,写JavaScript代码 js代码位置不固定 行内引入-->
<script>
//1、定义变量 变量类型 变量名 变量值
var num = 1;
//条件控制
if (num > 0 && num <2){
alert("lihui");
}else if (num >2 && num <3){
alert("lihui");
}else {
alert("lihui");
}
console.log(num);//在浏览器控制台打印变量 相当于java中的输出
</script>
数据类型
数值、文本、视频、音频。
number:js不区分小数和整数。
123 //整数
123.1 //浮点数
1.2e3 //科学计数法
-9 //负数
NaN //not a number
Infinity //表示无限大
字符串:
'lihui' "lihui"
布尔值:
true false
逻辑运算:
&& || !
比较运算符:
=
== 等于(类型不一样、值一样、也会判断为true)
=== 绝对等于(类型一样、值一样、结果为true)
这是一个js弊端、尽量不要使用 ==
Math.abs//绝对值函数
null和undefined区别?
null:空 undefined:未定义
创建变量:es5用var es6用let
定义数组:
var arr = {...};
new Array(...);
数组下标越界:undefined
**对象:**对象是用大括号、数组使用中括号。
Person person = new Person(1,2,3);
var person = {
name:"lihui",
age:3,
tags:['js','java',[web],'...']
}
取对象的值:
person.name
>"lihui"
person.age
>3
严格检查模式(strict):
<!--
idea需要设置es6的语法。
'use strict':严格检查默认、预防JavaScript的随意性导致产生的一些问题。
局部变量都建议使用let 定义
必须写在JavaScript的第一行!
-->
字符串的使用
1、正常字符串使用''或者""包裹
2、需要注意转义字符 \
\'
\n
\t
\u4e2d \u#### Unicode字符
\x41 Ascall字符
多个字符串编写
使用:``符号
使用模板字符串
使用:`lihui,你好${}`
字符串长度
console.log(str.length)
字符串的可变性,不可变
大小写转换
//这里是方法、不是属性
student.toUpperCase()
student.toLowerCase()
student.indexOf(‘t’)
substring
student.subString(1) //从第一个到最后一个
student.subString(1,3)//[1,3)
数组
Array可以包含任意数据类型
var arr = [1,2,3]
长度
arr.length
注意:如果给arr.length赋值,数组大小就会发生变化。如果赋值过小,元素就会丢失。
indexOf:通过元素、获得下标索引
arr.indexof(2)
字符串的’1’和数字1颜色是不一样的。
slice():截取array的一部分,返回一个新数组,类似于String中的substring
push(),pop() 尾部
push:压入到尾部
pop:弹出尾部的一个元素
unshift(),shift()头部
unshift:压入到头部
shift:弹出头部的一个元素
排序 sort()
['a','b','c']
arr.sort()
['b','c','a']
元素反转reverse()
['A','B','C']
arr.reverse()
['C','B','A']
concat()
['A','B','C']
arr.concat()
['C','B','A','1','2','3']
注意:concat()并没有修改数组,只是会返回一个新的数组
连接符join
打印拼接数组,使用特定的字符串拼接
['C','B','A']
arr.join('-')
"C-B-A"
多维数组
arr = [[1,2],[2,3],["5","6"]]
arr[1][1]
1
数组:存储数据(如何存、如何取、都可以自己实现)
对象
由若干个键值对组成
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值,
属性名:属性值
}
js中的对象,{…}表示一个对象,键值对描述属性,xxxx.xxxx,多个属性直接使用逗号隔开,最后一个属性不加逗号。
1、对象赋值
person.name ="lihui"
person.age = 18
2、使用一个不存在的对象、不会报错!undefined
person.lihui
undefined
3、动态的删减属性、通过delete删除对象的属性
delete person.name
true
person
4、动态的添加。直接给新的属性添加值即可
person.lh ="lihui"
"lihui"
person
5、判断属性值是否在这个对象中! xxx in xxx !
'age' in person
true
//继承
'toString' in person
true
6、判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty("toString")
false
persion.hasOwnProperty("age")
true
流程控制
if判断
var num = 1;
//条件控制
if (num > 0 && num <2){
alert("lihui");
}else if (num >2 && num <3){
alert("lihui");
}else {
alert("lihui");
}
循环
while (num< 100){
age = age +1;
}
do{
age = age +1
}while (age<10)
for (let i = 0; i < 100; i++) {
alert(i)
}
//for in 相当于java的for
for (const arrayKey in array) {
alert("lihui")
}
Map 和 Set
ES6的新特性:
Map:
let map = new Map(['lihui',90],['hh',98])
var lihui = map.get('lihui');
map.set('qianying')
console.log(lihui)
Set:无序不重复的集合
var set = new Set([1,2,3]) //set可以去重
set.delete(1);
set.add(3);
consloe.log(set.has(3))
** iterator **
遍历数组:
var arr = [3,4,5]
for (var x of arr){
console.log(x)
}
遍历map
var map = new Map(['tom',90],['lihiui',89]);
for(let x of map){
console.log(x)
}
遍历set
var set = new Set([5,6,7]);
for(let x of set){
console.log(x)
}
函数
方法:对象(属性、方法)
函数:
定义函数
绝对值函数:
定义方式一:
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return 代表函数结束,返回结果!
如果没有执行return,函数执行完也会返回结果,结果就是undefined
定义方式二:
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function(x){…}这是一个匿名函数,但是这个可以把结果赋值给abs,通过abs就可以调用函数。
** 函数调用**
abs(10) //10
abs(-10)//10
参数问题:JavaScript可以传递任意个参数,也可以不传递参数~
参数进来是否存在的问题? 可以进行判断。假设不存在参数,可以规避。
arguments
arguments是一个js免费赠送的关键字,使用多余的参数,
代表,传递进来的所有参数,是一个数组。
rest
if(arguments.length>2){
for (let i = 0; i <10 ; i++) {
console.log()
}
}
变量的作用域
在JavaScript中,var定义变量实际是有作用域的。
function qj() {
var x = 1;
x = x+1;
}
x = x +2; //x is not defined
和java的基本一致!!!
全局函数
全局对象:window
alert()这个函数本身也是一个全局对象。
局部作用域:let
常量:const
ES5:只要用大写字母定义的变量就是常量(但是存在缺陷,这个常量可以改变)
ES6:引入了const关键字定义常量,只读变量。
方法
定义方法:
方法就是把函数放在对象里面,对象只要两个东西:属性和方法
var lihui ={
name:"lihui",
age:18,
//方法
bith:function (){
var now = new Date().getFullYear();
return now-this.age;
}
}
//属性
lihui.name
//方法,一定要带()
lihui.bith()
this.代表什么?不同的位置代表的不一样。
this是无法指向的,是默认指向调用他的那个对象!!!
apply
在js中可以控制this的指向。
getAge.apply(方法名、参数);
内部对象
标准对象:
Date
var now = new Date();
now.getFullYear();
now.getMonth();
now.getDate();
now.getDay();
...
JSON
json是什么?
在JavaScript中一切皆为对象,任何js支持的类型都可以用json来表示
格式:
- 对象都用{}
- 数组都用[]
- 所有的键值对都用key:value
对象转换为json
var user = {
name:"lihui",
age:8,
sex:"男"
}
var s = JSON.stringify(user);
var parse = JSON.parse("{'name':'lihui',{'age':18}");
JSON和JS对象的区别:
var obj = {a:'lihui',b:'hello'};
var json = '{"a":"hello","b":"hello"}'
Ajax
- 原生的js写法:xhr 异步请求
- jQuery 封装好的方法, $(“#name”).ajax(“”)
- axios请求
面向对象编程
什么是面向对象?
JavaScript和其他语言有所区别:
类:模板
对象:具体的实例
JavaScript中:
原型对象:
class继承:
//定义一个类
class student{
constructor(name){
this.name = name;
}
hello(){
alert("lh")
}
}
var lihui = new Student("")
var qianying = new Student("")
lihui.hello()
继承:
class xiaoxuesheng extends Student{
constructor(name,grade){
supper(name);
this.grade = grade;
}
}
原型链:
操作BOM对象(重点)
浏览器介绍:
JavaScript和浏览器的关系?
JavaScript诞生就是为了能够让代码能够在浏览器上面运行!!!
BOM:浏览器对象模型
- IE
- Chrome
- Safari
- FireForx
window(重要)
window代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
150
window.innerHeight
150
window.innerHeight
227
window.innerWidth
816
Navigator
navigator.platform
'Win32'
navigator.appVersion
'5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'
navigator.appName
'Netscape'
navigator对象一般不会使用,因为会被人为修改。
screen
screen.width
1280
screen.width
1280
location(重要)
host:"'chrome://new-tab-page/'"
href:href: "chrome://new-tab-page/"
protocol: "chrome:"
reload:f reload() //刷新网页
//设置新的地址
location.assign("https://www.baidu.com")
document
document.title
'新标签页'
获取具体的文档树节点
<dl id="app">
<dt>a</dt>
<dt>b</dt>
<dt>c</dt>
</dl>
<script>
var dl = document.getElementById('app');
</script>
获取cookie
document.cookie
''
劫持cookie原理
www.baidu.com
<script src="aaa.js"></script>
服务器端可以设置cookie:httpOnly
history
history.back
ƒ back() { [native code] }
history.forward
ƒ forward() { [native code] }
操作DOM对象(重点)
核心
浏览器网页就是一个Dom树形结构!
- 更新:更新Dom节点
- 遍历Dom节点:得到Dom节点
- 添加:添加一个新的Dom节点
要操作一个Dom节点、必须要先获得这个Dom节点。
Document:文档树。树的每一个节点就是一个Dom
获取Dom节点
<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 children = father.children;
father.firstChild
father.lastChild
</script>
原生代码:用jQuery代替。
更新节点
操作文本:
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
操作js:
id1.innerText="123"
"123"
id1.innerHTML='<strong>123</strong>'
"<strong>123</strong>"
id1.style.color ='red'
"red"
删除节点
删除节点的步骤:先获取父节点、在通过父节点删除本身节点。
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
father.removeChild(p1)
</script>
注意:删除多个节点的时候,children是在时刻变化的,删除的时候需要注意。
插入节点
获得某个Dom节点,这个节点如果为空,通过innerHtml就可以添加一个元素。如果Dom节点已经存在元素,我们就不能添加,这样会覆盖原来的操作。
<p id="lihui">javascript</p>
<div id="id1">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
</div>
<script>
let js = document.getElementById('lihui');
var list = document.getElementById('id1');
list.appendChild(js);
</script>
创建一个新的标签
<p id="lihui">javascript</p>
<div id="id1">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
</div>
<script>
let js = document.getElementById('lihui');
var list = document.getElementById('id1');
var lh = document.createElement('p');
lh.id='lihui';
lh.innerText='hello,lihui';
//创建一个新节点标签(通过这属性,可以设置任意属性的值)
var scriptElement = document.createElement('script');
scriptElement.setAttribute('type','text/javascript')
</script>
insert
inserBefore
xxx.insertBefore('新节点','旧节点');
操作表单(验证)
表单是什么 form DOM 树
- 文本框 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="nan" id="boy">男
<input type="radio" name="sex" value="nv" id="girl">女
</p>
</form>
<script>
let by = document.getElementById('userName');
var boy = document.getElementById('boy');
var girl = document.getElementById('girl');
//得到输入框的值
input_text.value
//修改输入框的值
input_text.value="123"
//对于单选框,多选框等等固定的值,boy.value只能获得当前的值
boy.checked = true;//查看放回的结果是否为true,如果为true,被选中
</script>
提交表单
<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>
<p> <span>性别:</span>
<input type="radio" name="sex" value="nan" id="boy">男
<input type="radio" name="sex" value="nv" id="girl">女
</p>
<!--<input type="submit">-->
<!--绑定事件、onclick 被点击-->
<button type="button" onclick="sub()">提交</button>
</form>
<script>
function sub(){
var username = document.getElementById('userName');
let pws = document.getElementById('password');
console.log(username.value);
console.log(pws.value);
pds.value="123";
return true;
}
</script>
jQuery
JavaScript和jQuery的关系;工具类
jQuery官网:
https://jquery.com/
cdnjQuery:
http://lib.sinaapp.com/
引入jQuery:
src="地址"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://lib.sinaapp.com/"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
$('#test-jquery').click(function (){
alert('lihui');
})
</script>
</body>
</html>
jQuery选择器
<script>
//标签选择器
document.getElementsByTagName();
//id选择器
document.getElementById();
//类选择器
document.getElementsByClassName();
//jQuery
$('p').click();//标签选择器
$('#de').click();//id选择器
$('.clas').click();//类选择器
//使用官网学习
</script>
事件
鼠标事件、键盘事件、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://lib.sinaapp.com/"></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').onmousemove(function (e){
$('#mouseMove').text('X:'+e.pageX+'Y:'+e.pageY)
})
});
</script>
</body>
</html>
jQuery操作Dom
<script>
$('#test-ul li[name=lh]').text();//获得值
$('#test-ul li[name=lh]').text('jalgj');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html(<a></a>);//设置值
</script>
元素的显示与隐藏:
本质:display:none
$.ajax({
......
})