JavaScript

1、什么是JavaScript？

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

历史

https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript它可以理解为是JavaScript的一个标准

最新版本已经到es6版本

但是大部分游览器还是停留在支持es5代码之上

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

2、快速入门

2.1、引入script项目

内部引入
```
<script>
    //....
</script>
```
外部引入
```
<script src="abc.js"></script>
```

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--    script内部写法-->
        <!--    <script>
                alert("我是一个弹窗");
            </script>-->
        <!--外部引入-->
        <script src="js/js.js"></script>
        <!--    注意：script必须成对出现-->
        <!--定义script时不要写type，因为默认就是JavaScript-->
        <script type="text/javascript "></script>
    </head>
    <body>
        <!--也可以吧script写到这里-->
    </body>
</html>

2.2、基本语法

定义变量：变量类型变量名 = 变量值;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            //1、定义变量  变量类型  变量名 = 变量值
            var score = 1;
            //2、条件控制
            if(score>60&&score<=70){
            }else if(score>70&&score<=80){
            }else if(score>70&&score<=80){
            }else {
                alert(score);
            }
            /*3、多行注释
            * 4、严格区分大小写
            * */
        </script>
    </head>
    <body>
    </body>
</html>

JavaScript-1

2.3、数据类型

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

变量

var a = 1;
var 王者荣耀 = “青铜”

number

js不区分小数和整数

123 //整数123
123.1  //浮点数123.1
1.123e3  //科学计数法
-99    //负数
NaN   //not a  number
Infinity   //表示无限大

字符串

'abc'      "abc"

布尔值

true    flase

逻辑运算符

&&  //两个都为真时取真
||  //两个都为假时取假
！  //真即假，假即真

比较运算符

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

这是一个js的缺陷，坚持不要用==比较

须知：

NaN，这个与所有数值都不相等，包括它自己。
只能通过isNaN（NaN）来判断这个数是否等于NaN

浮点数问题：

console.log((1/3)===(1-2/3))

尽量避免使用浮点数

Math.abs(1/3-(1-2/3))<0.0000001

null  为空
undefined  没有定义

数组
java的数据类型必须想让，js可以是任意的类型。

var arr=[1,2,3,4,5,'hello',true,null]
new array(1,12,3,45,true)

取数组下标，如果越界了，就会undefined

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

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

//Person person = new Person();
var person ={
    name: "yt",
    age: 20,
    id: "boy"
}

取对象的值

2.4、严格检查模式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            //前提：idea需要设置支持ES6语法
            /*  ’use strict‘;  严格检查模式，预防JavaScript随意性导致产生的问题
                必须放在第一行。
                局部变量建议都是要let去定义
            * */
            'use strict';
            let i = 1;
        </script>
    </head>
    <body>

    </body>
</html>

3、数据类型

3.1、字符串

正常字符串我们使用单引号，或者双引号。
注意转义字符\

\`
\n
\t
\u4e2d     unicode编码
\x41     Ascll字符

多行字符串编码用``包裹

var person = `
    你是
    一个
    大笨蛋
`

模板字符串

var name = 'yt';
var stu = `你好呀, ${name}`

字符串长度

str.length

字符串的可变性：不可变

大小写转换

student.toUpperCase()   //大写
student.toLowerCase()   //小写

获取字符串的下标

student.indexOf('t')

substring

student.substring(1)   //从第一个字符开始一直到最后一个，
student.substring(1,3)   //从第一个到第三个，包含第一个，不包含第三个

3.2、数组

Array可以包含任意的数据类型

var arr=[1,2,3,4,5,6]
(6) [1, 2, 3, 4, 5, 6]

长度

arr.length
6

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

arr.length=8
8
arr.sort()
(8) [1, 2, 3, 4, 5, 6, empty × 2]
arr.sort()
(3) [1, 2, 3]

indexOf通过元素获得下标索引

arr.sort()
(3) [1, 2, 3]
arr.indexOf(1)
0
arr.indexOf("1")
-1
//字符串的“1”和数字的1是不一样的

slice截取Array的一部分，返回一个新的数组,类似于string中的substring

截取的数组是一个新的数组，但不改变原数组的值。

arr.slice(1)   //截取的是第一个到最后一个
(5) [2, 3, empty × 3]
arr.sort()
(6) [1, 2, 3, empty × 3]

push、pop尾部

这两个方法会改变原数组

arr.push(1)  //压入尾部
7
arr.join()
"1,2,3,,,,1"
arr.pop()   //弹出尾部的一个元素
1
arr.join()
"1,2,3,,,"

unshift、shift头部

这两个方法会改变原数组

arr.unshift(9)   //压入头部
7
arr.join()
"9,1,2,3,,,"
arr.shift()     //弹出一个头部的元素
9
arr.join()
"1,2,3,,,"

sort（）排序

var a=['a','c','b']
a.sort()
(3) ["a", "b", "c"]

reverse（）元素反转

a.sort()
(3) ["a", "b", "c"]
a.reverse()
(3) ["c", "b", "a"]

concat()拼接

返回一个新的数组，但不改变原数组

a.concat(['e','g','g'])
(6) ["c", "b", "a", "e", "g", "g"]
a.sort()
(3) ["a", "b", "c"]

join（）连接符

打印拼接数组，使用特定的字符串连接。

a.sort()
(3) ["a", "b", "c"]
a.join("-")
"a-b-c"

多维数组

var arr1=[[1,2],[2,3],[3,4]]
arr1.join()
"1,2,2,3,3,4"
arr[1][1]

3.3、对象

若干个键位时
var 对象名 = {属性名：属性值, …}
JS中对象{…}表示已给对象，键值对描述属性：xx：xx，多个属性之间用逗号隔开，最后一个属性不用逗号。

JavaScript中的所有键都是字符串，值是任意对象。

 var 对象名={
            属性名，属性值;
            属性名，属性值;
            属性名，属性值;
            属性名，属性值;
        }
 var person={
            name:"bingning",
            age:13,
            id:"girl",
            score:65,
        }

对象赋值

 var person={
            name:"yt",
            age:13,
            id:"boy",
            score:65,
        }
undefined
person.name="wuhan"
"wuhan"
person
{name: "wuhan", age: 13, id: "boy", score: 65}

使用一个不存在的属性，不会报错！undefined

person.wo
undefined

动态的删除属性，通过delete删除对象的属性。

delete person.age
true
person
{name: "wuhan", id: "boy", score: 65}

动态的增加属性，直接给新的属性添加即可。

person.ha="decation"
"decation"
person
{name: "wuhan", id: "boy", score: 65, ha: "decation"}

判断属性是否在这个对象中！xxx in xxx

"name"in person
true
"toString" in person
true

hasOwnProperty()判断一个属性是否是这个对象自身拥有的

person.hasOwnProperty("toString")
false
person.hasOwnProperty("name")
true

3.4、流程控制

if判断

 var age=15;
 if(age>3){
	   alert("hhh")
}else if(age>10){
	  alert("woda")
}else{
	 alert("wan")
 }

while循环：避免死循环

while(age<100){
  	age++;
  	alert(age);
}

do…while循环

do{
	age++;
    alert(age);
}while(age<100)

for循环

for (let i = 0; i < 10; i++) {
	 alert(i);
}

forEach循环（函数）

var arr=[12,32,45,465,76,87,34,5,3];
arr.forEach(function (value) {
	console.log(value);
})

for…in循环（索引）

for (let arrKey in arr) {
	console.log(arr[arrKey])
}

3.5、Map和Set

Es6新特性

Map

var map=new Map([["name","yt"],["age",16],["id","boy"]]);
var name = map.get("name");  //通过key获取value
map.set("wan","hao");  //通过value增加值，如果第一个属性一样，就是修改值了
map.delete("name");  //删除

Set

无序不重复的集合，所以set可以去重

var set=new Set([1,23,4,1,1]);
set.add(5);  //增加值
set.delete(1);  //删除值
console.log(set.has(5));   //判断Set里面是否拥有该value

3.6、Iterator

Es6新特性

遍历数组

//for in 是下标 for of 才是值
var arr1=[1,23,4,5,6];
for (let i of arr1) {
	console.log(i);
}

遍历Map

var map=new Map([["name","yt"],["age",16],["id","boy"]]);
for (let x of map) {
     console.log(x);
}

遍历Set

var set=new Set([1,23,4,1,1]);
for (let x of set) {
     console.log(x);
}
1
23
4

4、函数

4.1、定义函数

第一种方式

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

一旦执行到return代表函数结束，返回结果。如果没有执行到return，函数执行也会结束，就是undefined。

第二种定义方式

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

这是一个匿名函数，但是可以把结果赋值给abs1，通过abs1就可以调用函数
参数问题，JavaScript可以传递任意参数，也可以不传递参数，参数进来是否有问题？

假设有问题，我们应该抛出异常去规避

var abs1=function(x){
    //手动抛出异常
    if(typeof x!=='number'){
        throw 'this is not number';
    }
    if(x>=0){
        return x;
    }else if(x<0){
        return -x;
    }
}

arguments

是一个JavaScript免费赠送的关键字。
代表传递进来的所有的参数，是一个数组

function abs3(x){
    console.log(x);
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有的参数。

以前

if(arguments.length>2){
        for (let i = 2; i <arguments.length; i++) {
            console.log(arguments[i]);
        }
}

现在

Es6引入新的特性，获取除了已经定义的参数外的所有参数。

function abs4(a,b,...rest){
    console.log("a->"+a);
    console.log("b->"+b);
    console.log(rest);
}

rest参数只能放在最后面，必须用…标识。

4.2、变量的作用域

在JavaScript中，var定义变量实际上是有作用域的

var score=1;

假设在函数体中申明，则在函数外不可以使用（非要想实现的话，后面可以研究一下闭包）

console.log(a);   //Uncaught ReferenceError: a is not defined
function abs(x){
    var a=1;
}

内部函数可以访问外部函数的成员，外部不能。

var score=300;
console.log(a);  //Uncaught ReferenceError: a is not defined
function abs(x){
    var a=1;
    a=a+score;
    console.log(a)
}

两个函数定义相同的变量，是没有问题的。

function abs(x){
    var a=1;
}
function abs1(x){
    var a=1;
}

函数外部与函数内部重名

var a=3;
function abs(x){
    var a=1;
    console.log(a);
}

在JavaScript中函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

提升变量的作用域

var x = 'x'+y;     //undefined
console.log(x);
var y='y';

结果：xundefined
说明：JavaScript执行引擎，自动提升了y的申明，但是不会给提升了的y赋值。

 var y;   //undefined
 var x = 'x'+y;  
 console.log(x);
 y='y';

这个是在JavaScript建立之初就有的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码的维护。

var x=1,
y =x+1,
u,z,i;   //undefined

全局函数

var a =10;
abs(10);
function abs(x){
    console.log(x);
}
abs(a);
console.log(a);

全局对象window

var a =10;
console.log(a);
console.log(window.a); //默认所有的全局变量，都会自己绑定在window下

alert函数也是window下的一个变量

var a = 10;
window.alert(10);

var A_alert=window.alert;
A_alert(a);
//失效
window.alert=function (){
}
//发现alert失效了
window.alert(10);
//重新有效
window.alert=A_alert;
window.alert('ad');

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果全局作用域都没有找到，就会报错RefrenceError

规范：

由于我们所有的全部变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突–>如何能够减少冲突

    //唯一全局变量
var kuang={};
//定义全局变量
kuang.name='yt';
kuang.add=function (a, b) {
    return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，减低全局命名的冲入问题。

局部作用域let

function abs(x){
    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i++);
}

ES6 let关键字，解决了局部作用域的问题。

function abs(x){
    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i++);   //Uncaught ReferenceError: i is not defined
}

建议大家都使用let去定义局部作用域的变量

常量const

在ES6之前怎么定义常量：只有用大写字母命名的变量就是常量，建议不要修改

var MAX=19;
MAX=19; //可以改变这个值
console.log(MAX);

ES6引入了常量关键字：const

const MAX = 19;
MAX = 10;  //Uncaug

4.3、方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：方法和属性

var yt={
    name: "yt",
    birth: 2000,
    age: function (){
        var now=new Date().getFullYear();
        return (now-this.birth);
    }
}
yt.name
yt.age()

this代表什么？上面的拆开看看

function age1() {
    var now=new Date().getFullYear();
    return (now-this.birth);
}
var yt={
    name: "yt",
    birth: 2000,
    age: age1
}
yt.age()
yt.name

this是无法指向的，默认指向被调用的对象。

apply

可以控制this指向的方向

function getage() {
    var now=new Date().getFullYear();
    return (now-this.birth);
}
var yt={
    name: "yt",
    birth: 2000,
    age: getage
}
getage.apply(yt,[]);  //默认指向yt  ， []代表参数为空

5、内部对象

标准对象

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

5.1、Date()

基本使用

var now = new Date();   //Tue Mar 23 2021 19:53:14 GMT+0800 (中国标准时间)
now.getFullYear();   //获取年
now.getMonth();  //获取月  0-11
now.getDate();  //获取日
now.getDay();  //星期几
now.getHours();  //获取小时
now.getMinutes();  //获取分
now.getSeconds();   //获取秒
now.getTime();  //获取时间戳  全世界同意
console.log(new Date(1616500577024));  //时间戳转化为时间

转换

now = new Date(1616500577024)
Tue Mar 23 2021 19:56:17 GMT+0800 (中国标准时间)
now.toLocaleString   //注意：调用的是一个方式，不是属性
ƒ toLocaleString() { [native code] }
now.toLocaleString()
"2021/3/23 下午7:56:17"
now.toGMTString()
"Tue, 23 Mar 2021 11:56:17 GMT"

5.2、JSON

JSON是什么

早期，所有数据传输习惯使用XML文件！

JSON是一种轻量级的数据交换格式
简介和清晰的层次结构使得JSON成为理想的数据交换语言
易于人阅读和编写，同时也易机器解析和生产，并有效的提升网络传输的效率

在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示：

格式：

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

JSON字符串和JS对象的转化

var date={
    name:"yt",
    age:13,
    sex:"boy"
}
//对象转化为JSON字符串  {"name":"yt","age":13,"sex":"boy"}
var strJSON=JSON.stringify(date);
//JSON转化为对象
var nwJSON=JSON.parse('{"name":"yt","age":13,"sex":"boy"}')

JSON与JS对象的区别

var date={name:"yt",age:13,sex:"boy"};
var json='{"name":"yt","age":13,"sex":"boy"}';

5.3、Ajax （以后在填充这块内容）

原本的js写法，xhr异步请求
jQuey封装好的方法 $("#name").ajax(“”)
axios请求

6、面向对象编程

6.1、什么是面向对象

原型对象

JavaScript、java、c#…向对象，JavaScript有些区别

类：模板
对象：具体的实例

在JavaScript中需要换中思维方式

var kuang={
    name:'yt',
    age:14,
    sex:'boy',
    kuan:function () {
        console.log("name" + this.name);
    }
};
var wName={
    name:'daming'
};
wName._Proto_=kuang;  //原型，相当于指向父类
var Bird={
    fly:function (){
        console.log("name is fly");
    }
};
wName._Proto_=Bird;  //原型，转换指向的对象

class继承

之前

function Student(name) {
    this.name=name;
}
//给student新增方法。
Student.prototype.hello=function () {
    alert("hello");
}

class·关键字，是在ES6中引入的

1、定义一个类：属性，方法

class Student1{
    constructor(name) {
        this.name=name;
    }
    hello1(){
        alert("fddf");
    }
}
var xiaoHong=new Student1("xiaohong");
xiaoHong.hello1();

2、继承

本质，查看对象原型

class Student1{
    constructor(name) {
        this.name=name;
    }
    hello1(){
        alert("fddf");
    }
}
class XiaoStudent extends Student1{   //继承了Student1
    constructor(name,myGrade) {
        super(name);   
        this.myGrade=myGrade;
    }
    myGride1(){
        alert(this.myGrade);
    }
}
var xiaoHong=new Student1("xiaohong");
var xiaoQinag=new XiaoStudent("xiaoqinag",10);
xiaoHong.hello1();
xiaoQinag.myGrade1();

原型链

7、操作BOM对象

浏览器介绍

JavaScript和浏览器的关系

JavaScript诞生就是为了能够让他在浏览器中运行。

BOM：浏览器对象模型：

IE;9-11
Chrome
Safari
FireFox

三方：

QQ浏览器
360浏览器

window

window代表游览器的窗口

window.outerHeight
680
window.innerHeight
309
window.innerWidth
1280
window.outerWidth
1280
window.Infinity
Infinity
window.AnimationEvent
ƒ AnimationEvent() { [native code] }

Navigator（不建议使用）

Navigator,封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36"
navigator.platform
"Win32"

大多数时候，我们不会使用navigator对象，因为会会被人为修改

screen

代表屏幕尺寸

screen.width
1280
screen.height
720

location

代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:
reload()//刷新网页
//设置新的地址
location.assign("https://www.2345.com/?30308")

doucument

当前页面， HTML、DOM文档树

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

获取具体的文档树节点。

<dl id="first">
    <dt>java</dt>
    <dd>javase</dd>
    <dd>javaee</dd>
</dl>
<script>
    var sum=document.getElementById("first");
</script>

获取Cookic

document.cookie
"BAIDUID_BFESS=BCEFD4B4CF746B2321446F4CF68C4574:FG=1; BAIDUID=BCEFD4B4CF746B23EE7FED4141F7BD4A:FG=1; BIDUPSID=BCEFD4B4CF746B23EE7FED4141F7BD4A; PSTM=1615857737; BD_UPN=12314753; COOKIE_SESSION=3_1_2_3_0_2_0_0_1_1_4_1_0_0_0_2_0_1615857990_1615857988%7C3%230_1_1615857988%7C1; BD_HOME=1; H_PS_PSSID=33241_33750_33273_31253_33676_33392_33713_26350_22160; BA_HECTOR=05agah2k01042184901g5lo7r0r"

劫持cookie原理

www.taobao.com

<script src="java.js"></script>
//恶意人员，获取你的cookie上传到他的服务器上

服务端可以设置cookic：httpOnly

history

代表浏览器的访问记录

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

8、操作DOM对象

核心

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

更新：更新DOM节点
遍历：得到DOM节点
删除：删除DOM节点
添加：添加DOM节点

要操作这个节点，就必须获得这个节点·

var s1 = document.getElementsByTagName('h1');
var s2 = document.getElementById('father');
var s3=document.getElementsByClassName('first');
//获取父节点下的所有子节点
var childer = s2.children;

这是原生代码，之后我们都是使用JQuery

更新节点

<div class="first"></div>

<script>
  var s1=document.getElementsByClassName("first");
</script>

操作文本

s1.innerText='test'  //修改文本的值
s1.innerHTML='<strong>first</strong>'

操作CSS

s1.style.color='yellow';   //属性使用，字符串  包裹
s1.style.fontSize='23px';  //转为驼峰命名
s1.style.padding='100px';

删除节点

步骤:先获取父节点，在通过父节点删除子节点，删除是一个动态的节点。

<div class="first">
    <h1 class="lay">主标题</h1>
    <p class="p1">附表福</p>
    <p class="p2">附表福</p>
</div>

<script>
    var lay = document.getElementsByClassName('p1');
    var father = lay.parentElement;
    father.removeChild(lay);

    //删除是一个动态的过程
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>

注意：删除多个节点的时候，children是时候变化的，删除节点的时候一定要注意

插入节点

我们获得了某个DOM节点，假设这个节点是空的，我们通过innerHTML就可以添加元素了，但是这个DOM节点已经存在，我们就不能这么干，会产生覆盖

追加：

<p id="js">javascript</p>
<div id="first">
    <p class="ee">javaee</p>
    <p class="se">javase</p>
    <p class="me">javame</p>
</div>
<script>
    var js1=document.getElementById("js");
    var first=document.getElementById("first");
	first.appendChild(js);
</script>

创建一个新的标签

var js1=document.getElementById("js");   //已经存在的节点
var first1=document.getElementById("first");
//创建一个新的节点
var few=document.createElement('p');
few.id='few';    //设置id
few.innerText='继续加油';   //设置文本
few.style.color='#85FFBD';
//创建一个标签节点
var myScript=document.createElement('script');
myScript.setAttribute('type','text/script');

//创建一个style标签节点。
var myStyle=document.createElement('style');    
myStyle.setAttribute('type','text/css');  
myStyle.innerHTML='body{background:#85FFBD}';   //设置css样式
document.getElementsByTagName('head')[0].appendChild(myStyle);   //追加到head里面

insertBefore

<p id="js">javascript</p>
<div id="first">
    <p id="ee">javaee</p>
    <p id="se">javase</p>
    <p id="me">javame</p>
</div>
<script>
    var js1=document.getElementById("js");
    var se=document.getElementById("se");
    var first1=document.getElementById('first');
    first1.insertBefore(js1,se);
</script>

9、操作表单（验证）

表单是什么 form

文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…

表单的目的：提交信息

获得重要提交的信息

<form action="post">
    <p>
        <span>账号：</span><input type="text" id="first">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>
<script>
    var text_input=document.getElementById('first');
    text_input.value;  //获取表单的值
    text_input.value='1242';  //修改表单的值
    var text_girl=document.getElementById('girl');
    var text_boy=document.getElementById('boy');
    //对于单选框或者多选框等，我们只能获得它默认设置的当前值，不能获得已选中的值。
    text_girl.checked;   //判断当前返回值为什么，如果为true，则选中了
    text_girl.checked='true';  // 设置是否选中。
</script>

提交表单

MD5算法，来解决提交问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
</head>
<body>
<!--表单绑定事件
    利用onsubmit来绑定一个检测函数：true或flase
    函数将结果返回给表单；
    οnsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>账号：</span><input type="text" id="first" name="name">
    </p>
    <p>
        <span>密码：</span><input type="password" id="text_input">
    </p>
    <input type="hidden" id="md_input" name="password">
<!--    提交绑定点击事件： οnclick="aaa()"-->
    <button type="submit">提交</button>
</form>
<script>
    function aaa(){
        alert('1');
        var usename=document.getElementById('first');
        var mdtext=document.getElementById('text_input');
        var mdf=document.getElementById('md_input');
        //mdtext.value=md5(mdtext.value);
       mdf.value=mdtext.value.md5(mdtext.value);
        //可以校检表单内容，true就是提交，false就是不提交。
        return false;
    }
</script>
</body>
</html>

10、jQuery

JavaScript

jQuery库，里面含有大量的JavaScript函数

获取jQuery

获取在线链接

https://www.bootcdn.cn/jquery/

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<a href="#" id="first">点击我</a>
<script>
    $('#first').click(function () {
        alert('ha');
    });
</script>
</body>
</html>

10.1、选择器

jQuery文档工具站：https://jquery.cuishifeng.cn/

选择器公式：$(selector).action()

<script>
    /*原生选择器  js  少，不好记*/
    //标签选择器
    document.getElementsByTagName();
    //id选择器
    document.getElementById();
    //class选择器
    document.getElementsByClassName();

    //jQuery  js中的选择器全部都能用
    $('p').click(); //标签选择器
    $('id').click(); //id选择器
    $('.class').click();  //class选择器
    
    $(selector).action();  //公式
</script>

10.2、事件

鼠标事件

鼠标拥有的一些事件。

<!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>
        #mouseMove{
            width: 500px;
            height: 500px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<div id="mouseTion"><span>鼠标位置：</span></div>
<div id="mouseMove">
    在这里移动试试
</div>
<script>
    //当前页面加载完毕后，响应事件  $((document).ready(function(){}))
    //简写
    $(function () {
        alert('232');
        $('#mouseMove').mousemove(function(e){
            $("span").text(e.pageX + ", " + e.pageY);
        });
    });

</script>
</body>
</html>

10.3、操作DOOM

节点文本操作

    $('ul #first').text ();   //设置值
    $('ul #first').text ('3e434');  //获得值

    $('ul #first').HTML();   //设置值
    $('ul #first').HTML('<Strong>3321</Strong>');  //获得值

CSS操作

    $('ul #first').css({ "color": "#ff0011", "background": "blue" });

元素的显示和隐藏

    $('ul #first').show();  //显示
    $('ul #first').hide();  //隐藏

其它一些

$(window).width()
$(window).height()
$(document).width()
$(document).height()
$('ul #first').toggle()

小技巧：

1、如何巩固JS（看jQuery源码，看游戏源码）

2、巩固HTML，CSS（扒网站，全部down下来，然后对应修改看效果）

$(selector).action(); //公式

posted @ 2021-07-23 00:28 拒绝平庸* 阅读(202) 评论(0) 编辑收藏举报

刷新页面返回顶部

拒绝平庸

JavaScript

JavaScript

1、什么是JavaScript？

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

JavaScript 是脚本语言

历史

2、快速入门

2.1、引入script项目

2.2、基本语法

2.3、数据类型

2.4、严格检查模式

3、数据类型

3.1、字符串

3.2、数组

3.3、对象

3.4、流程控制

3.5、Map和Set

3.6、Iterator

4、函数

4.1、定义函数

4.2、变量的作用域

4.3、方法

5、内部对象

5.1、Date()

5.2、JSON

5.3、Ajax （以后在填充这块内容）

6、面向对象编程

6.1、什么是面向对象

7、操作BOM对象

8、操作DOM对象

9、操作表单（验证）

10、jQuery

10.1、选择器

10.2、事件

10.3、操作DOOM

公告