JavaScript
1 JS概述
# 什么是JavaScript
世界上最流行的一门脚本语言
# 作用
可以使静态网页具备动态的效果,虽然css最新版拥有动画的功能,可是实现过程和样式远没有js简单且多样
设置idea的js语言版本为es6
2 导入js的两种方式
2.1 内部标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js导入方式</title>
<!--内部标签 -->
<script>
// 弹窗
alert("Hello World!");
// 打印信息到控制台
console.log(1);
</script>
</head>
<body>
</body>
</html>
2.2 外部导入
- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js导入方式</title>
<!--外部引入 -->
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
</body>
</html>
- js代码
// 弹窗
alert("Hello World!");
3 变量
3.1 降低全局变量绑定window
// 唯一全局变量
var YTC = {};
// 定义全局变量
YTC.name = "ytc";
YTC.add = function(a,b){
return a+b;
}
3.2 常量
const PI = '3.14';
console.log(PI);
4 数据类型
4.1 Number
123 // 整数123
123.1 // 浮点数123.1
1.123e3 // 科学计数法
-99 // 负数
NaN // not a number
Infinity // 表示无限大
4.2 字符串
'abc'
"abc"
4.3 布尔值
true
false
4.4 null和undefined
- null 定义未初始化
- undefined 未定义
4.5 数组
// 建议使用[]定义
var arr = [0,3,2,null,true];
arr = new Array(1,3,4,null);
4.6 对象
/ 对象
var person = {
name: "ytc",
age: 22,
tags: [1,3,null]
}
4.7 精度丢失
Math.abs(1/3-(1-2/3))<0.00000001
5 数据类型详解
5.1 字符串
- 字符串可被单引号或双引号包裹
- 特殊字符需转义
\'
\"
\n
\r
\t
\u4e2d // Unicode编码
\x41 // AscII编码
- 模板字符串(es6新特性)
'use strict';
let name = "ytc";
// 下面这个不是单引号,是反引号,在tab键上面
let msg = `name,${name}`;
console.log(msg);
- 常用方法(和java一样)
let str = "ytc";
// 字符串长度(JAVA需加小括号)
str.length;
// 转大小写
str.toUpperCase();
str.toLowerCase();
// 根据下标获取指定字符
str.charAt(0);
// 根据指定字符或字符串获取对应下标
str.indexOf('y');
// 字符串剪切
str.substring(0,3);
5.2 数组
let arr = [1,2,3,4,"1","2"];
// 长度可直接改变(JAVA需调扩容方法)
arr.length = 8;
// 通过指定元素获取对应下标
arr.indexOf("1");
// 数组的截取
arr.slice(0,3);
// 数组尾部的压入和弹出
arr.push("a","b");
arr.pop();
// 数组头部的压入和弹出
arr.unshift("a","b");
arr.shift();
// 排序(JAVA中通过类名调用,这里直接变量名调用)
arr.sort();
// 反转
arr.reverse();
// 拼接(返回一个新数组,原数组不改变)
arr.concat([1,2,3]);
// 打印拼接成字符串,原数组不改变
arr.join("-");
5.3 对象
// 声明一个对象,有三个属性
let person = {
name: "ytc",
age: 22,
score: 0
}
// 属性获取
person.name;
person["age"];
// 动态删除属性
delete person.name;
// 动态添加属性
person.haha = "haha";
// 判断属性是否在对象中
"toString" in person;
// 判断属性是否是这个对象自身拥有的,而不是Object的
person.hasOwnProperty("age");
6 严格检查语法
/*
* 'use strict' - 严格检查模式,建议每次加在第一行(IDEA必须设置es6)
* let - 局部变量的声明,以后由它取代var
* */
'use strict';
let i = 3;
7 运算符
7.1 逻辑运算符
&&
||
!
7.2 比较运算符
=
== // 等于,类型不一样,值一样,判断为true
=== // 绝对等于,只有类型和值都一样才会判断为true
isNaN(NaN) // NaN只能如此比较
8 流程控制
8.1 if
let age = 3;
if(age > 2){
console.log(`age:${age}`);
}
8.2 while
let age = 3;
while(age < 100){
age = age + 1;
console.log(`age:${age}`);
}
8.3 do-while
let age = 3;
do{
age = age + 1;
console.log(`age:${age}`);
}while(age < 100);
8.4 for
let arr = [1,3,2];
for(var i=0;i<arr.length;i++){
console.log(`${i}:${arr[i]}`)
}
// for...in
for(let num in arr){
console.log(`${num}:${arr[num]}`);
}
// for...of(es6新特性)
for(let num of arr){
console.log(`${num}`);
}
8.5 forEach
let arr = [1,3,2];
arr.forEach(function (value) {
console.log(value);
});
9 函数
9.1 函数的声明
方式一
// 符合JAVA的调用模式
function abs(x){
if(x >= 0){
return x;
}else{
return -x;
}
}
console.log(abs(-10));
方式二
// 值对象,将一个匿名函数赋值给一个变量
var abs = function(x){
if(x >= 0){
return x;
}else{
return -x;
}
}
9.2 异常的抛出
'use strict';
function abs(x){
// 不传参
if(typeof x !== 'number'){
throw 'not a number';
}
if(x >= 0){
return x;
}else{
return -x;
}
}
console.log(abs(-10));
9.3 多余参数的处理
原方式
'use strict';
function abs(a,b){
if(arguments.length > 2){
for(let i=2;i<arguments.length;i++){
console.log(arguments[i]);
}
}
}
abs(12,34,78,21);
es6新方式
'use strict';
function abs(a,b,...rest){
console.log(rest);
}
abs(12,34,78,21);
10 Map和Set集合(es6新特性)
10.1 Map集合
'use strict';
let map = new Map([["tom",80],["jack",90],["sala",70]]);
// map集合追加元素,key值一样会覆盖
map.set("sala",60);
// map集合根据key值获取value值
console.log(map.get("jack"));
// 根据key值删除该元素
map.delete("sala");
10.2 Set集合
'use strict';
let set = new Set([1,3,5,1]);
// set集合追加元素
set.add(6);
// set删除元素
set.delete(5);
// set集合是否包含某元素
console.log(set.has(3));
11 内部对象
11.1 Date
'use strict';
// 当前时间
let date = new Date();
// 年
date.getFullYear();
// 月 0-11
date.getMonth();
// 日
date.getDate();
// 星期
date.getDay();
// 时
date.getHours();
// 分
date.getMinutes();
// 秒
date.getSeconds();
// 时间戳
date.getTime();
// 时间戳转时间
let date2 = new Date(date.getTime());
// 时间格式转换
date.toLocaleString();
date.toGMTString();
11.2 Json
# 什么是json?
一种轻量级的数据交换格式
'use strict';
var user = {
name: "ytc",
age: 23,
sex: "man"
}
// 将对象转换成json
var json = JSON.stringify(user);
// 将json转化成字符串
var obj = JSON.parse('{"name":"ytc","age":23,"sex":"man"}');
12 面向对象编程
12.1 面向对象原型编程
'use strict';
var Student = {
name: 'student',
age: 3,
run: function(){
console.log(this.name+'在跑...');
}
}
var xiaoming = {
name: 'xiaoming'
}
// 把xiaoming原型指向Student
xiaoming.__proto__ = Student;
12.2 面向对象class编程(es6新特性)
'use strict';
class Person{
constructor(name) {
this.name = name;
}
sayHi(){
console.log(`${this.name}说Hi...`);
}
}
class Student extends Person{
constructor(name,gride) {
super(name);
this.gride = gride;
}
myGride(){
console.log(`${this.name}=${this.gride}`);
}
}
var xiaoming = new Person("xiaoming");
var xiaohong = new Student("xiaohong",34);
13 操作BOM对象
13.1 window 浏览器窗口
window.alert(1)
window.console.log(1)
1
window.innerHeight
722
window.innerWidth
483
window.outerHeight
824
window.outerWidth
1536
13.2 navigator 浏览器信息
// 浏览器名称
navigator.appName
"Netscape"
// 浏览器版本
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
// 用户信息
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
// 系统
navigator.platform
"Win32"
13.3 screen 计算机屏幕信息
screen.height
864
screen.width
1536
13.4 location 当前页面的url信息
// 主机
host: "www.baidu.com"
// 地址
href: "https://www.baidu.com/"
// 协议版本号
protocol: "https:"
// 刷新页面
reload()
// 加载其他地址
assign(https:www.baidu.com)
13.5 document 当前页面文档树
document.title
"百度一下,你就知道"
document.cookie
"BIDUPSID=8243ED3EBC085623B4C66CF515638326; PSTM=1610281591; BAIDUID=8243ED3EBC085623A43A1803065E0EB7:FG=1; BD_UPN=12314753; ispeed_lsm=2; BAIDUID_BFESS=45EE1FABAE46D4F8CD63204810CF8269:FG=1; Hm_lvt_aec699bb6442ba076c8981c6dc490771=1611395736,1611553964,1611555756,1613125235; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; COOKIE_SESSION=202139_6_6_8_8_24_0_0_6_4_0_6_612806_202107_9_3_1613232367_1613232361_1613232358%7C9%23202139_76_1613232358%7C9; BD_HOME=1; H_PS_PSSID=33425_33441_33344_31253_33600_33318_33268; BDRCVFR[feWj1Vr5u3D]=I67x6TjHwwYf0; delPer=0; BD_CK_SAM=1; PSINO=6; BA_HECTOR=2k8ha4a58ha485819u1g2idja0q"
获取文档树节点
<dl id="java">
<dt>java</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
</dl>
<script>
'use strict';
let java = document.getElementById('java');
</script>
13.6 history 历史记录
// 后退
history.back()
// 前进
history.forward()
14 操作DOM对象
14.1 获取dom节点
'use strict';
// 根据标签名获取节点
var h1 = document.getElementsByTagName('h1');
// 根据id获取节点
var p1 = document.getElementById('p1');
// 根据class获取节点
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
// 根据父节点获取所有子节点
var children = father.children;
// 根据父节点获取第一个孩子
var firstChild = father.firstChild;
// 根据父节点获取最后一个孩子
var lastChild = father.lastChild;
14.2 更新dom节点
'use strict';
var div = document.getElementById('d');
// 修改内部内容
div.innerText = 'ytc';
// 修改内部标签
div.innerHTML = '<b>abc</b>';
// 修改内部样式
div.style.background = 'skyblue';
div.style.width = '100px';
div.style.height = '50px';
div.style.fontSize = '16px';
div.style.color = 'pink';
div.style.textAlign = 'center';
div.style.lineHeight = '50px';
14.3 删除节点
<div>
<p id="self">p1</p>
</div>
<script>
'use strict';
// 根据父节点删除自己
var self = document.getElementById('self')
var father = self.parentElement;
father.removeChild(self);
</script>
14.4 插入节点
<p id="js">js</p>
<div id="father">
<p id="java">java</p>
<p id="html">html</p>
</div>
<script>
// 在父节点中追加已存在节点
var js = document.getElementById('js');
var father = document.getElementById('father');
father.appendChild(js);
// 在父节点中追加新节点
var css = document.createElement('css');
css.setAttribute('id','css');
css.innerText = 'css';
father.appendChild(css);
// 节点插入
father.insertBefore(css,document.getElementById('html'));
</script>
15 操作表单
15.1 获取和设置表单的值
<form action="#" method="post">
<span>用户名:</span><input type="text" name="username"><br/>
<input type="radio" name="sex" value="boy"><span>男</span>
<input type="radio" name="sex" value="girl"><span>女</span>
</form>
<script>
'use strict';
// 操作表单数据
var username = document.getElementsByTagName('input')[0];
username.setAttribute('value','ytc');
var girl = document.getElementsByTagName('input')[2];
girl.setAttribute('checked','checked');
</script>
15.2 表单密码验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script type="text/javascript" src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https://www.baidu.com" method="post" onsubmit="return checkUp()">
<span>用户名:</span><input type="text" name="username"><br/>
<span>密码:</span><input type="password" name="pwd"><br/>
<input type="hidden" name="md5Pwd">
<input type="submit">
</form>
<script>
'use strict';
function checkUp(){
var pwd = document.getElementsByTagName('input')[1];
var md5Pwd = document.getElementsByTagName('input')[2];
md5Pwd.value = md5(pwd.getAttribute('value'));
pwd.value = '******';
return true;
}
</script>
</body>
</html>
16 jQuery
16.1 jQuery导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!--
jQuery 导入
1 https://www.jQuery.com
下载开发版(未压缩)和生产版(压缩)
2 引入官方文件
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
3 文档工具 http://jquery.cuishifeng.cn/
-->
<script src="lib/jquery-3.4.1.min.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我试试</a>
<script>
/*$(selector).action(); */
$('#test-jquery').click(function () {
alert('试试就试试');
});
</script>
</body>
</html>
16.2 jQuery选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
<script src="lib/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
<script>
// 标签名选择器
$('h1').text('标题二');
// id选择器
$('#p1').text('myp1');
// 类选择器
$('.p2').text('myp2');
// 层级选择器
$('body h1').text('标题三');
// 结构伪类选择器
$('p:nth-of-type(1)').text('mymyp1');
// 属性选择器
$('p[class=p2]').text('mymyp2');
</script>
</body>
</html>
16.3 jQuery事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery事件</title>
<script src="lib/jquery-3.4.1.min.js"></script>
<style>
body{
font-size: 16px;
}
#div{
width: 200px;
height: 200px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<span id="span">mouse: x 0px y 0px</span>
<div id="div"></div>
<script>
// 页面加载完成时执行复杂代码
// $(document).ready(function(){});
// 页面加载完成时执行
$(function () {
// 鼠标移动,其他绑定事件可查文档工具
$('#div').mousemove(function (e) {
$('#span').text(`mouse: x ${e.pageX}px y ${e.pageY}px`);
});
});
</script>
</body>
</html>
16.4 jQuery操作dom节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery操作dom节点</title>
<script src="lib/jquery-3.4.1.min.js"></script>
</head>
<body>
<span id="span">jQuery</span>
<script>
// 文本
$('#span').text('jquery');
// html
$('#span').html('<b>jquery</b>');
// css
$('#span').css('color','red');
$('#span').css({'color': 'lightgray', 'font-size': '16px'});
// 隐藏显示
$('#span').hide();
$('#span').show();
</script>
</body>
</html>