文章目录
JavaScript
引入JavaScript
- 内部标签
<script>
//...
</script>
外部引用
<script src="js文件路径"></script>
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部引用-->
<!--script标签内JavaScript代码-->
<script>
alert("hello world");
</script>
<!--外部引用-->
<script src="js/JavaScript01.js"></script>
</head>
<body>
这里也可以写js代码
</body>
</html>
JavaScript01.js文件
alert("hello world");
基本语法
注释:
单行注释以 // 开头。
任何位于 // 与行末之间的文本都会被 JavaScript 忽略(不会执行)。
多行注释以 / 开头,以 / 结尾。
任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。
变量:
JavaScript 使用 var 关键词来声明变量。
输出:
alert(score);
console.log(score); 在浏览器的控制台输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JavaScript严格区分大小写-->
<script>
//1.定义变量 变量类型 变量名 = 变量值;
var score = 71;
// alert(score);
//2.条件控制
if (score>60 && score<70){
alert("及格");
}else if (score>70 && score<80){
alert("中等");
}else {
alert("优秀");
}
//console.log(score); 在浏览器的控制台输出
</script>
</head>
<body>
</body>
</html>
数据类型
变量
var 变量名;
number
js不区分小数和整数
10//整数
10.1//浮点数
1.01e3//科学计数法
-10//负数
NaN//Not a Number
Infinity//表示无限大
字符串
- 字符串使用 单引号 或者 双引号 包裹 通过下标取值,不能赋值,字符串不可变
- 注意转义字符串 \
\'
\n
\t
\u4e2d \u#### unicode字符
\x41 Ascll字符
- 多行字符串编写
var msg = `
hello
world
你好
`
- 模板字符串
'use strict';
let name = 'sgl';
var msg = `你好呀!${name}`
- 字符串长度
str.length
- 大小写转换
//注意这里是方法不是属性
str.toUpperCase()
str.toLowerCase()
- 获取字符串中字符的下标
str.indexOf('a')
- substring
[)
str.substring(1) //从第一个字符串截取到最后一个字符串
str.substring(1,3)//[) 截取1~3的字符,包含1不包含3
注意:字符串的可变性 不可变!!!
布尔值
true,false
逻辑运算符
&& 两个都为真,结果为真
|| 一个为真,结果为真
! 真即假,假即真
比较运算符
= 赋值
== 等于(类型不一样,值一样,也会判断为true)
=== 绝对等于(类型一样,值一样,判断为true)
null和undefined
- null:空
- undefined:未定义
数组
Java的数值必须是相同的类型的对象,js中不需要这样
//保证代码的可读性,尽量使用[]
var arr = [1,2,3,'hello',null,true]; //通过下标取值或赋值
new Array(1,2,3,'hello',null,true);
如果数组下标越界:显示undefined
Array可以包含任意数据类型
- 数组长度
arr.length
注意:给arr.length赋值,数组大小就会改变,如果赋值过小,元素就会丢失
- indexOf 通过元素获得下标索引
arr.indexOf(2)
注意:字符串的"2"和数字2 不同
- slice () 截取Array的一部分,返回一个新数组,类似于String中的substring
- push() pop() 尾部
push:压入到尾部
pop:弹出尾部的一个元素
- unshift() shift() 头部
unshift:压入到头部
shift:弹出头部的一个元素
-
sort() 排序 reverse() 反转
concat() 拼接 没有修改数组,只是会返回一个新的数组
join() 连接符
var arr = ['A','C'];
arr.push('B')
3
arr
(3) ["A", "C", "B"]
arr.sort();
(3) ["A", "B", "C"]
arr.reverse()
(3) ["C", "B", "A"]
arr.concat([1,2,3])
(6) ["C", "B", "A", 1, 2, 3]
arr.join('-') //从这可以看出,没有修改数组
"C-B-A"
- 多维数组
arr = [[1,2],[3,4],["5","6"]]
arr[1][1]
4
对象
JavaScript中所有的键都是字符串,值是任意对象
格式: 若干个键值对
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值,
}
每个属性之间用逗号隔开,最后一个不需要添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//Java对象定义Person person = new Person()
var person = {
name:"sgl",
age:22,
tags:['js','css','html']
}
</script>
</head>
<body>
</body>
</html>
- 对象赋值
person.name="coco";
"coco"
person.name;
"coco"
- 使用一个不存在的对象属性,不会报错!undefined
person.hh
undefined
- 动态的删减属性,通过delete删除对象的属性;动态的添加,直接给新的属性添加值即可
person.name="coco";
"coco"
person.name;
"coco"
delete person.name;
true
person.haha="haha"
"haha"
- 判断属性的值是否存在这个对象中! xxx in xxx
'age' in person
true
//继承 所以是对的
'toString' in person
true
- 判断一个属性是否是这个对象自身拥有的 用hasOwnProperty()
person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false
严格检查模式
-
’use strict’ 严格检查模式,预防JavaScript的随意性导致产生的一些问题;
-
必须写在JavaScript代码的第一行;
-
局部变量建议使用let定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提:IDEA 需要支持ES6语法
'use strict';严格检查模式,预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript代码的第一行
局部变量建议使用let定义
-->
<script>
'use strict'
//局部变量
let b = 1;
</script>
</head>
<body>
</body>
</html>
流程控制
if判断
var score = 71;
// alert(score);
//2.条件控制
if (score>60 && score<70){
alert("及格");
}else if (score>70 && score<80){
alert("中等");
}else {
alert("优秀");
}
while循环,避免死循环
var age = 0;
while (age<100){
age = age + 1;
console.log(age)
}
do {
age = age + 1;
alert(age);
}while (age<100)
for循环
for (let i = 0; i < 100; i++) {
alert(i); //浏览器弹窗输出
//console.log(i); 控制台输出
}
forEach循环
var arr = [12,23,123,45,67,89]
//函数
arr.forEach(function (value){
console.log(value);
})
for in
index代表数组arr元素的索引
arr[index] 输出数组arr的值
for of
value 输出数组arr的值
var arr = [12,23,123,45,67,89]
for (var index in arr){
console.log(index); //index代表数组arr元素的索引
console.log(arr[index]); //输出数组arr的值
for (var value of arr){
console.log(value); //输出数组arr的值
Map和Set
Map:
var map = new Map([['tom',100],['jack',99],['lucy',98]]);
var name = map.get('tom'); //通过key获取value
map.set('linda',88); //新增或修改
map.delete("jack");//删除
Set: 无序不重复集合
let set = new Set([3,2,1,2,3]); //set可以去重
set.add(4);
set.delete(1)
console.log(set.has(3))
iterator
iterator遍历迭代Map和Set
var map = new Map([['tom',100],['jack',99],['lucy',98]]);
for (let value of map) {
console.log(value);
}
let set = new Set([7,8,9]);
for (let value2 of set) {
console.log(value2);
}
函数
函数定义
定义方式一
function 函数名(属性值){
//函数体
}
绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return代表函数结束,返回结果!
如果没有执行return,函数执行完也会返回结果,结果就是undefined
定义方式二
var 函数名 = function(属性值){
//函数体
}
绝对值函数
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
调用函数
abs(-10); //10
abs(10); //10
参数问题: JavaScript可以传递任意参数 也可以不传递参数
abs(); //NaN
abs(10,29,10); //10
手动抛出异常可解决传递任何参数问题
var abs = function(x){
if (typeof x!=='number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
abs();
Uncaught Not a Number
arguments
arguments
代表 传递进来的所有参数,是一个数组
var abs = function(x){
console.log("x-->"+x);
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if (typeof x!=='number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
控制台运行结果:
abs(25,23,65,98,65);
x-->25 //x指向第一个参数
25 //arguments[i] 输出的
23
65
98
65
25 //if语句输出的25
rest
rest
获取剩余的参数
function fun(a,b,...rest){
console.log("a-->"+a);
console.log("b-->"+b);
console.log(rest);
}
控制台的运行结果:
fun(1,2,3,6,7);
a-->1
b-->2
(3) [3, 6, 7] 剩余的参数
注意:rest参数只能写在最后面,必须用 ...
标识
变量的作用域
在JavaScript中,var定义的变量实际是有作用域的
假设在函数体中声明,则在函数体外不可以使用 ,否则报错 Uncaught ReferenceError: x is not defined
function qj() {
var x = 1;
x = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名,只要在函数内部,就不冲突
function qj() {
var x = 1;
x = x + 1;
}
function qj2() {
var x = A;
x = x + 1;
}
内部函数可以访问外部成员的函数,反之不行
function qj() {
var x = 1;
function qj2() {
var y = x + 1; //2
}
var z = y + 1; //console.log(z); Uncaught ReferenceError: z is not defined
}
假设,内部函数变量和外部函数变量 重名
function qj() {
var x = 'A';
function qj2() {
var x = 'B'; //2
console.log('inner:'+x); //outer:A
}
console.log('outer:'+x); //inner:B
qj2();
}
qj();
假设在JavaScript中 函数查找变量从自身开始,有"内"向"外"查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。
规范:所有的变量定义都放在函数的头部,便于代码维护
function f(){
var x = 1,
y = x + 1,
z,i,a; //undef
//之后可以随便用
}
全局变量
//全局变量
x = 1;
function f(){
console.log(x);
}
f();
console.log(x);
全局对象 window
var x = 1;
alert(x);
alert(window.x);
alter()这个函数本身也是一个 window
变量
var x = 1;
window.alert(x);
let alert_01 = window.alert;
alert_01(x);
window.alert = function () {
}
//发现alert失效了
window.alert(123);
//恢复
window.alert = alert_01;
window.alert(456);
JavaScript实际上只有一个作用域,任何变量(函数也可以视为变量),假设没有函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错referenceError
规范
由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件,使用了相同的全局变量,冲突 ,如何减少冲突
//唯一全局变量
var sgl = {};
//定义全局变量
sgl.name = 'coco';
sgl.add = function(a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
局部作用域 let
function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1); //101 i 出了作用域还可以使用
}
let关键字,解决局部作用域冲突问题
function aaa() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1); //Uncaught ReferenceError: i is not defined
}
常量 const
var PI = '3.14';
console.log(PI); //3.14
PI = '111'; //可以改变这个值
console.log(PI); //111
引入了常量const
const PI = '3.14'; //只读变量
console.log(PI);
PI = '111'; //直接报错 Uncaught TypeError: Assignment to constant variable.
方法
定义方法
**方法就是把函数放在对象里面,**对象只有两个东西:属性和方法
var sgl = {
name: '刚龙',
birth: 2000,
//方法
age:function() {
//今年 - 出生的年
let now = new Date().getFullYear();
return now - this.birth;
}
}
//属性
sgl.birth;
//方法,调用方法一定要带括号()
sgl.age();
拆开
function getAge() {
//今年 - 出生的年
let now = new Date().getFullYear();
return now - this.birth;
}
var sgl = {
name: '刚龙',
birth: 2000,
age:getAge
}
//sgl.age(); 可以
//getAge() NaN window
this是无法指向的,是默认指向调用它的那个对象
apply
在js中可以控制this的指向
getAge.apply(sgl,[])
function getAge() {
//今年 - 出生的年
let now = new Date().getFullYear();
return now - this.birth;
}
var sgl = {
name: '刚龙',
birth: 2000,
age:getAge
}
getAge.apply(sgl,[]);//this指向了 sgl ,参数为空
内部对象
标准对象
typeof 123
"number"
typeof NaN
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
Date
基本使用
var now = new Date(); //console.log(now);
//VM81:1 Tue Sep 07 2021 21:42:17 GMT+0800 (China Standard Time)当前时间
//在控制台输出
now.getFullYear();//年
now.getMonth();//月 0~11代表月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 1970.1.1 00:00:00 毫秒数 1631022468114
console.log(new Date(1631022468114)) //时间戳转为时间
转换(控制台输出)
var now = new Date();
console.log(new Date(1631022468114))
Tue Sep 07 2021 21:47:48 GMT+0800 (China Standard Time)
now.toLocaleDateString //注意调用是一个方式,不是一个属性
ƒ toLocaleDateString() { [native code] }
now.toLocaleDateString();
"07/09/2021"
now.toLocaleString()
"07/09/2021, 21:47:48"
now .toGMTString()
"Tue, 07 Sep 2021 13:47:48 GMT"
JOSN
JOSN是什么
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言
- 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率
在JavaScript一切解对象,任何js支持的类型都可以用JOSN来表示;number ,string …
格式:
- 对象都用{ }
- 数组都用[]
- 所有的键值对都是用 key:value
JOSN和js对象的转化
var user = {
name:'sgl',
age:21,
sex:'boy'
}
//对象转化为JSON字符串 参数为user的各个属性 {name: "sgl", age: 21, sex: "boy"}
var jsonUser = JSON.stringify('{name: "sgl", age: 21, sex: "boy"}')
//将JSON字符串转化为对象,参数为json字符串
var json01 = JSON.parse('{name: \\"sgl\\", age: 21, sex: \\"boy\\"}');
JSON和js的区别
var user = {name:'sgl',age:21,sex:'boy'}
var json = {'{name: \\"sgl\\", age: 21, sex: \\"boy\\"}'}
面向对象编程
原型对象
- 类:模板 原型对象
- 对象:具体的实例
原型:可以指向多个 以最后一个为原型对象
var Student = {
run:function () {
console.log(this.name+"run....")
}
}
var sgl = {
name:'sgl'
}
//原型对象 是Student
sgl.__proto__=Student;
var Bird = {
fly:function () {
console.log(this.name+"fiy....")
}
}
//sgl的原型对象是Bird
sgl.__proto__=Bird;
简述:函数的prototype指向了一个对象,而这个对象正是调用构造函数时创建的实例的原型,也就是person1和person2的原型。
原型的概念:每一个javascript对象(除null外)创建的时候,就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型中“继承”属性。
function Person(age) { //最初类的定义
this.age = age
}
//给Person新增一个方法
Person.prototype.hello = function (){
alert("hello");
}
Person.prototype.name = 'kavin'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name) //kavin
console.log(person2.name) //kavin
console.log(person1.hello()); //hello
console.log(person2.hello()); //hello
表示构造函数和实例原型之间的关系:
class
class
关键字
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert("hello");
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
控制台输出:
继承
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert("hello");
}
}
class xiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert("我刚刚大一");
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new xiaoStudent("xiaohong","大一");
__ proto __ : 这是每个对象(除null外)都会有的属性,叫做 __ proto __,这个属性会指向该对象的原型。
class Person{
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true
关系图:
constructor
每个原型都有一个constructor属性,指向该关联的构造函数。
class Person() {
}
console.log(Person===Person.prototype.constructor) //true
关系图
原型的原型 原型对象就是通过 Object 构造函数生成的,结合之前所讲,实例的 __ proto __ 指向构造函数的 prototype
总图:
操作BOM对象***
BOM:浏览器对象模型
window ***
window 代表 浏览器窗口
window.alert(1);
undefined
window.innerHeight;
524
window.innerWidth;
790
window.outerHeight;
822
Navigator
Navigator 封装了浏览器的信息
navigator.appName;
"Netscape"
navigator.appVersion;
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36"
navigator.userAgent;
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36"
navigator.platform;
"Win32"
一般不使用Navigator
对象
screen
screen 代表屏幕
screen.width;
1536
screen.height;
864
location ***
location 代表当前页面的URL信息 (控制台输入)
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:" //协议
reload: ƒ reload() //刷新网页
location.assign("https://blog.csdn.net/m0_53821599?spm=1000.2115.3001.5343"); //设置新地址,运行跳到该地址
document
document 代表当前网页, HTML DOM树
document.title;
"百度一下,你就知道"
document.title='狂神' //修改标题
"狂神"
获取具体的文档树节点 var dl = document.getElementById(“app”);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
<dd>JavaME</dd>
</dl>
<script>
var dl = document.getElementById("app");
</script>
</body>
</html>
获取cookie
document.cookie;
history
history 代表浏览器的历史记录
history.back();
history.forward();
操作DOM对象***
DOM:文档对象模型
核心
浏览器网页就是一个Dom树形结构
- 更新:更新Dom节点
- 遍历Dom节点:获得Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
要操作一个Dom节点,首先必须获得这个Dom节点
获得Dom节点
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css选择器
var h1 = document.getElementsByName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
//father.firstChild;
//father.lastChild;
</script>
原生代码,后面使用jQuery
更新Dom节点
<div id="div">
<script>
var div = document.getElementById('div');
</script>
操作文本:
div.innerText 和 div.innerHTML
div.innerText='div标签';
修改文本的值div.innerHTML='<strong>div标签</stong>';
可以解析HTML文本的标签
操作JS
属性使用字符串包裹 - 转为 驼峰 命名
div.style.color='green';
div.style.fontSize='30px';
div.style.padding='1em';
删除Dom节点
格式:p1.parentElement;
步骤:先获取父节点,在通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var p1 = document.getElementById('p1');
var element = p1.parentElement; //获取父节点
element.removeChild(p1); //删除获取父节点的节点
/* 控制台运行
* //删除是一个动态的过程
element.removeChild(father.children([0]));
element.removeChild(father.children([1]));
element.removeChild(father.children([2]));
* */
注意:删除多个节点时,children是在时刻变化的,删除节点的时候要注意!
插入Dom节点
获得Dom节点,假设这个Dom节点是空的,我们通过 innerHTML 就可以增加一个元素了,但是这个Dom节点已经存在元素了,就不能这样做,因为会产生覆盖
追加:
<!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 ee = document.getElementById('ee');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
</script>
</body>
</html>
效果:
创建一个新的标签,实现插入
格式: document.createElement(‘p’);
测试1:
<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');
//创建一个新节点
var new_p = document.createElement('p');
new_p.id = 'new_p';
new_p.innerText = 'JSP';
list.append(new_p);
</script>
效果:
测试2:
通过这个属性,可以设置任意的值
setAttribute('type','text/javascript')
setAttribute('type','text/css');
<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');
//创建一个新节点
var new_p = document.createElement('p');
new_p.id = 'new_p';
new_p.innerText = 'JSP';
list.append(new_p);
//创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript')
list.append(myScript);
//创建一个Style标签
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color: yellow;}' //相当于标签选择器body{background-color: yellow}
document.getElementsByTagName('head')[0].append(myStyle);
</script>
效果:
insertBefore
<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 ee = document.getElementById('ee');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
</script>
效果:
操作表单(验证)
文本框 text,下拉框 select,单选框 radio,多选框 checkbox,隐藏域 hidden,密码框 password …
表单的目的:提交信息
获取表单提交的信息
<form action="#" method='post'>
<p>
<span>用户名:</span> <input type="text" id="username">
</p>
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
<script>
var input_text = document.getElementById('username');
var input_radio_boy = document.getElementById('boy');
var input_radio_girl = document.getElementById('girl');
//得到输入框的值
input_text.value;
//修改输入框的值
input_text.value = '123';
//对于单选框,多选框等等固定的值,input_radio_boy.value只能取到当前的值
input_radio_boy.checked;//查看返回的结果是否为true,如果为true,则被选中
input_radio_girl.checked = true;//赋值
</script>
提交表单 MD5加密
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
表单绑定提交事件
onsubmit = 绑定一个提交检测的函数, true false
将这个结果返回给表单,使用onsubmit接收
οnsubmit="return fun()"
-->
<form action="https://www.baidu.com" method="post" onsubmit="return fun()">
<p>
<span>用户名:</span> <input type="text" required 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" οnclick="fun()">提交</button>-->
<button type="submit">提交</button>
</form>
<script>
function fun() {
var uname = document.getElementById('username');
var pwd = document.getElementById('input_password');
var md5pwd = document.getElementById('md5-password');
//密码经过MD5加密 赋值给md5pwd
md5pwd.value = md5(pwd.value)
//可以校验判断表单的内容,true就是通过提交,false阻止提交
return true;
}
</script>
</body>
</html>
密码被加密
jQuery
jQuery是一个库,里面存在大量的JavaScript函数
获取jQuery
- 外部引用
<!--引用-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
- 官网下载jQuery,导入
jQuery公式:
$(selector).action() selector 就是css选择器 action 指一个事件
测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引用 也可去官网下载-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<!--jQuery公式
$(selector).action()
selector 就是css选择器
action 指一个事件
-->
<a href="" id="jQuery">点我</a>
<script>
$('#jQuery').click(function () {
alert('hello jQuery');
})
</script>
</body>
</html>
selector 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<script>
//标签选择器
document.getElementsByTagName();
//id选择器
document.getElementById();
//类选择器
document.getElementsByClassName();
//jQuery css中的选择器它都能用
$('p').click(); //标签选择器
$('#id01').click(); //id选择器
$('.class01').click(); //类选择器
</script>
</body>
</html>
action 事件
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover |
jQuery菜鸟教程有详细教程 https://www.runoob.com/jquery/jquery-events.html
也可以去jQuery帮助文档中的事件 https://jquery.cuishifeng.cn/
鼠标移动测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
#divMove{
width: 300px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<!--获取鼠标当前的一个坐标-->
<p>移动可获取得鼠标坐标:</p>
<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>
jQuery操作Dom元素
节点文本操作
$('#id_ul li[name=javaee]').text(); //获得值
$('#id_ul li[name=javaee]').text('设置值');//设置值
$('#id_ul').html();//获得值
$('#id_ul').html('<strong>123</strong>');//设置值
测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<ul id="id_ul">
<li class="class_se">JavaSE</li>
<li name="javaee">JavaEE</li>
</ul>
<script>
$('#id_ul li[name=javaee]').text();
$('#id_ul').html();
</script>
</body>
</html>
css的操作:
$('#id_ul li[name=javaee]').css({ "color": "#ff0011", "background": "blue" });
<ul id="id_ul">
<li class="class_se">JavaSE</li>
<li name="javaee">JavaEE</li>
</ul>
<script>
$('#id_ul li[name=javaee]').text();
$('#id_ul').html();
//$('#id_ul li[name=javaee]').css({ "color": "#ff0011", "background": "blue" });
</script>
元素的显示和隐藏:本质 display:none
$('#id_ul li[name=javaee]').show()
$('#id_ul li[name=javaee]').hide()