JavaScript学习笔记

一、什么是JavaScript

1.1 概述

javaScript是世界上最流行的一门脚本语言

一个合格的后端人员必须要精通javaScript

1.2 历史

介绍：https://blog.csdn.net/kese7952/article/details/79357868

ECMAScript：可以理解为javaScript的一个标准

最新版本已经到es6版本~但是大部分浏览器还只停留在支持 es5 代码上!

开发环境-线上环境，版本不一致

二、快速入门

2.1 引入JavaScript

1、内部引入

内部🏷️

<script>
	alert('Hello World');
</script>

2、外部引入

javascript块

alert('Hello World');

html块

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset='utf-8'>
        <title>script</title>
        <script src='path路径'></script>
    </head>
    <body>
        <!--<script>-->
        <!--    alert('Hello World');-->
        <!--</script>-->
        
        <!--不用定义，默认就是javascript-->
    		<!-- <script type="text/javascript"></script> -->
    </body>
</html>

2.2 基本语法入门

// 变量
var num=10;
var name="konan";
alert(num);

//条件控制
if(num>8){
   alert(num+"这是num");
}else{
   alert("这不是num")
}

console.log(num) //在控制台输出变量的值 suot

使用浏览器的调试台：

Safari

Google

2.3 数据类型

数值、文本、图形、音频、视频…

number

js不区分小数和整数

123 //整数123
123.4 //小数123.4
1.234e5 //科学计数法
-99 //负数
NaN //not a number
Infinity //表示无限大

字符串

‘abcd’ “abcde”

布尔值

true false

console.log(1>3) 
> false

逻辑运算

&& || !

比较运算符

=
== 等于（类型不一样，值一样，结果为true）
=== 绝对等于（类型一样，值一样，结果为true）

js的一个缺陷，坚持不要使用 == 比较
NaN===NaN (false)，NaN与所有数值都不相等，包括自己
只能通过isNaN(NaN)来判断一个数是否是NaN

浮点数问题：

Math.abs(1/3-(1-2/3))<0.00001 
> true
console.log(1/3) === (1-2/3) //避免这种写法，结果为false
> false

null和undefined

null 空
undefined 未定义

数组

java的数值必须是相同类型的，js中不需要

//尽量使用[]，增强可读性
var arr = [1,3,4,'konan',null,true]

new Array(1,3,4,'konan',null,true)

取数组下标，如果越界了：

 > undefined

对象

对象用大括号，数组是中括号～

每个属性之间用逗号隔开，最后一个不需要添加

定义

var person = {
        name:"konan",
        age:3,
        tags:['js','java','mysql','web','...']
    }

取对象的值

person.name
> "konan"
person.tags[2]
> "mysql"

2.4 严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    前提：IEDA需要设置支持ES6语法
    'use strict':启用严格检查模式，预防Javascript的随意性导致产生的一些问题
    必需写在Javascript的第一一行！
    局部变量建议都使用let去定义
     -->
</head>
<body>
<script>
    'use strict'
    // i=10 全局变量
     let i=10; //ES6 let
</script>

</body>
</html>

三、数据类型

3.1 字符串

使用单引号或双引号包裹

var msg='Student';
Var tar="Student";

转义字符 \

\'
\n
\t
\u4e2d  Unicode字符 \u####
> 中
\x41 	ASCII字符   0~255
> A

多行字符编写，使用 `` 包裹

let msg=`Hello
    你好
    konan`;
console.log(msg);

模板字符串

let name='konan';
let age='18';
let msg2=`你好呀${name}`; //使用 `` 包裹生效
console.log(msg2);
> "你好呀konan"

字符串不可变性

let stu="Student";
console.log(stu[1]);
> t
stu[1]='R';
console.log(stu);
> Student

相关方法

let ch="Student";
console.log(ch.length); //长度 7
console.log(ch.toUpperCase()); //转大写 STUDENT
console.log(ch.toLowerCase()); //转小写 student
console.log(ch.indexOf('d'));  //获得下标 3
console.log(ch.substring(0,3)); //截取字串[0,3) Stu

3.2 数组

定义

var arr=[1,2,3,4,5]; 
arr[0];
arr[0]=1;

常用方法

arr.lenght 	//返回长度
> 5
⚠️加给arr.length赋值，数组大小就会发生变化，赋值过小，元素就会丢失，过大会空填充

arr.indexOf(2)	//通过元素获得下标索引
> 1
⚠️字符串的"1"与数字1是不同的

arr.slice(1,3)	//截取arr的一部分，返回一个新数组，类似于String中subString
> [2, 3]

arr.sort()	//排序
['a','c','b']
arr.sort()
['a','b','c']

arr.reverse()	//元素反转
> [5, 4, 3, 2, 1]

arr.concat(['A','B','C'])	//拼接数组
> [1, 2, 3, 4, 5, "A", "B", "C"]
⚠️concat()并没有修改数组，只是会返回一个新的数组

arr.join('-')	//以指定的连接符分隔数组元素
> "1-2-3-4-5"

arr.push('konan','小明')	//压入元素到尾部
> [1, 2, 3, 4, 5, "konan", "小明"]
arr.pop()	//弹出尾部的一个元素
> [1, 2, 3, 4, 5, "konan"]

arr.unshift('ppsn')	//压入元素到头部
> ["ppsn", 1, 2, 3, 4, 5]
arr.shift()	//弹出头部的一个元素
> [1,2,3,4,5]

多维数组

arr=[[1,2],[5,'6'],['konan',10]]	//定义
arr[2][0]	//访问
> "konan"

3.3 对象

若干个键值对，js中所有的键都是字符串，值是任意对象

//定义一个person对象，它有四个属性：
var person={
    name:'konan',
    age:18,
    email:'notre1024@163.com',
    score:0
}

1、对象赋值

person.name = "konan2"
person.name
> konan2

2、使用一个不存在的属性，不会报错

person.age
> 18
person.gender
> undefined

3、动态的删减属性

delete person.name
> true
person
> {age: 18, email: "notre1024@163.com", score: 0}

4、动态的添加，直接给新的属性添加值即可

person.gender='男'
person
> {name: "konan", age: 18, email: "notre1024@163.com", score: 0, gender: "男"}

5、判断属性值是否在这个对象中

'age' in person
> true

'toString' in person
> true	//继承

6、判断一个属性是否是这个对象自身拥有的

person.hasOwnProperty('email2')
> false
person.hasOwnProperty('email')
> true

3.4 条件控制

if…else

while / do…while

for

forEach

for…in

var a=[2,4,6,8,10,33,'konan'];	//遍历该数组

for (let i=0;i<a.length;i++){
  console.log(a[i]);
}

a.forEach(function (value) {
  console.log(value);
})

for (let i in a) {	 //获得索引
  console.log(a[i]);
}

3.4 Map与Set

Map：键值对的集合

var map=new Map([['konan1',88],['konan2',96],['konan3',99]]);
var name=map.get('konan2');
map.set('konan3',79);
map.set('admin',88);
map.delete('konan1');

Set：无序不重复的集合

let set=new Set([2,2,2,4,6,8,16]);
set.add(1024);
set.delete(4);
console.log(set.has(16));

3.5 Iterable

遍历数组

var arr=[2,4,6,7,9,12];
for(let i of arr){
    console.log(i);
}

遍历Map

var map=new Map([['konan1',88],['konan2',96],['konan3',99]]);
for(let x of map){
    console.log(x);
}

遍历Set

var set=new Set([2,2,2,4,6,8,16]);
for(let x of set){
    console.log(x);
}

四、函数

4.1. 定义函数

定义方式一

function abs(x){
    if(x>0){
        return x;
    }else{
        return -x;
    }
}

定义方式二

var abs=function(x){
    if(x>0){
        return x;
    }else{
        return -x;
    }
}

调用函数

abs(10);
abs(-10);

参数问题：javaScript可以传任意个参数，也可以不传参数～

var abs=function(x){
  if(typeof x!=='number'){	//参数为空时抛出异常
      throw 'Not a Number';
  }
  if(x>=0){
      return x;
  }else{
      return -x;
  }
}

arguments

arguments是一个JS免费赠送的关键字，包含传递进来的所有参数，是一个数组！

var abs=function(x){
      console.log("x->"+x);
      for(var i=0;i<arguments.length;i++){
          console.log(arguments[i]);
      }
      if(x>=0){
          return x;
      }else{
          return -x;
      }
}

abs(1,2,3,4,5);
> 1 1 2 3 4 5

rest

获取除了已定义的参数之外的所有参数～形成一个数组

function abc(a,b,...rest){
    console.log("a->"+a);
    console.log("b->"+b);
    console.log(rest);
}
⚠️rest参数只能写在最后面，必须用`...rest`标识

4.2 变量的作用域

局部变量

函数体中声明，函数体外是不能使用的，内部变量（闭包可以实现使用）

function abc(){
    var x=1;
    x=x+1;
}
x=x+1;    //[Error] ReferenceError: Can't find variable: x

函数内部的变量各不冲突

function abc(){
    var x=1;
    x=x+1;
}
function abc2(){
    var x='A';
    x=x+'B';
}

内部函数可以访问外部函数的成员，反之不然

function abc(){
    var x=1;

    function abc2(){
        var y=x+1;    //2
    }

    var z=y+1;    //ReferenceError: Can't find variable: y
}

内部变量和外部变量重名

function abc(){
    var x='A';

    function abc2(){
        var x='B';
        console.log('inner'+x);   //innerB
    }

    console.log('outer'+x);   //outerA
    abc2();
}
abc();
⚠️同名变量：内部函数会屏蔽外部函数的变量

提升变量的作用域

function abc(){
    var x='A'+y;	//会隐式声明y，但没有值，不建议这样用,建议定义在头部
    console.log(x);
    > xundefined
    y='B';
}

function abc(){	
    var x=1,	
        y=x+1,
        z,i,a;
}	//采用这种形式定义变量

全局函数

var x=1;
function abc(){
    console.log(x);
}
abc();
console.log(x);

全局对象window

var x='abc';
alert(x);
alert(window.x);	//默认所有的全局变量，都会自动绑定在window对象下
console.log(window.x);

window.alert(x);	//alert本身也是一个window变量

var old_alert=window.alert;
old_alert(x);	//old_alert此时相当于alert

window.alert=function(){
    
};
window.alert('abc');	//此时会失效

window.alert=old_alert;	//恢复
window.alert('abcabc');

规范

由于所有的全局变量会绑定到window上，如果不同的js文件，使用了相同的全局变量，会发生冲突

//唯一全局变量
var konan = {};

//定义全局变量
konan.name = 'こなん'；
konan.age = 18;
konan.add = function(a,b){	//定义方法，绑定在唯一的全局变量名字中
    return a+b;
}
//了解jQuery

局部作用域let

function abc(){
    for(var i=0;i<100;i++){
        console.log(i);
    }
    console.log(i+1);	//101
}

//ES6关键字，解决局部变量作用域冲突问题
function abc(){
    for(let i=0;i<100;i++){
        console.log(i);
    }
    console.log(i+1);	//识别不到i，抛出错误
}

常量const

在ES6之前，用大写字母定义常量

var PI=3.14;	//可随意修改

conosle.log(PI);

ES6引入了常量关键字const

const PI=3.14;
console.log(PI);
PI=124;		//报错，不可修改

4.3 方法

定义方法

var konan={
    name:"こなん",
    birth:2003,
    //方法
    age:function (){
        let now=new Date().getFullYear();
        return now-this.birth;	//this默认指向调用它的对象
    }
}
console.log(konan.name);
console.log(konan.age());//访问方法必须带括号()

//方法
function getAge(){
  let now=new Date().getFullYear();
  return now-konan.birth;	//不能用this
}
var konan={
  name:"こなん",
  birth:2003,
  age:getAge
}

apply

js中可以控制this指向

//方法
function getAge(){
    let now=new Date().getFullYear();
    return now-this.birth; //this默认指向调用它的对象
}

var konan={
    name:"こなん",
    birth:2003,
    age:getAge
}

getAge.apply(konan,[]);   //设置this指向konan，参数为空

五、内部对象

标准对象

typeof 123
< "number"
typeof 'konan'
< "string"
typeof true
< "boolean"
typeof NaN
< "number"
typeof []
< "object"
typeof {}
< "object"
typeof Math.abs
< "function"
typeof undefined
< "undefined"

5.1 Date

基本使用

var now = new Date();	//Sun Feb 06 2022 13:03:19 GMT+0800 (CST) 格林尼治时间
now.getFullYear();	//年
now.getMonth();	//月 0～11
now.getDate();	//日
now.getDay();	//星期 0～6
now.getHours(); //时
now.getMinutes();	//分
now.getSeconds();	//秒
⚠️获得的值都是now中初始化时的值、

now.getTime();	//时间戳

console.log(new Date(now.getTime()));	//时间戳转为时间

now.toLocaleString();	//"2022/2/6 下午1:03:19" （调用是一个方法，不是属性）

now.toGMTString();	//"Sun, 06 Feb 2022 05:03:19 GMT"

5.2 JSON

json是什么

轻量级的数据交换格式
在JSON出现之前，大家一直用XML来传递数据。因为XML是一种纯文本格式，所以它适合在网络上交换数据。
在JavaScript中，我们可以直接使用JSON，因为JavaScript内置了JSON的解析
把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串，这样才能够通过网络传递给其他计算机。如果我们收到一个JSON格式的字符串，只需要把它反序列化成一个JavaScript对象，就可以在JavaScript中直接使用这个对象了。

JSON 是适用于 Ajax 应用程序的一种有效格式，原因是它使 JavaScript 对象和字符串值之间得以快速转换 JSON是一种传递对象的语法

对象用 {}
数组用 []
所有的键值对用 key:value

//JSON和JS对象的转化
var user = {
    name:"konan",
    age:19,
    sex:"男"
}

//stringify将js对象转化为符合json标准的字符串
var jsonUser = JSON.stringify(user);

//parse将符合json标准的字符串转化为js对象
var strUser = JSON.parse('{"names":"konan","age":19,"sex":"男"}');
⚠️最外面要用单引号

JSON对象和JS对象的区别

var js = {names:"konan",age:19,sex:"男"};
var json = '{"names":"konan","age":19,"sex":"男"}';

六、面向对象编程

原型对象

JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。

var Studnet={
    name:"konan",
    age:19,
    run:function(){
        console.log(this.name + ' is running...');
    }
}

var xiaoming=function (){
    name="xiaoming"
}

xiaoming.__proto__=Studnet;	//把xiaoming的原型指向了对象Student，相当于继承了Student

xiaoming.name;   // '小明'
xiaoming.run();  // 小明 is running...
⚠️不要直接用obj.__proto__去改变一个对象的原型

create创建对象

// 原型对象:
var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

function createStudent(name) {
    // 基于Student原型创建一个新对象:
    var s = Object.create(Student);
    // 初始化新对象:
    s.name = name;
    return s;
}

var xiaoming = createStudent('小明');
xiaoming.run(); // 小明 is running...
xiaoming.__proto__ === Student; // true

function Student(props) {
    this.name = props.name || '匿名'; // 默认值为'匿名'
    this.grade = props.grade || 1; // 默认值为1
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

function createStudent(props) {
    return new Student(props || {})
}

//createStudent()函数有几个巨大的优点：
//一是不需要new来调用，二是参数非常灵活，可以不传，也可以这么传：
var xiaoming = createStudent({
    name: '小明'
});

xiaoming.grade; // 1

用new创建基于原型的JavaScript的对象

function Student(name) {
    this.name = name;
}

//给Student新增一个方法
Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

class继承

class关键字，在ES6引入

定义一个类，属性，方法

//定义一个学生类
class Student{

  //构造器
  constructor(name){
      this.name=name;
  }

  hello(){
      alert('hello,js!');
  }
}

var konan1=new Student('konan01');

继承

class pupil extends Student{	
    constructor(name,grade){
        super(name);
        this.grade=grade;
    }
    mygrade(){
        alert('我是一名小学生！');
    }
}

var konan2=new pupil('konan02',6);

七、操作BOM对象

window

window代表浏览器窗口

window.alert('konan')
> undefined
window.innerHeight	//大小可变
> 206
window.innerWidth
> 574
window.outerHeight	//浏览器固定大小
> 945
window.outerWidth
> 574

Navigator（不使用）

Navigator封装了浏览器的相关信息

navigator.appVersion
> "5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML,       like Gecko) Version/15.3 Safari/605.1.15"
navigator.userAgent
> "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.3 Safari/605.1.15"
navigator.platform
> "MacIntel"
⚠️不建议使用，会被人为修改

screen

screen代表屏幕尺寸

screen.width
> 1512
screen.height
> 982

location (重要)

location代表当前页面的URL信息

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.reload();	//刷新网页
location.assign('https://www.taobai.com');	//打开新的网页

document

document代表当前的页面，HTML DOM文档树

document.title
> "百度一下，你就知道"
document.title="konan"
> "konan"

获取文档树的节点

<body>
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
    <dt>摩卡</dt>
    <dd>热摩卡咖啡</dd>
    <dt>酸奶</dt>
    <dd>北京老酸奶</dd>
    <dt>果汁</dt>
    <dd>鲜榨苹果汁</dd>
</dl>

<script>
  'use strict';
  var menu = document.getElementById('drink-menu');
  var drinks = document.getElementsByTagName('dt');
  var i, s;

  s = '提供的饮料有:';
  for (i=0; i<drinks.length; i++) {
      s = s + drinks[i].innerHTML + ',';
  }
  console.log(s);
</script>

</body>

获取cookie

document.cookie		//读取到当前页面的Cookie
> "BA_HECTOR=050421a40l2l81ah461gvveoi0q; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; H_PS_PSSID=35104_31253_34584_35490_35246_35801_35796_35326_26350_35746; BD_HOME=1; BD_UPN=143254; BDRCVFR[d9MwMhSWl4T]=mk3SLVN4HKm; PSINO=6; delPer=0; BD_CK_SAM=1; H_PS_645EC=cb17ETBVBlUO40la9pIbC3%2BWoSq2gIjodJD1Lfe%2BqJfn80GmSk%2B4DgPutTK%2BO7gletMugw; __sec_t_key=1b231dcf-9da2-4122-b1b6-54677291bdbf; BIDUPSID=F3BD1FFBA8A3915F2149A73D7A506D55; PSTM=1643964514; BAIDUID=F3BD1FFBA8A3915F2149A73D7A506D55:FG=1"

由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患，这是因为在HTML页面中引入第三方的JavaScript代码是允许的：

<!-- 当前页面在wwwexample.com -->
<html>
    <head>
        <script src="http://www.foo.com/jquery.js"></script>
    </head>
    ...
</html>

如果引入的第三方的JavaScript中存在恶意代码，则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。

为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。

history（不使用）]

history代表浏览器的历史记录

history.back()	//后退
history.forward()	//前进

新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()，试图回到登录前的页面。这是一种错误的方法。

任何情况，你都不应该使用history这个对象了。

八、操作DOM对象

核心

浏览网页就是一个Dom树形结构

更新：更新Dom节点
遍历：得到所有的Dom节点
删除：删除Dom节点
添加：添加新的Dom节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

获得Dom节点

<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1_id</p>
    <p class="p2">p2_class</p>
</div>

<script>
    //对应css选择器
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementById('father');

    var childrens=father.children;  //获取父节点下的所有子节点
    //father.firstChild
    //father.lastChild
</script>
</body>

更新节点

<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1_id</p>
    <p class="p2">p2_class</p>
    <p id="p3">p3_id</p>
</div>

<script>
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var p3=document.getElementById('p3');
    var father=document.getElementById('father');

    p1.innerText='konan';   //修改文本的值,好像只能修改id属性的值
    p3.innerText='<strong>123</strong>';

    //操作JS
    p1.style.color='red';
    p3.style.fontSize='50px';
    p3.style.background='#90ad35';
</script>
</body>

删除节点

先获取父节点，再通过父节点删除自己

<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1_id</p>
    <p class="p2">p2_class</p>
    <p id="p3">p3_id</p>
</div>

<script>
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var p3=document.getElementById('p3');
    var father=document.getElementById('father');

    father.removeChild(p1); //删除p1标签

    //删除是一个动态的过程，删掉第一个，原来的第二个就变成了第一个
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>
</body>

插入节点

<body>

<p id="js">1、javascript</p>
<div id="list">
    <p id="ee">2、javaEE</p>
    <p id="se">3、javaSE</p>
    <p id="me">4、javaME</p>
    <p class="java">5、java</p>
</div>

<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');

    list.appendChild(js);   //插入'js'这个元素到list的末尾，原本的js会消失，相当于移动

    //通过js创建一个新的标签节点
    var newP=document.createElement('p');   //创建一个p标签🏷️
    newP.id='newp';
    newP.innerText='新建的p标签';
    list.appendChild(newP);

    //创建一个script标签
    var myScript=document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    //创建一个style标签
    var myStyle=document.createElement('style');
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML='body{background:green;}';    //设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle);  //必须添加到指定位置才能生效

</script>
</body>

insert

<body>
<div>
    <p class="p1" id="p1">这是P1</p>
    <p class="p2" data-name="p2">这是p2</p>
</div>
<p id="p3">这是p3</p>
<script>
    let div = document.getElementsByTagName('div')[0];
    let p2 = document.getElementsByClassName('p2')[0];
    let p1 = document.getElementById('p1');

    let insertedNode=div.insertBefore(p2,p1);
	console.log(returnDom === p2);	//true
</script>
</body>

p2：将要插入的节点
p1：被参照的节点（即要插在该节点之前）
insertedNode：插入后的节点
div：父节点

九、操作表单

什么是表单

用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。

HTML表单的输入控件主要有以下几种：

文本框，对应的<input type="text">，用于输入文本；
口令框，对应的<input type="password">，用于输入口令；
单选框，对应的<input type="radio">，用于选择一项；
复选框，对应的<input type="checkbox">，用于选择多项；
下拉框，对应的<select>，用于选择一项；
隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

获取表单值

<body>
<form action="#" method="post ">
    <p>用户名：<input type="text" placeholder="请输入用户名" id="user"></p>
    <p>密&nbsp&nbsp&nbsp&nbsp码：<input type="password" placeholder="请输入密码" id="psw"></p>
    <label for="user"></label>
    <label for="psw"></label>

    <p>
        <span>性别：</span>
        <input type="radio" name="sex"  id="boy"> 男
        <input type="radio" name="sex"  id="girl"> 女
        <input type="radio" name="sex"  id="ha" value="haha"> 哈
    </p>
</form>
<script>
    let user_id=document.getElementById('user');
    let psw_id=document.getElementById('psw');
    let boy_id=document.getElementById('boy');
    let girl_id=document.getElementById('girl');
    //得到输入框的值
    user_id.value;
    psw_id.value;

    //得到单选按钮的值,单选框本没有value，除非默认了value
    //可以得到是不是被选中了   true/false
    ha.value;   //可以得到ha默认的："ha"
    boy_id.checked; 
    girl_id.checked;    //选中了谁，谁返回true
</script>
</body>

提交表单

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="MD5加密.js"></script>
</head>
<body>
<form action="#" method="get">
    <p>用户名：<input type="text" placeholder="请输入用户名" id="user"></p>
    <p>密&nbsp&nbsp&nbsp&nbsp码：<input type="password" placeholder="请输入密码" id="psw"></p>
    <!--绑定事件onclick被点击-->
    <button type="submit" onclick="konan()">提交</button>
</form>
<script>
    function konan(){
        let user_id=document.getElementById('user');
        let psw_id=document.getElementById('psw');
        //md5算法
        psw_id.value=MD5(psw_id.value);
        alert("提交成功！");
    }
</script>
</body>

进阶

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="MD5加密.js"></script>
</head>
<body>
    <!--表单绑定事件，onsubmit="函数" true,false，对应函数里的return
		将这个结果返回给表单，使用onsubmit函数-->
<form action="#" method="get" onsubmit="return konan()">
    <p>用户名：<input type="text" placeholder="请输入用户名" id="user"></p>
    <p>密&nbsp&nbsp&nbsp&nbsp码：<input type="password" placeholder="请输入密码" id="psw"></p>

    <input type="hidden" id="md5-psw" name="psw">

    <!--绑定事件onclick被点击-->
    <button type="submit">提交</button>
</form>
<script>
    function konan(){
        let user_id=document.getElementById('user');
        let psw_id=document.getElementById('psw');
        let hidden_id=document.getElementById('md5-psw');
        //md5算法
        hidden_id.value=MD5(psw_id.value);
        alert("提交成功！");

        //可以校验表单内容，true就是通过，false阻止提交
        return true;
    }
</script>
</body>

十、jQuery

初识jQuery

<body>
    
<script src="jQuery3.0.6.js"></script>
    
<a href="#" id="test">点我</a>
<script>
    //选择器同css的选择器
    $('#test').click(function(){
        alert('hello,jQuery!');
    })
</script>
</body>

选择器

<script>
	//原生js
    document.getElementsByTagName();	//标签
    document.getElementById();	//id
    document.getElementsByClassName();	//类
    
    //jQuery css中的选择器全部可以使用
    $('p').click();		//标签选择器
    $('#id').click();	//id选择器
    $('.class').click();	//class选择器
</script>

官方文档：https://jquery.cuishifeng.cn

事件

<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="jQuery3.0.6.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>
            //当网页加载完毕后，响应事件
            $('#divMove').mousemove(function (e){
                $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
            })
        </script>
    </div>
</div>
</body>

https://jquery.cuishifeng.cn/mousemove.html

操作Dom元素

节点文本操作

$('#test-ul li[name=python]').text();	//获取值
$('#test-ul li[name=python]').text('设置值');	//设置值
$('#test-ul').html();
$('#test-ul').html('<strong>konan</strong>');

css操作

$('#test-ul li[name=python]').css({'color':'red'})

元素的显示和隐藏：本质display:none

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle()

完结！

如果觉得文章对你有用，请随意赞赏

JavaScript