文章目录
JavaScript
1.什么是JavaScript
1.1 概述
JavaScript是一门世界上最流行的脚本语言
Java、JavaScript
10天开发出的
一个合格的后端人员，必须要精通JavaScript
1.2 历史
ECMAScript可以理解为是JavaScript的一个标准
最新版本已经更新到es6版本
但大部分浏览器还只停留在支持es5代码上！
开发环境—线上环境，版本不一致
关键字、变量、流程控制、对象、数组、结构
2.快速入门
2.1 引入JavaScript
1、内部标签
2、外部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部标签-->
<script>
alert("hello world");
</script>
<!--外部引入-->
<script src="test.js"></script>
<!--不用显示定义type，也默认就是javaScript-->
<script type="text/javascript"></script>
</head>
<body>
<!--这里也可以存放-->
</body>
</html>
2.2 基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JavaScript严格区分大小写-->
<script>
// 定义变量 ： 变量类型 变量名 = 变量的值
var score = 89;
// alert(score);
//2.条件控制
if (score <= 100 && score >= 90){
alert("A");
}else if (score < 90 && score >= 80){
alert("B");
}else if (score < 80 && score >= 70){
alert("C");
}else if (score < 70 && score >= 60){
alert("D");
}else if (score < 60 && score >= 0){
alert("不及格");
}
</script>
</head>
<body>
</body>
</html>
浏览器必备调试须知：
2.3 数据类型
数值，文本，图形，音频，视频
变量
var a
number
js不区分小树和整数，Number
123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN //not a number
Infinity // 表示无限大
字符串
‘abc’ “abc”
布尔值
true，false
逻辑运算
&& 两个都为真，结果为真
|| 一个为真，结果为真
! 真即假，假即真
比较运算符 ！！！重要！
=
1，"1"
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）
这是一个JS的缺陷，坚持不要使用 == 比较
须知：
- NaN === NaN，这个与所有的数值都不相等，包括自己
- 只能通过isNaN（NaN）来判断这个数是否是NaN
浮点数问题
console.log((1/3) === (1-2/3))
尽量避免使用浮点数进行运算，存在精度问题！
Math.abs(1/3-(1-2/3))<0.00000001
null 和 undefined
- null 空
- undefined 未定义
数组
Java的数组必须是相同类型的对象~，JS中不需要这样
<script>
//第一种定义方式，推荐
var arr = [1,2,3,"hello",null,true];
//第二种定义方式
var array = new array(1,2,3,"hello",null,true);
</script>
取数字下标：如果越界了，就会 报undefined
undefined
对象
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个属性不需要逗号
<script>
var person = {
name: "tom",
age: 18,
tags:["java","js","web"]
}
</script>
取对象值
person.name
> "tom"
person.age
> 18
2.4 严格检查模式
<!--
前提：IDEA需要设置支持ES6语法
'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行！
局部变量建议都使用let去定义~
-->
<script>
"use strict";
let i = 1;
let i1 = 2;
</script>
3.数据类型
3.1 字符串
1、正常字符串我们使用 单引号，或者双引号包裹
2、注意转义字符 \
\'
\n
\t
\u4e2d \u##### Unicode字符
\x41 Ascall字符
3、多行字符串编写
//tab 上面 esc下面
var msg =
`hello
world
你好呀
nihao
`
4、模板字符串
//tab 上面 esc下面
let name = 'Tom';
let age = 3;
var msg = `你好，${name}`
5、字符串长度
str.length
6、字符串的可变性，不可变
7、大小写转换
<script>
"use strict";
var student = "student";
var teacher = "TEACHER";
console.log(student.toUpperCase());
console.log(teacher.toLowerCase());
</script>
8、student.indexof(‘t’)
9、substring，从0开始
[)
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)
3.2 数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6];//通过下标取值和赋值
1、长度
arr.length
注意：假如给arr.lennth赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
2、indexOf，通过元素获得下标索引
arr.indexOf(2)
1
字符串的"1"和数字 1 是不同的
**3、slice（）**截取Array的一部分，返回的一个新数组，类似于String中substring
4、push()，pop()尾部
push：压入到尾部
pop：弹出尾部的一个元素
5、unshift(),shift() 头部
unshift：压入到头部
shift：弹出头部的一个元素
6、排序sort()
(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]
7、元素反转reverse()
(3)["A","B","C"]
arr.reverse()
(3)["C","B","A"]
8、concat()
注意：concat()并没有修改数组，只是会返回一个新的数组
9、连接符join
打印拼接数组，使用特定的字符串连接
10、多维数组
数组：存储数据（如何存，如何取，方法都可以自己实现！）
3.3 对象
若干个键值对
var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值
}
//定义了一个person对象，它有四个属性
var person = {
name:"Tom",
age:3,
email:"123456798@QQ.com",
score:66
}
Js中对象，{…}表示一个对象，建制对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象！
1、对象赋值
2、使用一个不存在的对象属性，不会报错！undefined
3、动态的删减属性，通过delete删除对象的属性
4、动态的添加，直接给新的属性添加值即可
5、判断属性值是否在这个对象中！xxx in xxx
6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
3.4 流程控制
if判断
while循环，避免程序死循环
for循环
orEach循环
ES5.1特性
<script>
var arr = [1,2,3,4,1,12,34,45,2342,5];
arr.forEach(function (value){
console.log(value);
})
</script>
for …in-------下标
<script>
var arr = [1,2,3,4,1,12,34,45,2342,5];
for (var num in arr){
console.log("存在");
console.log(arr[num]);
}
</script>
3.5 Map和Set
ES6的新特性~
Map
<script>
var map = new Map([["zs",90],["ls",80],["ww",70]]);
var value = map.get("zs"); //通过key获得value
map.set("xh",100); //新增或者修改
map.delete("zs"); //删除
</script>
Set：无序不重复的集合
<script>
var set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.delete(2);
console.log(set.has(3));
</script>
3.6 iterator
es6新特性
遍历数组
<script>
var arr = [1,23,3];
for (var x of arr){
console.log(x);
}
</script>
遍历Set
<script>
var set = new Set([1,1,2,3,4,4]);
for (var x of set){
console.log(x);
}
</script>
遍历Map
<script>
var map = new Map([["zs",90],["ls",80],["ww",70]]);
for (var x of map){
console.log(x);
}
</script>
4.函数
4.1 定义函数
定义方式一
绝对值函数
<script>
function abs(x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}
</script>
一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined
定义方式二
<script>
var abs = function (x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}
</script>
function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！
方式一和方式二等价！
调用函数
abs(10)//10
abs(-10) //10
参数问题：javaScript可以传任意个参数，也可以不传递参数~
参数进来是否存在问题？
假设不存在参数，如何规避？
<script>
var abs = function (x) {
//手动抛出异常来判断
if (typeof x !== "number"){
throw "Not a Number";
}
if (x >= 0) {
return x;
} else {
return -x;
}
}
</script>
arguments
arguments是一个JS免费赠送的关键字；
代表，传递进来的所有参数，是一个数组！
<script>
var abs = function (x) {
console.log("x->" + x);
for (var i = 0; i < arguments; i++) {
console.log(arguments[i]);
}
if (x >= 0) {
return x;
} else {
return -x;
}
}
</script>
问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~
rest
以前：
ES6引入的新特性，获取除了已经定义的参数之外的所有参数~…
<script>
function f(a,b,...rest) {
console.log("a->" + a);
console.log("b->" + b);
// var value = rest;
// console.log(value);
console.log(rest);
}
</script>
rest参数只能写在最后面，必须用…标识。
4.2 变量的作用域
在javascript中，var定义变量实际是有作用于的。
假设在函数体重声明，则在函数体外不可以使用~（闭包）
如果两个函数使用了相同的变量名，只要在函数内部就不冲突
如果两个函数使用了相同的变量名，只要在函数内部就不冲突
<script>
function f() {
var x = 'A';
x = x + 1;
console.log(x); //A1
}
function f1() {
var x = 1;
x = x + 1;
console.log(x); //2
}
</script>
内部函数可以访问外部函数的成员，反之则不行
假设，内部函数变量和外部函数变量，重名！
假设在JavaScript中，函数查找变量从自身函数开始~， 由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
提升变量的作用域
结果：x undefined
说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
这个是在javascript建立之初就存在的特性。 养成规范：所有 的变量定义都放在函数的头部，不要乱放，便于代码维护；
全局变量
全局对象window
alert() 这个函数本身也是一个window的变量；
javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错 Refrence
规范
由于我们的所有变量都会绑定到window上，。如果不同的js文件，使用了相同的全局变量，就会产生冲突—>如何减少这样的冲突？
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~
jQuery中就是使用的该方法：jQuery.name，简便写法：$()
局部作用域
ES6的let关键字，解决了局部作用域冲突的问题！
建议大家都用let去定义局部作用域的变量；
常量
在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值。
在ES6引入了常量关键字 const
4.3 方法
定义方法
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
<script>
var person = {
name: "zhangsan",
birth: 2001,
age: function (){
let now = new Date().getFullYear();
return now - this.birth;
}
}
//调用属性
person.name;
//调用方法
person.age();
</script>
this.代表什么？拆开上main的代码看看
<script>
function getAge() {
let now = new Date().getFullYear();
return now - this.birth;
}
var person = {
name: "zhangsan",
birth: 2001,
age: getAge
}
getAge(); //NaN
person.age(); //21
</script>
this是无法指向的，是默认指向调用它的那个对象的；
apply
在js中可以控制this指向
<script>
function getAge() {
let now = new Date().getFullYear();
return now - this.birth;
}
var person = {
name: "zhangsan",
birth: 2001,
age: getAge
}
var person2 = {
name: "lisi",
birth: 2000,
age: getAge
}
getAge.apply(person,[]); //21 this.指向了person，参数为空
getAge.apply(person2,[]); //22 this.指向了person，参数为空
</script>
5.对象
typeof返回结果
| 类型 | 返回值 | 类型 | 返回值 |
|---|---|---|---|
| 数字类型 | number | null | object |
| 字符串类型 | string | undefined | unfefined |
| 布尔类型 | boolean | 函数 | function |
| 数组 | object | 核心对象 | function |
| 对象 | object | 浏览器对象模型中的方法 | object |
5.1 Date
常用方法
<script>
let date = new Date();
date.getFullYear(); //年
date.getMonth(); //月
date.getDate(); //日
date.getDay(); //星期几
date.getHours(); //时
date.getMinutes(); //分
date.getSeconds(); //秒
date.getTime(); //时间戳
console.log(date = new Date(1653484296897)) //转换为标准时间
</script>
转换，注意调用的是方法
now.toDateString() //"Wed May 25 2022"
now.toLocaleDateString() //"2022/5/25"
now.toLocaleString() //"2022/5/25 下午9:11:36"
now.toLocaleTimeString() //"下午9:11:36"
now.toGMTString() //"Wed, 25 May 2022 13:11:36 GMT"
5.2 JSON
什么是JSON
早期所有数据传输习惯使用XML文件！
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript中一切皆为对象，任何JavaScript支持的类型都可以用JSON表示；如number,string…
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对都是用 key：value
<script>
var user = {
name: "张三",
age: 18,
sex: "男"
}
var jsonUser = JSON.stringify(user); //将对象转换为JSON字符串 "{"name":"张三","age":18,"sex":"男"}"
var obj = JSON.parse('{"name":"张三","age":18,"sex":"男"}'); //将JSON字符串解析为对象，参数是一个字符串，里面用双引号，外面就用单引号包裹；反之用双引号包裹
</script>
JSON和对象的区别
var obj = {a:'hello',b:'hellob'}; //对象
var json = '{"a"："hello","b":"hellob"}' //JSON字符串
5.3 Ajax
- 原生的js写法 xhr异步请求
- jQuery封装好的方法 $(“#name”).ajax(“”)
- axios请求
6.面向对象编程
JavaScript、Java、c#…面向对象编程；JavaScript有何区别
- 类：模板
- 对象：具体的实例
在JavaScript这个需要大家换一下思维方式
6.1 原型：
<script>
var xiaoming = {
name: 'xiaoming',
age: 18,
run: function (){
console.log(this.name + '跑步')
}
};
var xiaohong = {
name: 'xiaohong'
};
//原型对象
xiaohong.__proto__ = xiaoming;
var bird = {
name: '',
fly: function (){
console.log(this.name + '飞')
}
};
xiaohong.__proto__ = bird;
</script>
function Student(name) {
this.name = name;
}
//给Student新增一个方法
Student.prototype.hello = function () {
alert("hello");
};
6.2 class
class关键字，是在ES6引入的
1、定义一个类，属性、方法
<script>
class Person {
constructor(name) {
this.name = name;
};
say(){
alert('Hello');
};
}
var xiaoming = new Person('xiaoming');
var xiaohong = new Person('xiaohong');
xiaoming.say();
</script>
2、继承
<script>
class Person {
constructor(name) {
this.name = name;
};
say(){
alert('Hello');
};
}
class Xxs extends Person{
constructor(name) {
super(name);
this.name = name;
};
play(){
alert(this.name + '在玩');
}
}
var xxs = new Xxs('梦之泪殇');
xxs.say();
xxs.play();
</script>
本质：查看对象原型
原型链
__ proto __
7、操作BOM对象
浏览器介绍
JavaScript和浏览器‘之间的关系？
JavaScript诞生就是为了能够在让它在浏览器中运行
BOM：浏览器对象模型
- IE 6-11（Edge）
- Chrome
- Safari
- FireFox
- Opera
三方浏览器：QQ浏览器，360浏览器，Uc浏览器等
window
window代表浏览器窗口
window.alert("坚持")
undefined
window.innerHeight
760
window.innerWidth
491
window.outerHeight
864
window.outerWidth
1536
//通过window获得浏览器窗口大小
Navigator
Navigator,封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36"
navigator.platform
"Win32"
大多数时候，我们不会使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.width
1536
screen.height
864
location
location代表当前页面的URL信息
location.host "www.baidu.com" //主机
location.href "https://www.baidu.com/" //当前指向的位置
location.protocol "https:" //协议
location.reload() //刷新网页
location.assign('https://www.kuangstudy.com/') //设置新的地址
document
- document代表当前的页面， HTML DOM文档树
document.title
"百度一下，你就知道"
document.title=('无敌')
"无敌"
- 获取具体的文档树节点
<body>
<ld id = "sw">
<dt>Java</dt>
<dt>JavaSE</dt>
<dt>JavaEE</dt>
</ld>
<script>
let elementById = document.getElementById("sw");
console.log(elementById)
</script>
</body>
- 获取cookie
document.cookie
"BIDUPSID=EF7233A573BB8AF9BBE18F1A3BE5233C; PSTM=1653117831; BAIDUID=EF7233A573BB8AF9892571C81AA34CD0:FG=1; BD_UPN=12314753; BAIDUID_BFESS=EF7233A573BB8AF9892571C81AA34CD0:FG=1; ZFY=JzHiAUO3fGUKihlmIDWXUcYwW07uFrucEP1nM6fL5Kw:C; channel=bd2115.windows222.top; baikeVisitId=45624056-8656-4e35-aacb-300de2753447; BA_HECTOR=858k2l8g8h8180aha11h8scfr14; BDRCVFR[4CxyPtnY5Wm]=9NHuKgO2D6_Iv-8uAqLT1cznB4YUL0; BD_HOME=1; H_PS_PSSID=31254_26350"
- 劫持cookie原理
www.taobao.com
<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到他的服务器-->
服务器可以设置cookie：httpOnly
history代表浏览器的历史记录（不建议使用）
history.back()//后退
history.forward()//前
还有其他BOM命令可以自己查阅
8、操作DOM对象（重点）
核心
浏览器网页就是一个Dom树形结构
- 更新:更新Don节点
- 遍历Dom节点:得到Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的的节点
要操作一个Dom节点,就必须先获得这个Dom节点
获得Dom节点
<body>
<div id = 'father'>
<h id = 'h1'>h</h>
<p1 class = 'p1'>p1</p1>
<p2>p2</p2>
</div>
<script>
var father = document.getElementById('father');
var h1 = document.getElementById('h1');
var p1 = document.getElementsByClassName('p1');
var p2 = document.getElementsByTagName('p2');
var children = father.children;//获取父节点下的所有子节点
father.lastChild;
father.firstChild;
</script>
</body>
这是原生代码,之后我们尽量都是用jQurey
更新节点
<body>
<div id="d1"></div>
<script>
var d1 = document.getElementById("d1");
</script>
</body>
操作文本:
s.innerText = '123'
"123"
s.innerHTML = '<h1>你好</h1>'
"<h1>你好</h1>"
操作css
d1.style.color = 'red' //属性使用 字符串包裹
d1.style.fontFamily = '楷体' //驼峰命名问题
d1.style.fontSize = "50px"
删除节点
删除节点的步骤： 先获取父节点，通过父节点删除自己
<body>
<div id = 'father'>
<h id = 'h1'>h</h>
<p1 class = 'p1'>p1</p1>
<p2>p2</p2>
</div>
<script>
//想删除p1
let h1 = document.getElementById('h1');
let parentElement = h1.parentElement; //找到p1的父节点
parentElement.removeChild(h1); //通过父节点使用removechild删掉自己（只有标记为id选择器的节点才可以删除)
let father = document.getElementById('father');
father.removeChild(father.children[0])
</script>
注意：删除多个节点时，children是时刻变化的，不能直接father.removechild(father.children[0])这样从第一个索引开始删
插入节点
我们获得了某个Dom节点，假设这个Dom节点是空的，我们会通过intterHTML就可以增加一个元素，但是如果这个Dom节点已经存在元素了，我们就不能这样干了，会产生覆盖！
追加：
<body>
<p id = 'JavaScript'>JavaScript</p>
<div id = 'aaa'>
<p id = 'JavaSE'>JavaSE</p>
<p id = 'JavaEE'>JavaEE</p>
<p id = 'JavaME'>JavaME</p>
</div>
<script>
let javaScipt = document.getElementById('JavaScript');
let aaa = document.getElementById('aaa');
aaa.append(javaScipt); //追加节点到后面
</script>
</body>
创建一个新的标签实现插入
<body>
<p id = 'JavaScript'>JavaScript</p>
<div id = 'aaa'>
<p id = 'JavaSE'>JavaSE</p>
<p id = 'JavaEE'>JavaEE</p>
<p id = 'JavaME'>JavaME</p>
</div>
<script>
var aaa = document.getElementById('aaa');
//创建一个节点
var newElement = document.createElement('p');
//给节点添加文本或html
newElement.innerText = '苏伟';
aaa.appendChild(newElement);
</script>
</body>
创建一个新的标签实现插入
<body>
<p id = 'JavaScript'>JavaScript</p>
<div id = 'aaa'>
<p id = 'JavaSE'>JavaSE</p>
<p id = 'JavaEE'>JavaEE</p>
<p id = 'JavaME'>JavaME</p>
</div>
<script>
let myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
let body = document.getElementsByTagName('body');
body[0].style.backgroundColor = '#32a356';
let myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
let head = document.getElementsByTagName('head');
myStyle.innerHTML = 'body{background-color: #32a356}'
head[0].append(myStyle);
</script>
</body>
insertBefore
<body>
<p id = 'JavaScript'>JavaScript</p>
<div id = 'aaa'>
<p id = 'JavaSE'>JavaSE</p>
<p id = 'JavaEE'>JavaEE</p>
<p id = 'JavaME'>JavaME</p>
</div>
<script>
let aaa = document.getElementById('aaa');
let js = document.getElementById('JavaScript');
let me = document.getElementById('JavaME');
// list: 要包含的节点 (谁在谁前面就把谁放到前面)
aaa.insertBefore(js,me);
/*
JavaSE
JavaEE
JavaScript
JavaME
*/
</script>
</body>
9、操作表单(验证)
获得要提交的信息
<form action="#" method="post">
<p>
<span>用户名：</span> <input type="text" id="user">
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="man" id="girl">女
</p>
</form>
<script>
var input_text = document.getElementById("user");
var boy_redio = document.getElementById('boy');
var girl_redio = document.getElementById('girl');
//input_text.value(); 得到输出框的值
input_text.value = '123' //修改输入框的值
//对于多选框单选框等固定的值，boy_redio.value只能取到当前的值
boy_redio.checked;//查看返回的结果是否为true，如果为true则代表选中
boy_redio.checked = true;//赋值
</script>
提交表单，MD5加密密码，表单优化
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<form action="#" method="post" onsubmit="aaa()">
<p>
<span>用户名：</span> <input type="text" id="username" name="username">
</p>
<p>
<span>密码</span> <input type="password" id="password" >
</p>
<input type="hidden" id="md5_password" name="password">
<!--绑定事件 onclick 被点击 -->
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa() {
var uname = document.getElementById('username');
var psd = document.getElementById('password');
var md5_psd = document.getElementById('md5_password');
console.log(uname.value);
psd.value = md5(psd.value);
//md5_psd.value = md5(psd.value);
//MD5算法 可以校验判断表单，true就是通过提交，false就是阻止提交
return true;
}
</script>
10、jQuery
jQuery库，里面存在大量的javascript函数
获取jquery
- 可以导入jQuery在线引用地址
例如< script src=“http://libs.baidu.com/jquery/2.1.4/jquery.min.js”>< /script >
- 官网下载https://jquery.com/download/ 导入项目中
语法：$(标签选择器).事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引用在线地址-->
<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>-->
<!-- 引用本地地址-->
<script src="lib/jquery.min.js"></script>
</head>
<body>
<a href="#" id="test">点我</a>
<script>
$('#test').click(function (){
alert('hello');
});
</script>
</body>
</html>
选择器
<script>
//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery选择器 css里的选择器都能用
$('p').click(); //标签选择器
$('.class').click();//类选择器
$('#id').click();//id选择器
</script>
文档工具站：https://jquery.cuishifeng.cn/
事件
- 鼠标事件、键盘事件、其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery.min.js"></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').mousemove(function (e){
$('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY);
});
});
</script>
</body>
</html>
操作Dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery.min.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="JavaSE">JavaSE</li>
</ul>
<script>
//获得值
$('#test-ul li[name=JavaSE]').text();
//设置值
$('#test-ul li[name=JavaSE]').text('苏伟');
// css 的操作
$('#test-ul li[name=JavaSE]').css('color','red');
// 元素的显示
$('#test-ul li[name=JavaSE]').show();
// 元素的隐藏
$('#test-ul li[name=JavaSE]').hide();
</script>
</body>
</html>
12.总结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生抽奖界面</title>
<style>
*{
padding: 0px;
margin: 0px;
font-size: 20px;
font-family: "宋体";
color: #00ff00;
text-shadow: 7px 10px 1px #008800;
}
body{
background-color: #000000;
}
.all{
width: 100%;
height: 100vh;
perspective: 500px;
overflow: hidden;
perspective: 500px;
}
.strs{
display: flex;
width: 100%;
height: 100vh;
transition: 3s;
}
.strs div{
width: 30px;
text-align: center;
height: 100vh;
}
.cz{
width: 100px;
height: 10vh;
position: absolute;
top: 90vh;
left: 48%;
font-size: 2em;
font-weight: 900;
color: red;
text-shadow: 1px 1px 1px red;
}
.cz:hover{
color: #00ff00;
text-shadow: 1px 1px 1px #008800;
}
.result{
width: 40%;
height: 80px;
position: absolute;
top: 40vh;
left: 30%;
color: #00ff00;
text-shadow: 1px 1px 1px #008800;
font-size: 3em;
font-weight: 900;
opacity: 0;
transition: 2s;
text-align: center;
}
.rank{
width: 200px;
border: 2px solid #00FF00;
position: absolute;
top: 65vh;
left: 85%;
}
.rank p{
width: 100%;
text-align: center;
text-shadow: 0px 0px 0px transparent;
}
.rank p:hover{
color: yellow;
}
.update{
width: 500px;
height: 30vh;
position: absolute;
top: -35vh;
left: 38%;
background-color: black;
border: 1px solid #00FF00;
display: flex;
justify-content: center;
transition: 1s;
}
.tx{
background: transparent;
margin-top: 15vh;
text-align: center;
}
</style>
</head>
<body>
<div class="all" ondblclick="update()" onmousemove="moves(event)">
<div class="strs" id="strs"></div>
<div class="cz" id="cz" onclick="starts()">开始</div>
<div class="result" id="result"></div>
<div class="rank" id="rank" onmousedown="rankdown()" onmouseup="rankup()"><p>历史记录</p></div>
<div class="update" id="update">
<p>
<input type="text" list="updatelist" class="tx" id="tx"/>
<datalist id="updatelist"></datalist>
<input type="button" value="删除" class="tx" onclick="update1()"/>
<input type="button" value="添加" class="tx" onclick="update2()"/>
<input type="button" value="取消" class="tx" onclick="update3()"/>
</p>
</div>
</div>
<script>
var names = [
"刘欣",
"程贤政",
"谢行",
"邱思宇",
"廖永胜",
"刘东",
"刘向鸿",
"朱美琳",
"刘佳",
"董金杰",
"张瑞",
"赵文豪",
"黄俊涛",
"李小华",
"黄建军",
"余洋",
"江琳",
"张羽",
"肖怀智",
"王文宇",
"向俊瑾",
"秦渝均",
"邓桂兰",
"何洁",
"陈广",
"张士杰",
"李丹",
"肖晴",
"张渝",
"王子晓",
"陆恋钰",
"周兴怡",
"黎雪彬",
"刘琳",
"杜涛",
"米俊龙",
"陈益巧",
"周雪",
"许小祥",
"李林",
"邓东华",
"杨雪"
];
var namess = [];
bg();
function bg(){
document.getElementById("strs").innerHTML='';
for(var i=0;i<51;i++){
var rdmnum = Math.floor(Math.random()*names.length);
var str = '';
str+='<div>';
var rdmnum1 = Math.floor(Math.random()*10)+1;
for(var h=rdmnum1;h>0;h--){
str+='<font style="opacity: '+h/10+';">'+names[rdmnum]+'</font>';
}
str+='</div>';
document.getElementById("strs").innerHTML+=str;
}
}
var start1 = null;
var num1 = 0;
function starts(){
if(num1==0){
start1=setInterval(bg,100);
document.getElementById("cz").innerText="停止";
document.getElementById("strs").style.transform="translateZ(0px) translateY(0px)";
document.getElementById("result").style.opacity="0";
num1=1;
}else{
clearInterval(start1);
document.getElementById("cz").innerText="开始";
document.getElementById("strs").style.transform="translateZ(450px) translateY(350px)";
document.getElementById("result").style.opacity="1";
var rdmname = document.getElementById("strs").childNodes[25].firstChild.innerText;
document.getElementById("result").innerText='恭喜'+rdmname+'同学中奖了';
namess.unshift(rdmname+' 中奖');
rank();
num1=0;
}
}
function rank(){
document.getElementById("rank").innerHTML='<p>历史记录</p>';
for(var i=0;i<namess.length;i++){
if(i==10){
break;
}
document.getElementById("rank").innerHTML+='<p>'+namess[i]+'</p>';
}
}
function update(){
document.getElementById("update").style.top="18vh";
}
function updatelist(){
document.getElementById("updatelist").innerHTML='';
for(var i=0;i<names.length;i++){
document.getElementById("updatelist").innerHTML+='<option>'+names[i]+'</option>'
}
}
updatelist();
function update3(){
document.getElementById("update").style.top="-35vh";
document.getElementById("tx").value='';
}
function update1(){
var str = document.getElementById("tx").value;
for(var i=0;i<names.length;i++){
if(names[i]==str){
namess.unshift(names[i]+' 删除');
names.splice(i,1);
updatelist();
document.getElementById("tx").value='';
rank();
break;
}
}
}
function update2(){
var str = document.getElementById("tx").value;
namess.unshift(str+' 添加');
names.push(str);
updatelist();
rank();
document.getElementById("tx").value='';
}
var x,y,start2;
function rankdown(){
start2 = setInterval(rankmove);
}
function rankup(){
clearInterval(start2);
}
function rankmove(){
document.getElementById("rank").style.left=x-20+'px';
document.getElementById("rank").style.top=y-10+'px';
}
function moves(xy){
x=xy.clientX;
y=xy.clientY;
}
</script>
</body>
</html>
- 如何巩固JS：看jQuery源码、游戏源码。
- 巩固HTML、CSS：扒网站。
result").innerText=‘恭喜’+rdmname+‘同学中奖了’;
namess.unshift(rdmname+’ 中奖’);
rank();
num1=0;
}
}
function rank(){
document.getElementById(“rank”).innerHTML=‘历史记录
’;
for(var i=0;i<namess.length;i++){
if(i==10){
break;
}
document.getElementById(“rank”).innerHTML+=‘’+namess[i]+‘
’;
}
}
function update(){
document.getElementById(“update”).style.top=“18vh”;
}
function updatelist(){
document.getElementById(“updatelist”).innerHTML=‘’;
for(var i=0;i<names.length;i++){
document.getElementById(“updatelist”).innerHTML+=‘’+names[i]+‘’
}
}
updatelist();
function update3(){
document.getElementById(“update”).style.top=“-35vh”;
document.getElementById(“tx”).value=‘’;
}
function update1(){
var str = document.getElementById(“tx”).value;
for(var i=0;i<names.length;i++){
if(names[i]==str){
namess.unshift(names[i]+’ 删除’);
names.splice(i,1);
updatelist();
document.getElementById(“tx”).value=‘’;
rank();
break;
}
}
}
function update2(){
var str = document.getElementById(“tx”).value;
namess.unshift(str+’ 添加’);
names.push(str);
updatelist();
rank();
document.getElementById(“tx”).value=‘’;
}
var x,y,start2;
function rankdown(){
start2 = setInterval(rankmove);
}
function rankup(){
clearInterval(start2);
}
function rankmove(){
document.getElementById(“rank”).style.left=x-20+‘px’;
document.getElementById(“rank”).style.top=y-10+‘px’;
}
function moves(xy){
x=xy.clientX;
y=xy.clientY;
}
- 如何巩固JS：看jQuery源码、游戏源码。
- 巩固HTML、CSS：扒网站。
3373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
