JavaScript
JavaScript是一门世界上最流行的脚本语言
Java、JavaScript 没有任何关系，当初为了热门，所以在Script前面加上Java~~
10天~
一个合格的程序员，必须要精通JavaScript
2、快速入门
2.1、引入JavaScript
-
内部标签
<script>
//.......
</script>
-
外部引入
abs.js
//....
test.html
<script src="abc.js"></script>
2.1、基本语法入门
<script>
//1. 定义变量 变量类型 变量名 = 变量值;
var score=71;
//alert(num);
//2.条件控制
if (score>60 && score<70){
alert("60-70")
}else if (score>70 && score<80){
alert("70-80")
}else {
alert("other")
}
//console.log(score) 在浏览器的控制台打印变量！ System.out.println();
/*
* aasdadasad
* */
</script>
浏览器调试必备须知：
2.3、数据类型
数值，文本，图形，音频，视频.....
变量
跟Java一样
var _$
var 王者荣耀="倔强青铜"
number
123 //整数123
123.1 // 浮点数123.1
1.123e3 // 科学计数法
-99 //负数
NaN // not a number
Infinity //表示无限大
字符串
'abc' "abc"
'/n'
布尔值
true, false
逻辑运算
&& 两个都为真，结果为真
|| 一个为真，结果为真
！ 真即假，假即真
比较运算符
=
1 "1"
== 等于(类型不一样，值一样，也会判断为true)
=== 绝对等于(类型一样，值一样)
这是一个js的缺陷，坚持不要使用==比较
须知 :
-
NaN===NaN,这个与所有的数值都不相等，包括自己
-
只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题：
console.log((1/3)===(1-2/3))
尽量避免使用浮点数进行运算，存在精度问题！
console.log(Math.abs(1/3-(1-2/3))<0.0000000001)
null 和 undefined
-
null 空
-
undefined 未定义
数组
Java的数组必须是相同类型的对象 ~ js中不需要这样！
var arr=[1,2,3,4,5,'hello',null,true]
取数组下标：如果越界了，就会
undefined
对象
对象是大括号，数组中用中括号~~
每个属性之间使用逗号隔开，最后一个就不需要添加
//Person person =new Person(1,2,3,4)
var person={
name:"qinjiang",
age:3,
tags:["js",'java','web','...']
}
person.name
>"qinjiang"
person.age
>3
person.tags
>(4) ["js", "java", "web", "..."]0: "js"1: "java"2: "web"3: "..."length: 4[[Prototype]]: Array(0)
2.4、严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA 需要设置支持es6语法
"use strict" 严格检查模式，预防JavaScript的随意性导致产生一些问题
必须写在第一行
局部变量建议都是用let定义~
-->
<script>
"use strict";
//全局变量
let i=1;
//ES6 let
</script>
</head>
<body>
</body>
</html>
3、数据类型
3.1、字符串
1、正常字符串我们使用 单引号 ，或者双引号包裹
2、注意转义字符 \
\'
\n 换行
\t table
\u4e2d 中 \u#### Unicode字符
\x41 Ascll字符
3、多行字符串编写
//tab 上面 esc键下面
let msg=`
hello
world
你好呀
你好
4、模板字符串
<script>
"use strict";
let name="qinjiang";
let age=3;
let msg=`你好呀 ${name}${age}`
console.log(msg)
</script>
5、字符串长度
str.length
6、字符串的可变性，不可变
7、大小写转换
// 注意，这里是方法，不是属性了
student.toUpperCase()//大写
student.toLowerCase()//小写
8、student.indexOf("t")
9、substring
[)
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[]
3.3、对象
var xiaoming={
xiaoming: '小明'，
age : 3
}
3.2、数组
Array可以包含任意的数据类型
var arr=[1,2,3,4,5,6]
1、长度
arr.length
注意 ：加入 arr.length 赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
2、indexOf，通过元素获得下标索引
arr.indexOf(2)
>1
字符串的“1”和数字1是不同的
3、slice（）截取Array的一部分，返回一个新数组，类似于String中的subString
4、push（）在尾部添加一个数组，pop（弹出后面一个数组）
3.4、流程控制
forEach 循环
5.1 引入
//函数，Java中的方法
age.forEach(function (value) {
console.log(value);
})
3.5、Map 和 Set
ES6 新特性
Map：
//ES6
//学生的成绩，学生的名字
// var names=["tom","jack","haha"];
// var score=[100,99,98];
var map=new Map([['tom',100],['jack',99],['haha',80]]);
var name=map.get("tom");//通过key获得value
map.set('admin',123456)//新增或修改
map.delete("tom");//删除
Set: 无序不重复的集合
var set=new Set([3,1,1,1]);//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 (let x of arr) {
console.log(x);
}
遍历map
var map=new Map([["tom",100],["jack",90],["haha",80]]);
for (let 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、函数的定义
定义方式一
functiom abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
定义方式二
var abs=function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function(x){...} 这是一个匿名函数，但是可以把结果赋值给abs，也可以通过abs就可以调用函数
调用函数
abs(10)//10
abs(-10)//10
参数问题：JavaScript 可以传递任意个参数，也可以不传递参数 不报错！！！
解决：抛出异常
var abs=function (x) {
//手动抛出异常
if (typeof x!=='number'){
throw 'not of number';
}
if (x>=0){
return x;
}else {
return -x;
}
}
arguments
arguments JavaScript免费赠送的关键字：
代表，传递进来的所有参数，看成一个数组！
var abs=function (x) {
//
console.log("x=>"+x);
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if (arguments.length>1){
console.log([1])
}
//
if (x>=0){
return x;
}else {
return -x;
}
}
rest
正常：
if(arguments.length>2){
for(var i=2;i<arguments.lenth;i++){
//........
}
}
Es6: 引入rest新特性，获取除了已经定义的参数以外的所有参数~
function aaa(a,b,...rest){
console.log("a=>"a);
console.log("b=>"b);
console.log(rest);//
}
rest 只能写在最后面，必须用...标识
4.2、变量的作用域
说白了，所有变量只能在内部生效，内部可以访问外部，外部不能访问内部；
在JavaScript中，var变量实际有作用域的。
假设在函数体中声明，则在函数体外不可以使用 ~（非要使用，可以研究一下闭包）
function yq() {
var x=1;
x=x+1;
}
x=x+2;//Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名，只要在各自函数内部，就不冲突
function yq() {
var x=1;
x=x+1;
}
function yq2() {
var x="a";
x=x+1;
}
内部函数可以访问外部函数的成员，反之不可以
"use strict";
function yq() {
var x=1;
//内部函数可以访问外部函数的成员，反之不可以
function yq2() {
var y=x+1; //2
}
var z=y+1;// Uncaught ReferenceError: z is not defined
}
假设，内部函数变量和外部函数的变量，重名！
function yq() {
var x=1;
function yq2() {
var x="a";
console.log(x);
}
console.log(x);
yq2();
}
yq();
在JavaScript中 函数查找变量从自身函数开始~由“内”向 ”外“查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量
提升变量的作用域
function yq() {
var x="x"+y;
console.log(x);
var y='y';
}
结果： xundefined
说明：JavaScript执行引擎，自动提升y的声明，但是不会提升y的赋值；
全局函数
//全局变量
var x=1;
function f() {
console.log(x);
}
f();
console.log(x);
这里kuang说尽量不要用严格检查模式 ’use strict‘
全局对象 window
规范
由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件中，使用了相同的全局变量，冲突—>减少冲突？
//唯一全局变量
var KuangApp={};
KuangApp.name='kuangshen';
KuangApp.add=function (a,b) {
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~
JQuery
局部作用域 let
function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//问题：出了这个作用域还可以使用
}
ES6 let 关键字，解决局部作用域冲突问题！
function aaa() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//Uncaught ReferenceError: i is not defined
}
建议大家都使用 let 去定义局部作用域的变量
常量 const
在ES6之前，怎么定义常量；只有用全部大写字母命名的变量就是常量；建议不要修改这样的值
var PI=3.14;
console.log(PI);
PI=314;//可以改变这个值
console.log(PI);
在ES6引入了常量关键字 const
const PI='123';//只读变量
console.log(PI);
PI='123';
4.3、方法
方法
方法就是把函数放在对象的里面，对象只有两个东西，属性和方法
var huolong={
name:"yiqian",
birth:2000,
//方法
age:function () {
//今年-出生的年
var now=new Date().getFullYear();
return now-this.birth;
}
}
//属性
huolong.name
//方法
huolong.age();
this代表什么，拆开上面代码看看~
function getAge() {
//今年-出生的年
var now=new Date().getFullYear();
return now-this.birth;
}
var huolong={
name:"yiqian",
birth:2000,
//方法
age:getAge
}
//huolong.age() ok
// getAge() NaN window
apply
在js中可以控制this指向！
function getAge(){
//今年-出生的年
var now =new Date().getFullYear();
return now -this.bitrh;
}
var huolong ={
name: 'yiqian',
bitrh: 2000,
age: getAge
}
getAge.apply(huolong,[]);//this 指向了huolong，参数为空
// 输出结果
// getAge.apply(huolong,[])
// 22
// huolong.age()
// 22
5、内部对象
5.1、Date
8、操作DOM对象（重点）
核心
浏览器网页就是一个DOM树形结构！
-
更新：更新Dom节点
-
遍历dom节点：得到dom节点
-
删除：删除一个dom节点
-
添加：添加一个新的节点
要操作一个dom节点，就必须先获得这个dom节点
遍历 两种方法 ： 一个一个遍历 or 通过父节点 . children[index]
var div=document.getElementById('father1')
var h1=document.getElementsByClassName('father')
var p1=document.getElementById('p1')
var children=div.children[index];//获取父节点下的所有子节点
div.firstChild//
div.lastChild//
p1.lastChild//上一个
p1.nextSibling//相邻
这是原生的代码，之后我们尽量使用JQuery（）
更新
<div id="id1"></div>
<script>
var id1=document.getElementById('id1');
</script>
操作文本
-
id1.innerText='456' 修改文本的值
-
id1.innerHTML='<strong > 123 < /strong >' 可以解析HTML文本标签
操作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)//
//方法2 删除是一个动态的过程
father.removeChild(father.children[0])
</script>
注意：插入多个节点的时候，children 是在时刻变化的额，删除节点的时候一定要注意！
插入节点
我们获得了某个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 list=document.getElementById('list');
list.appendChild(js);//追加到后面
</script>
效果：
创建一个新的标签，实现插入
<script>
var js=document.getElementById('js');
var list=document.getElementById('list');
//通过js创建一个新的节点
var newP=document.createElement('p');//创建一个p标签
newP.id='newP';//id 有才能设置
newP.innerText='Hello,huolong';
list.appendChild(newP);
//list.appendChild(js);//追加到后面
//假设没有这个属性，也可以设置这样
//创建一个标签节点
//万能写法
var myScript=document.createElement('script');
myScript.setAttribute('type','text/javascript');
//可以创建一个Style标签
var myScript=document.createElement('style');//创建了一个空的style标签
myScript.setAttribute('type','text/css');
myScript.innerHTML='body{//设置标签的内容
document.getElementsByTagName('head')[0].appendChild(myScript)
</script>
insert
var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
//要包含的节点(keyi理解为父节点).insertBefore(newNode,targetNode) //-->意思是将这个节点放到targetNode的前面
list.insertBefore(js,ee);
9、操作表单
表单 除了 form input以外， 本身也是 dom节点树
-
文本框 text
-
下拉框 <select> <option>
-
单选框 radio
-
多选框 checkbox
-
隐藏域 hidden
-
密码框 password
-
.......
表单的目的：
获得要提交的信息
<form action="post">
<span>用户名: </span><input type="text" id="username">
<p>
<span>
性别：
</span>
<input type="radio" name="sex" value="boy" id="boy"> 男
<input type="radio" name="sex" value="girl" 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='123';
//对于单选框，多选框固定的值（只要用select的）, boy_radio.value只能取到当前的值
boy_radio.checked;//查看返回结果是否为true，如果为true，则被选中~
girl_radio.checked=true; //赋值
</script>
提交表单 md5加密密码，表单优化
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单提交绑定事件-->
<!--onsubmit= 绑定一个提交检测的函数，ture，false
将这个结果返回给表单，使用onsubmit 接受！
-->
<form action="https://www.baidu.com" method="post" onsubmit=" return aaa()"> <!--固定的 onsubmit ="return+函数"-->
<p>
<span>用户名：</span><input type="text" id="username" required name="username">
</p>
<p>
<span>密码：</span><input type="text" id="password" name="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!--绑定事件 onlick 被点击-->
<button type="button">提交</button> <!-- onclick="aaa()"-->
</form>
<script>
function aaa() {
alert(1)
var uname= document.getElementById('username');
//隐藏域提交//
var pwd= document.getElementById('password');
var md5pwd= document.getElementById('md5-password');
//pwd.value=md5(pwd.value);111,校园网密码框 *变长
md5pwd.value=md5(pwd.value);
//可以校验表单内容，ture就是通过提交，false，阻止提交
//验证通过就 true，不通过就false
return true;
}
</script>
</body>
10、JQuery
JavaScript 和 JQuery关系 ：
JQuery库，里面存在大量的JavaScript函数
获取JQuery
方法一：上网搜索 “cdn jquery'',随便获取一个< script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></ script>
方法二：官网https://jquery.com/download/但是我下载不了，呜呜~来自2022年12月18日
封装大量类库，公式（谨记）：
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引入-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<a href="" id="text-jquery">点我</a>
<script>
//选择器就是css的选择器
$('#text-jquery').click(function () {
alert('hello,jQuery');
})
</script>
选择器
<script>
//原生js，选择器少，麻烦不好记
//标签选择器
document.getElementsByTagName();
//id选择器
document.getElementById();
//类
document.getElementsByClassName();
//jquery css中的选择器它全部都能用
$('p').click();//标签选择器
$('#di1').click(); //标签选择器
$('.class1').click(); //标签选择器
</script>
文档工具栈：https://jquery.cuishifeng.cn/
事件 action
鼠标事件，键盘事件，其他时间，陀螺仪...
事件
操作DOM
节点文本操作
$('#test-ul li[name=python]' ).text(); //获得值
$('#test-ul li[name=python]' ).text(''); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html(''); //设置值
css操作
$('#test-ul li[name=python]' ).css("color","red")
元素的显示和隐藏 : 本质 display ：none；
$('#test-ul li[name=python]' ).show();
$('#test-ul li[name=python]' ).hide();
娱乐测试
$(document).width();
$(document).height();
$('#test-ul li[name=python]' ).toggle();//隐藏可以显示，显示可以隐藏
