1.什么是Javascript
-
Javascript是一门世界上最流行的脚本语言
-
一个合格的后端人员,必须要精通Javascript
2.快速入门
2.1引入Javascript
2.1.1内部标签
<!--script标签内,写Javascript--><script>alert('hello world');</script>
2.1.2外部引入
<!--外部引入--><script src="HelloWorld.js"></script>
2.2基本语法
<script>var num=1;alert(num); </script>
2.3数据类型
-
数值
-
字符串
-
布尔值
-
逻辑运算
-
比较运算符(这个和Java不太一样)
1.= 2.== 等于(类型不一样,值一样,也会判断为true) 3.=== 绝对等于(类型一样,值一样,才会判断为true,Javascript中推荐使用这个) 注意: 1.NaN===NaN,这个与所有的数值都不相等,包括自己 2.只能通过isNaN(NaN)来判断这个数是否是NaN
-
浮点数问题
-
null和undefined(这个和Java不太一样)
1.null 空 2.undefined 未定义
-
数组(Java的数组必须是相同类型的对象,Js中不需要这样,可以是不同类型的对象)
var arr=[1,2,3,'hello',null,true] //取数组下标:如果越界了,就会报undefined
-
对象(对象是大括号,数组是中括号)
每个属性之间使用逗号隔开,最后一个不需要添加
3.数据类型
3.1字符串
-
正常字符串使用单引号、双引号进行包裹
-
注意转义字符
1.\n 2.\t 3.\u4e2d \u#### Unicode字符 4.\x41 Ascll字符
-
多行字符串编写
//tab上面,Esc的下面var msg=`helloworld你好`
-
模板字符串
let name="sxc"; let age=22; let msg='${name}最帅'
-
字符串长度
str.length
-
字符串不可变
-
大小写转换
//这里是方法,不是属性 student.toUpperCase() student.toLowerCase()
-
查找字符串中字母所在位置
student.indexOF('u')
-
字符串的截取
student.substring()
3.2数组
Array可以包含任意的数据类型
var arr=[1,2,3,'hello',null,true]
-
长度
arr.length 注意:加入给arr.length赋值,数组大小会发生变化,如果赋值过小,元素就会丢失
-
下标索引
arr.indexOf()
-
slice():截取Array的一部分,返回一个新数组,类似于String中的substring
-
push和pop/unshift和shift
1.push:加入到尾部 2.pop:弹出尾部的一个元素 3.unshift:加入到头部 4.shift:弹出头部的一个元素
-
排序sort()
-
元素反转reverse()
-
concat()
注意:concat()并没有修改数组,只是会返回一个新的数组
-
连接符join:打印拼接数组,使用特定的字符串连接
-
多维数组
3.3对象
-
对象赋值
var person{name:sxc,age:22,score:100 }
-
使用一个不存在的对象不会报错(undefined)
-
动态的删减属性,通过delete删除对象的属性
-
动态的添加,直接给新的属性添加值即可
-
判断属性是否在这个对象中
'age' in person
-
判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('age') true
3.4流程控制
-
if判断
if(){}else if(){}else{}
-
while循环/do while循环
while(){} do{}while()
-
for循环
for(let i=0;i<100;i++){}
-
forEach循环
age.forEach(function(value))
-
for...in
//for(var index in object){for(var num in age){if(age.hasOwnProperty(num)){console.log("存在")console.log(age[num])}} }
3.5 Map和Set
Map:
var map=new Map([['tom',100],['jack',90],['Rose',80]]); var name=map.get('tom'); map.set('admin',123456);
Set:无序不重复的集合
set.add(2); set.delete(1); console.log(set.has(3));
3.6 Iterator
使用Iterator来遍历迭代Map,Set
-
遍历数组
//通过for of/for in 下标 var arr=[3,4,5] for (var x of arr){console.log(x) }
-
遍历map
var map=new Map([['tom',100],['jack',90],['Rose',80]]); for (var x of map){console.log(x) }
-
遍历set
var set=new set([5,6,7]) for (let x of set){console.log(x) }
4.函数
4.1定义函数
定义方式一
function abs(x){if(x>=0){return x;}else{return -x;} }
定义方式二
var abs=function(x){if(x>=0){return x;}else{return -x;} }
arguments参数:可以拿到传递进来的所有参数
var abs = function(x){console.log("x=>"+x); for (var i = 0; i<arguments.length; i++){console.log(arguments[i]);} if(x>=0){return x;}else{return -x;} }
rest:获取除了已经定义的参数之外的所有参数,rest参数必须放在最后面,用...标识
function aaa(a,b, ... rest) {console.log("a=>"+a);console.log("b=>"+b);console.log(rest); }
4.2变量的作用域
在JavaScript中,var定义变量实际是有作用域的
-
假设在函数体中声明,则在函数体外不可以使用
-
假设在JavaScript中函数查找变量从自身函数开始~,由“内”向“外”查找.假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。
-
养成规范:所有的变量定义都放在函数的头部,不要乱放,便于代码维护
局部作用域:用let去定义局部作用域的变量
function aaa(){for (let i=0;i<100;i++){comsole.log(i)}comsole.log(i+1); }
全局作用域:JavaScript实际只有一个全局作用域,任何变量(函数页可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,就会报错
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);
常量const
const PI=3.14; console.log(PI);
4.3方法
定义方法
方法就是把函数放在对象里面,对象只有两个东西:属性和方法
var sunshen = {name:'sxc’,bitrh: 2000,//方法age: function () {// 今年 - 出生的年var now = new Date().getFullYear();return now-this.bitrh;} } //属性 sunshen.name //方法,一定要带() sunshen.age ()
apply:在JS中可以控制this指向
function getAge() { // 今年 - 出生的年 var now = new Date().getFullYear(); return now-this.bitrh; } var sunshen = { name:'sxc', bitrh: 2000, age: getAge }; // sunshen. age() ok getAge.apply(sunshen,[]);// this,指向了 sunshen,参数为空
5.内部对象
5.1 Date
var now = new Date(); //Sat Jan 04 2020 10:47:06 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(1578106175991))//时间戳转为时间
转换
now = new Date(1578106175991) Sat Jan 04 2020 10:49:35 GMT+0800(中国标准时间) now.toLocalestring //注意,调用是一个方式,不是一个属性! f toLocalestring() { [native code] } now. toLocalestring() "2020/1/4 上午10:49:35" now. toGMTString() "Sat, 04 Jan 2020 02:49:35 GMT"
5.2 JSON
在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示;number,string ...
格式:
-
对象都用{}
-
数组都用[]
-
所有的键值对 都是用 key:value
JSON字符串和JS对象的转化
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script>var person={name:"sxc",age:"22",sex:"男"}//对象转化为json字符串 {"name":"sxc","age":"22","sex":"男"}var jsonperson=JSON.stringify(person); //json字符串转化为对象参数为json字符串var obj=JSON.parse('{"name":"sxc","age":"22","sex":"男"}'); </script> </body> </html>
JSON与JS对象的区别
var obj = {a: 'hello',b:'hellob'}; var json = '{"a": "hello","b":"hellob"}'
6.面向对象编程
class继承
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script>class Student{constructor(name) {this.name=name;} hello(){alert('hello')}} var sxc=new Student("sxc"); </script> </body> </html>
7.操作BOM对象(重点)
window:代表浏览器窗口
window.alert(1) undefined window. innerHeight 258 window. innerwidth 919 window.outerHeight 994 window. outerwidth 919
screen:代表屏幕尺寸
screen.width 1920px screen.height 1080px
location(重要):代表当前页面的URL信息
host:"www.baidu.com" href:"https://www.baidu.com/" protocol:"https:" reload:f reload() // 刷新网页 // 设置新的地址 location.assign('https://blog. kuangstudy.com/')
document:代表当前页面
document.title “百度一下,你就知道”
获取具体的文档树节点
<d1 id="app"> <dt>Java</dt> <dd>JavaSE</dd> <dd>JavaEE</dd> </d1> <script> var dl = document. getElementById('app'); </script>
获取cookie
document.cookie '_xsrf=2|8c7b1902|458eb5a7fa1c45676be1cfe9e19cb67e|1700048275'
history
history.back() //后退 history.forward()//前进
8.操作DOM对象(重点)
核心
浏览器的网页就是一个DOM的树形结构
-
更新:更新DOM节点
-
遍历dom节点:得到DOM节点
-
删除:删除一个DOM节点
-
添加:添加一个新的节点
要操作一个DOM节点,就必须要先获得这个DOM节点
获取DOM节点
//对应 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; //获取父节点下的所有子节点 // father.firstchild // father. lastchild
这是原生代码,之后尽量用jQuery()
更新节点
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="id1"> </div> <script>var id1=document.getElementById('id1') </script> </body> </html>
操作文本
-
id1. innerText='456' 修改文本的值
-
id1.innerHTML='sxc'
操作JS
id1.style.color = 'yellow'; id1.style.fontsize='20px'; id1.style.padding = '2em'
删除节点
删除节点步骤:先获取父节点,在通过父节点删除自己
<div id="father"><h1>标题一</h1><p id="p1">p1</p><p class="p2">p2</p> </div> <script>var self = document.getElementById('p1');var father = p1.parentElement;father.removechild(self) </script>
插入节点
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <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 list=document.getElementById('list');list.appendChild(js);//追加到后面 </script> </body> </html>
创建一个新的标签,实现插入
<script> var js = document.getElementById('js');//已经存在的节点 var list = document.getElementById('list'); //通过JS 创建一个新的节点 var newP = document.createElement('p');// 创建一个p标签 newP.id = 'newP'; newP. innerText = 'Hello, Kuangshen'; // 创建一个标签节点 var myscript = document.createElement('script'); myscript.setAttribute('type','text/javascript'); //可以创建一个Style标签 var myStyle= document.createElement('style');//创建了一个空style标签 myStyle.setAttribute('type', 'text/css'); myStyle.innerHTML='body{background-color: chartreuse;}';//设置标签内容 document.getElementsByTagName('head')[0].appendchild(mystyle) </script>
insert
var ee = document.getElementById('ee'); var js = document.getElementById('js'); var list = document.getElementById('list'); // 要包含的节点.insertBefore(newNode,targetNode) list.insertBefore(js,ee);
9.操作表单(验证)
获取要提交的信息
<form action="post"><p> <span>用户名 :< /span> <input type="text" id="username"> </p> <!-- 多选框的值,就是定义好的value -- ><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 input_text = document.getElementById('username');var boy_radio = document.getElementById('boy');var girl_radio = document.getElementById('girl'); // 得到输入框的值input_text.value// 修改输入框的值input_text. value = '123' // 对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值boy_radio.checked; //查看返回的结果,是否为true,如果为true,则被选中~girl_radio.checked = true; //赋值 </script>
提交表单
<!-- 表单绑定提交事件 οnsubmit= 绑定一个提交检测的函数,true, false 将这个结果返回给表单,使用 onsubmit 接收! οnsubmit="return aaa()" --> <form action="https://www.baidu.com/" method="post" οnsubmit="return I aaa ()"> <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 aaa() {alert(1);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>
10.jQuery
<! DOCTYPE html> <html lang="en"> <head> <meta charset=['UTF-8"> <title>Title</title> <!-- cdn引入 -- > <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script> </head> <body> </body> </htm1>
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--< script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script> -- > <script src="lib/jquery-3.4.1.js"></script> </head> <body> <a href="" id="test-jquery">点我</a> script> //选择器就是css的选贼器 $('#test-jquery'). click(function () { alert('hello, jQuery'); }) </script> </body> </html>
选择器
//原生js,选择器少,麻烦不好记 //标签 document.getElementsByTagName (); //id document.getElementById(); //类 document.getElementsByclassName (); //jQuery css 中的选择器它全部都能用! $('p').click();//标签选择器 $('#id1').click();//id选择器 $('.class1').click() //class选择器
文档工具站:jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
事件
<!-- 要求:获取鼠标当前的一个坐标 -- > mouse : <span id="mouseMove"></span> <div id="divMove"> 在这里移动鼠标试试 <div> script>//当网页元素加载完毕之后,响应事件$(function () {$('#divMove') .mousemove(function (e) {$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)})}); </script>
操作DOM
节点文本操作
$('#test-ul li[name=python]').text();//获得值 $('#test-ul li[name=python]').text('设置值’);//设置值 $('#test-ul').html();//获得值 $('#test-ul').html('<strong>123</strong>');//设置值
css的操作
$ ('#test-ul li [name=python]'). css("color", "red")
元素的显示和隐藏
$('#test-ul li [name=python]').show() $('#test-ul li [name=python]').hide()