文章目录

  • JavaScript
    • 引入JavaScript
    • 基本语法
    • 数据类型
    • 严格检查模式
    • 流程控制
    • Map和Set
    • iterator
    • 函数
      • 函数定义
      • 变量的作用域
      • 方法
    • 内部对象
      • Date
    • JOSN
    • 面向对象编程
      • 原型对象
      • class
      • 继承
    • 操作BOM对象***
    • 操作DOM对象***
    • 操作表单（验证）
    • jQuery

JavaScript

引入JavaScript

  1. 内部标签
<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//表示无限大

字符串

  1. 字符串使用 单引号 或者 双引号 包裹 通过下标取值，不能赋值，字符串不可变
  2. 注意转义字符串 \
\'
\n
\t
\u4e2d   \u####  unicode字符
\x41     Ascll字符
  1. 多行字符串编写
var msg = `helloworld你好`
  1. 模板字符串
'use strict';
let name = 'sgl';
var msg = `你好呀！${name}`
  1. 字符串长度
str.length
  1. 大小写转换
//注意这里是方法不是属性
str.toUpperCase()
str.toLowerCase()
  1. 获取字符串中字符的下标
str.indexOf('a')
  1. 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可以包含任意数据类型

  1. 数组长度
arr.length

注意：给arr.length赋值，数组大小就会改变，如果赋值过小，元素就会丢失

  1. indexOf 通过元素获得下标索引
arr.indexOf(2)

注意：字符串的"2"和数字2 不同

  1. slice () 截取Array的一部分，返回一个新数组，类似于String中的substring
  2. push() pop() 尾部
push:压入到尾部
pop:弹出尾部的一个元素
  1. unshift() shift() 头部
unshift:压入到头部
shift:弹出头部的一个元素

  1. 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"
  1. 多维数组
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>
  1. 对象赋值
person.name="coco";
"coco"
person.name;
"coco"
  1. 使用一个不存在的对象属性，不会报错！undefined
person.hh
undefined
  1. 动态的删减属性，通过delete删除对象的属性；动态的添加，直接给新的属性添加值即可
person.name="coco";
"coco"
person.name;
"coco"
delete person.name;
true
person.haha="haha"
"haha"
  1. 判断属性的值是否存在这个对象中! xxx in xxx
'age' in person
true
//继承  所以是对的
'toString' in person
true
  1. 判断一个属性是否是这个对象自身拥有的 用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';  //2console.log('inner:'+x);  //outer:A}console.log('outer:'+x);   //inner:Bqj2();}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  毫秒数    1631022468114console.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) //kavinconsole.log(person2.name)  //kavinconsole.log(person1.hello()); //helloconsole.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加密 赋值给md5pwdmd5pwd.value = md5(pwd.value)//可以校验判断表单的内容，true就是通过提交，false阻止提交return true;}
</script>
</body>
</html>

密码被加密

jQuery

jQuery是一个库，里面存在大量的JavaScript函数

获取jQuery

  1. 外部引用
  <!--引用--><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  1. 官网下载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()

JavaScript基础知识和jQuery基础知识简介相关推荐

  1. 【Java Web开发指南】JQuery基础笔记

    文章目录 JQuery 基础: 1. JQuery 基础:1. 概念2. 快速入门3. JQuery对象和JS对象区别与转换4. 选择器5. DOM操作6. 案例 JQuery 基础: 1. 概念: ...

  2. jQuery基础知识整理

    jQuery基础知识整理 jQuery简介 什么是jQuery(了解) jQuery简化JS代码 jQuery的核心思想:"写的更少,但做的更多"(write less,do mo ...

  3. JQuery 基础知识学习（详尽版）

    JQuery 详尽的基础知识学习 jQuery 语法 jQuery 选择器 jQuery 选择器(大全) jQuery 事件 ready() holdReady() on() off() one() ...

  4. jQuery基础知识（黑马程序员前端基础必备教程视频笔记）

    一.jQuery概述 1.JavaScript库 即library,是一个封装好的特定的集合(方法和函数).从封装的一大堆函数的角度理解库.就是在个库中,封装了很多预先定义好的函数在里面,比如动画an ...

  5. jQuery小测试系列之jQuery基础知识

    日期:2012-4-17  来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识. 来源:jQuery小测试系列之jQuery基础知识

  6. jquery基础知识（一）

    一.JQuery 基础:  1.   概念: 一个JavaScript框架.简化JS开发         * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优 ...

  7. jQuery基础—高级详细知识笔记

    jQuery基础 一.概述 1.什么是jQuery? 2.特点 二.jQuery的定义方式 1.如何导入jQuery.js 2.jQuery核心函数 **jQuery核心函数的四个作用:** 3.如何 ...

  8. JavaScript基础知识总结（基础篇）

    目录 JavaScript基础知识点总结(基础篇) 一.JavcScript基础语法应用 1.1三条输出语句 1.2JS中的数据类型 1.3JS中的强制类型转换 1.31string强制类型转换分为两 ...

  9. Python|并发编程|爬虫|单线程|多线程|异步I/O|360图片|Selenium及JavaScript|Scrapy框架|BOM 和 DOM 操作简介|语言基础50课：学习（12）

    文章目录 系列目录 原项目地址 第37课:并发编程在爬虫中的应用 单线程版本 多线程版本 异步I/O版本 总结 第38课:抓取网页动态内容 Selenium 介绍 使用Selenium 加载页面 查找 ...

最新文章

  1. Jquery 将表单序列化为Json对象
  2. JavaScript中Exists函数
  3. 2019北京高考分数分布一览表(成绩分布统计)
  4. MySQL删除主键的操作方法
  5. spring jmx_JMX和Spring –第1部分
  6. 【面试必会】java虚拟机原理
  7. Java未来路在何方？图文详解！
  8. 阿里P7大牛整理！BAT大厂面试基础题集合，成功入职字节跳动
  9. [react] 举例说明什么是高阶组件(HOC)的属性代理
  10. linux提取声卡的codec教程,发个菜鸟提取声卡codec文件图文教程，老手就别看了，小心被骂！...
  11. CSS 水平对齐 text-align-last属性
  12. 手机相机里面的m_2020拍立得相机选购指南 富士乐魔徕卡推荐 总有一款适合你...
  13. 为什么专家都看好这本书
  14. Y-Combinator不同语言实现方案
  15. Python 编程语言
  16. vs2012 express 密钥
  17. mpvue 使用wxParse解析html
  18. 域名邮箱和邮件服务器
  19. day12 函数高级
  20. excel中插入的图表保存时提示 无法保存 html,excel表格保存不了的解决方法步骤...

热门文章

  1. dhrystone测试结果_测试cpu的简单工具-dhrystone | 学步园
  2. Webpack安装与配置
  3. java语言能干什么
  4. Ubuntu18的bug导致系统启动后黑屏的问题
  5. matlab：plot线型和颜色
  6. timedatectl的详细用法
  7. python分析各因素之间的相关性
  8. 王海峰、李飞飞、山世光、王井东、汪玉……众多AI华人学者入选2022 IEEE Fellow...
  9. HTTP 404错误你知道是什么意思吗
  10. 斐波那契数列（C/C++）