JavaScript学习

1、什么是JavaScript

1.1、概述

JavaScript 是一门脚本语言

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

ECMAScript它可以理解为是JavaScript的一个标准

最新版本已经到 es6 版本

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

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

2、快速入门

2.1、引入JavaScript

1.内部标签6

	//备注
</script>

2.外部引入
abs.js

3.第一个JavaScript

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个JavaScript</title>
    <!-- script标签内，写JavaScript代码 -->
    <!--  内部标签  -->
<!--    <script>-->
<!--        alert('hello,world');-->
<!--    </script>-->

    <!--外部引入    -->
    <!--注意：script标签必须成对出现    -->
    <script src="js/dy.js"></script>

<!--  不用显示定义type，也默认就是 javascript  -->
    <script type="text/javascript"></script>
</head>
<body>

<!--这里也可以存放代码-->
</body>
</html>

2.2、基本语法入门

  // 1.定义变量 变量类型 变量名 = 变量值
    var score = 1;
    //alert(num);
    // 2.条件控制
    if(score>60 && score<70){
        alert("60~70")
    }else if(score>70 && score<80){
        alert("70~80")
    }else{alert("other")}
    
    /*
    console.log(score) 在浏览器的控制台打印变量！类似于System.out.println();
    
    */
</script>

console.log(）打印变量

浏览器必备调试须知

Elements：测试 HTML、CSS

Console（控制台）：测试 JavaScript，可以直接输入script，打印消息

Sources（源码）：可以断点测试

Network（网络）：发生网络请求

Application（应用）：外部数据库，存一些简单的数据保存到网页里面

2.3、数据类型

变量
var 王者荣耀 = “倔强青铜”；
number
js不区分小数和整数，Number

123 整数
123.1 浮点数123.1
1.123e3 科学计数法
-99 负数
NaN not a number
Infinity

字符串

布尔值

逻辑运算

|| 一个为真，结果为真
！ 真即假，假即真

比较运算符！！！

类似于 1 == “1”(true)
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果true）

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

须知

NaN===NaN，这个与所有的数值都不相等，包括它自己
只能通过isNaN(NaN)来判断这个数是否是 NaN
浮点数问题

尽量避免使用浮点数进行运算，存在精度问题

可以这么计算，得出数已经接近于0

null 和 undefined

null 空
undefined 未定义

数组

Java数组的数值必须是相同类型的对象，js中不需要这样！

var arr = [1,2,3,'hello',null,true]

new Array(1,12,4,'hello')

取数组下标：如果越界了，会提示 undefined（未定义）

对象

对象是大括号{}，数组是中括号[]

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

	var Person = {
        name:"sun",
        age:3,
        tags:['js','java','...']
    }

取对象值

Person.name “sun”

Person.age 3

2.4、严格检查规范

'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题

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

3、数据类型

3.1、字符串

正常字符串我们使用单引号（’ ‘），或者双引号（“ ”）包裹

注意转义字符 \

\ ’
\n
\t
\u4e2d \u#### Unicode字符
\x41 Ascll字符

多行字符串编写

//`` teb 上面 esc键下面 （~）var msg = `	hello	
world	
你好ya	
你好	`

模板字符串

let name = "sun";
let age = 3;
let msg = `你好呀，${name}`
//输出结果：你好呀，sun

字符串的长度和打印指定位置

str.length
console.log(student[0])

字符串的可变性：不可重新赋值

赋值：student[0] = 1
打印：console.log(student)
结果：student
0号位，未重新赋值

大小写转换

student.toUpperCase() //转换为大写
student.toLowerCase() //转换为小写

获取指定属性下标位置

student.indexOf(‘t’)
1

获取指定下标的属性

substring

输入：student.substring(1) // 指：包含1号位及之后的元素
输出：tudent
输入：student.substring(1，3) // 指：包含1号位及3号位之前的元素
输出：tu

3.2、数组

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

var arr = [1,2,3,4,5]； // 通过下标取值和赋值
arr[0];
arr[0] = 1;

长度
arr.length

注意：

JavaScript 数组长度可变，加入给 arr.length 赋值，数组大小就会发生变化
新加入的元素显示为 undefined 未定义
如果赋值过小，就会将多余的元素丢失
indexOf，通过元素获得下标索引

arr.indexof(2)
1

字符串的 “1” 和数字 1 是不同的

（当有相同数字时，它会返回第一个数字下标）

slice()

截取Array的一部分，返回一个新数组
类似于 student.substring(1)
[ ) 包含前面，不包含后面
push() 、pop() 尾部
.push()：压入到尾部
.pop() ：弹出尾部的一个元素
unshift()、shift() 头部
.unshift() ：压入到头部
.shift() ：弹出头部的一个元素
排序 sort()

(3) [“B”, “C”, “A”];
arr.sort()
(3) [“A”, “B”, “C”];

元素反转 reverse()

(3) [“A”, “B”, “C”];
arr.reverse()
(3) [“C”, “B”, “A”];

concat()

(3) [“C”, “B”, “A”];
arr.concat([1,2,3])
(6) [“C”, “B”, “A”, 1, 2, 3];
arr
(3) [“C”, “B”, “A”];

注意：

concat（）并没有修改数组，只是会返回一个新的数组

连接符 join

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

(3) [“C”, “B”, “A”];
arr.join(’-’)
“C-B-A”

多维数组

arr = [[1,2] , [3,4] , [“5” , “6”]];
arr[1][1]
4

数组：存储数据（如何存，如何取，方法都是可以自己实现）

3.3、对象

若干个键值对

var 对象名字 = {
    		属性名： 属性值，
       		属性名： 属性值，
            属性名： 属性值}
            //定义了一个person对象，它有四个值
            var person = {  
                name:sun", 
                age:3,
                email:"265437543@qq.com",    
                score:59}

Js中对象，{…}表示一个对象，键值对描述属性 XXXX : XXXX，多个属性之间使用逗号隔开，最后一个属性不加逗号！

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

对象赋值

person.name = “sun”
person.name
“sun”

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

person.haha
undefined

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

delete person.name
true
person //不在存现name属性

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

person.haha = “haha”
“haha”
person //已存在haha属性

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

‘age’ in person
true
//继承，JavaScript也可以继承父类属性
‘toString’ in person
true

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

person.hasOwnProperty(“toString”)
false
person.hasOwnProperty(“aeg”)
true

3.4、流程控制

if 判断

var age = 3;
if(age>10){		//第一判断
    		alert("hehe")
    }else if(age>3){	//第二判断
   		 alert("haha")
    }else{		//否者...    alert("kuwa~")}

while 循环，避免程序死循环

while(age<100){
      age = age + 1;
      console.log(age) 
      }
      do{
          age = age + 1;    
            console.log(age)
            }while(age<100)

for 循环

for(let i = 0; 1 < 100; i++){
    console.log(i)
    }

forEach 循环

ES5.1 引入

var age = [12,3,12,123,423,56,72];
//函数 == 方法
age.forEach(function(value)){
            console.log(value)
            }

for…in

//for(var index in object){}
for(var num in age){
    if(age.hasOwnProperty(num)){        
   	 	console.lg("存在")       
    	console.log(age[num])    
    }
  }

var arr = [3.4.5]
for(var x in arr){
        console.lg(x)     //只能遍历下标  
        }

of可以遍历数组

var arr = [3.4.5]
for(var x of arr){
        console.lg(x)     //可以遍历数组
        }

3.5、Map 和 Set

Map 和 Set 是ES6新特性

Map：

//学生的成绩，学生的名字
var map = new Map(['tom',100],['jack',90],['haha',80])
var name = map.get('tom');	//通过key获value
map.set('admin',123456);	//新增或修改
map.delete('tom');	//删除

Set：无序不重复的集合

set.add(2);		//添加
set.delete(1);	//删除
console.log(set.has(3))		//是否包含某个元素

3.6、iterator

ES6新特性

遍历数组
//通过for of / for in 是下标

var arr = [3.4.5];
for(var x of arr){
        console.lg(x)     
        }

遍历map

var map = new Map(['tom',100],['jack',90],['haha',80]);
for(let x of arr){
        console.lg(x)     //可以打印数值
        }

遍历set

var set = new set([5,6,7,8]);
for(let x of set){
    console.log(x)
    }

4、函数

4.1、定义函数

定义方式一

绝对值函数

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

一旦执行到 return 代表函数结束，返回结果！

如果没有执行 return，函数执行完也会返回结果，结果就是 undefined

定义方式二

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

function(x){…}类似于一个匿名函数。但是可以把结果赋值给 abs

通过 abs 就可以调用函数

方式一和方式二等价

结果：

10abs(-10)		//返回10

调用函数

参数问题：javaScipt 可以传任意个参数（只返回第一个），也可以不传参数（返回undefined）

假设不存在参数，如何规避？

		//手动抛出异常来判断
		if(typeof x!== 'number'){        
		throw 'Not a Number'  
	}    
		if(x>=0){
		        return x;    
		}else{
		        return -x;
		 }
	}

手动抛出异常

arguments

是一个JS免费赠送的一个关键字;

代表，将传递进来的所有的参数，转变成一个数组

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

rest

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

以前：需要使用for循环才能获得定义参数之外的参数

   for(var i = 2;i<arguments.lenth;i++){
   }
}

新特性：

  console.log("a=>"+a)
  console.log("b=>"+b)
  console.log(rest)
}

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

4.2、变量的作用域

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

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

    var x = 1;	//局部变量
    x = x +1;
}
x = x + 2;	//不可使用
//异常：Uncaught ReferenceError: x is not defined

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

function sun(){
    var x = 1;
    function q2(){
    var y = x + 1;	//2
   }
    var z = y + 1;	//异常：Uncaught ReferenceError: y is not defined
}

假设，内部函数变量和外部函数的变量，重名

function sun(){
    var x = 1;
    function q2(){
    var x = 'A';
        console.log('inner'+x);		//innerA
   }
    console.log('outer'+x);		//outer1
    qj2()
}
sun()

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

提升变量的作用域

function sun(){
    var x = "x" + y;
    console.log(x);
    var y = 'y';
}

结果：xundefined (y = undefined)
说明：js 执行引擎，自动提升了 y 的声明，但是不会提升变量 y 的赋值

function sun(){
    var y, x, z....
    
    var x = "x" + y;
    console.log(x);
    var y = 'y';
}

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

function sun2(){
    var x = 1,
        y = x + 1,
        z,i,a;	//提前定义
    //之后使用
    
    //当想使用新变量时，再回到首部定义
    	a = 5;
}

全局函数
//全局变量

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

全局对象 window

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

**alert()**这个函数本身也是一个 window 变量

var x = 'xxx';

window.alert(x);

var old_alert = window.alert;

//olid_alert(x);
window.alert = function(){
    
};
// 重写后 alert() 失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

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

规范

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

//唯一全局变量

var sunApp = {};	

//定义全局变量
sunApp.name = "sun";
sunApp.add = function(a,b){
    return a + b;
}

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

jQuery

局部作用域 let

function aaa(){
    for(var i = 0;i < 100; i++){
        console.log(i)
    }
    console.log(i+1);	//i 出了这个作用域还可以使用
}

ES6 let 关键字，解决局部作用域冲突问题

function aaa(){
    for(let i = 0;i < 100; i++){	//var 改成 let
        console.log(i)
    }
    console.log(i+1);	//Uncaught ReferenceError: i is not defined
}

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

常量 const

在 ES6 之前定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值

var PI = '3.14';

console.log(PT);
pt = '213';	//实际上是可以改变这个值，这样就无法彻底保证安全
console.log(PT);

4.3、方法

定义方法

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

    name:'sun'，
    bitch:2000,
    //方法
    age:function(){
        //今年-出生的年
        var now = new Date().getFullYear();
        return now - this.bitch;
    }
}
//属性
sun.name
//方法，一定要带（）
sun.age()

this. 指向调用它的人

function getAge(){
    //今年-出生的年
        var now = new Date().getFullYear();
        return now - this.bitch;
}
varsun = {
    name:'sun'，
    bitch:2000,
    //方法
    age:getAge
}

//	sun.age()	ok
//	getAge() NaN	因为调用它的是window，this. 指向调用它的人，没有this.bitch

Java里 this 是无法指向的，是默认指向调用它的那个对象；

apply

在 js 中可以控制指向

    //今年-出生的年
        var now = new Date().getFullYear();
        return now - this.bitch;
}
var sun = {
    name:'sun'，
    bitch:2000,
    //方法
    age:getAge
}

//sun.age()	ok
	getAge.apply(sun,[]);	//this,指向了sun， 参数为空

5、内部对象

标准对象

typeof 123
"number"
typeof ‘123’
"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();	//现在时间
now.getFullyear();	//年
now.getMonth();	//月	外国月份是 0~11月
now.getDate();	//日
now.getDay();	//星期几
now.getHours();	//时
now.getMinutes();	//分
now.getSeconds();	//秒

now.getTime();	//时间戳 全世界统一 是从1970 1.1 0:00:00 开始按毫秒计算

console.log(new Date(1620091399656))	//时间戳转为时间

转换

now = new Date(1620091399656);
Tue May 04 2021 09:21:22 GMT+0800 (中国标准时间)
new.toLocaleString	//注意，调用是一个方法，不是一个属性！
ƒ toLocaleString() { [native code] }
now.toLocaleString()
"2020/1/4 上午10：49:35"
now.toGMTString()
"Sat,04 Jan 2020 02:49:35 GMT"

5.2、JSON

什么是json

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

JSON（JavaScript Object Notation , JS 对象简谱）是一种轻量级的数据交换格式
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
在 JavaScript 一切皆为对象，任何 js 支持的类型都可以用 JSON 来表示；number , string…

格式

对象都用 {}
数组都用 []
所有的键值对都是用 key:value
JSON 字符串和 js 对象的转化

var user = {
    name:"Sun",
    age:3,
    sex:'男'
}

//对象转化为 json 字符串{"name":"Sun","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);

//json 字符串转化为对象，参数为 json 字符串
var obj = JSON.parse('{"name":"Sun","age":3,"sex":"男"}')；

JSON 和 JS 对象的区别

var obj = {a:"hello",b:"hellob"};	//对象
var json ='{"a":"hello","b":"hellob"}'		//字符串

5.3、Ajax（了解）

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

6、面向对象编程

6.1、原型对象

javascript、java、c#…面向对象；javascript有些区别！

类：模板原型对象
对象：具体的实例
在JavaScript这个需要大家换一个思维方式

原型proto

var Student = {
    name : "Sun",
    age : 3,
    run : function(){
        console.log(this.name + "run...");
    }
};

var xiaoming = {
    name : "xiaoming"
};

//原型对象 
xiaoming.__proto__ = Student;
//小明获得了Student的属性

var bird = {
    fly: function(){
        console.log(this.name + "rfly...");
    }
};

//小明的原型 是bird
xiaoming.__proto__ = bird;

6.2、class 继承

class关键字，是在ES6引入的

旧方法

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

//给student 新增一个方法
Student.prototype.hello = function(){
    alert('Hello')
};

1、定义一个类，属性，方法
//定义一个学生的类

class Student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('Hello');
    }
}

var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello()

2、继承

//定义一个学生的类
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",1);

本质：查看对象原型

本质还是__proto__:Student

6.3、原型链

__proto__
任何类都会指向Object.prototype，Object.prototype会指向Object，同时Object类也会指向Object.prototype循环，所以查找属性的时候查到Object.prototype就可以停止查找了。

7、操作BOM对象（重点）

7.1、浏览器介绍

JavaScript 和浏览器关系？

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

BOM：浏览器对象模型

IE 6~11
Chrome
Safari
FireFox
三方：可以切换浏览器内核
QQ浏览器
360浏览器
7.2、Window

window 代表：浏览器窗口

window.alert(1) //弹窗
undefined
window.innerHeight
804
window.innerWidth
844
window.outerHeight
804
window.outerWidth
1399
//大家可以调整浏览器窗口试验

7.3、Navigator

Navigator，封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3861.400 QQBrowser/10.7.4313.400"
navigator.userAgent
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3861.400 QQBrowser/10.7.4313.400"
navigator.platform
"Win32"

大多数时候，我们不会使用navigator对象，因为会被认为修改
不建议使用这些属性来判断和编写代码

7.4、screen

代表屏幕的尺寸

screen.width
1600 px
screen.height
900 px
7.5、location (重要)

location 代表当前页面的URL信息

host: "www.baidu.com"
hostname: "www.baidu.com"
protocol: "https:"
reload: ƒ reload()
location.reload()	//刷新网页
//设置新的地址
locationassign('https://kuangstudy.com/')

7.6、document

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

//更改抬头文字
document.title
“百度一下，你就知道”
document.title = ‘一起学js’
“js”

能获取具体的文档树节点

<dl id ="app">
	<dt>Java</dt>
	<dd>JavaSE</dd>
	<dd>JavaEE</dd>    
</dl>

<script>
	var dl = document.getElementById('app');
</script>

获取 cookie
document.cookie
"PSTM=1598793731; BAIDUID=05288B20C161E056233412EAFE3BB269:FG=1; BIDUPSID=7A2..."
劫持 cookie 原理

< script src="aa.js" >< /script >

<!--恶意人员：获取你的cookie 上传到他的服务器-->

服务器可以设置 cookie : httpOnly 这样就安全了

7.7、history（不建议使用）

history代表浏览器的历史记录

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

8、操作DOM对象（重点）

8.1、核心

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

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点

8.2、获得Dom节点

var h1 = document.getElementsByTagName('h1');	//标题
var p1 = document.getElementById('p1');		//ID
var p2 = document.getElementsByClassName('p2')；	//class
var father = document.getElementById('father');	

var childrens = father.children[index];	//获取父节点下的所有子节点
// father.firstChild
// father.lastChild

这是原生代码，之后我们尽量都是用jQuery()；

8.3、更新节点

<div id="id1">

</div>

<script>
    var id1 = document.getElementById('id1');
</script>

操作文本

id1innerText='456' 修改文本的值
id1innerHTML='<strong>123</strong>' 可以解析HTML文本标签
操作css

id1.style.color = 'yellow';		//属性使用 字符串 包裹
id1.style.fontSize = '20px';	// - 转 驼峰命名问题
id1.style.padding = '2em'

8.4、删除节点

**删除节点的步骤：**先获取父节点，在通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
	var self = document.getElementById('p1');	//得到需要删除的元素
    var father = self.parentElement;	//通过子元素获得父元素
    father.removeChild(self)	//通过父类，删除子元素
    
    //删除是一个动态的过程
    father.removeChild(father.children[0]);		//father.children[0] 从父类的下标获取子类
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
    
     
</script>

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

8.5、插入节点

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

<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');		//获取id=js的元素
    var list = document.getElementById('list');	//获取id=list的元素
    
    list.appendChild(js);	//追加到后面
    //只能id追加，class不能追加
</script>

创建一个新的标签，实现插入

	var js = document.getElementById('js');		
    var list = document.getElementById('list');	
    
    //通过JS 创建一个新的节点
    var newP = document.createElement('p');	//创建一个p标签
    newP.id = 'newP';	//创建id
    newP.innerText = 'Hello,world';	//设置文本内容
    
    list.appendChild(newP);	
    
</script>

另外一种写法

<script>
	var myScript = document.createElement('script');	//创建一个标签
    myScript.setAttribute('type','text/javascript');	//同时创建标识和内容
</script>

插入颜色内容

创建style标签，加入html内容，将style添加到head[0]下标下

<script>
//可以创建一个style标签
var myStyle = document.createElement('style');  //创建了一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:chartreuse;}';   //设置HTML标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);
//获取head标签，由于返回的是数组需要表示下标位，并添加内容
</script>>

直接body内加入颜色

    //直接获取body
var body = document.getElementsByTagName('body');
    //注意获得的是个数组，[0]为body
body[0].style.backgroundColor='red';
</script>

注意获取的是个数组

insertBefore 之前插入

var js = document.getElementById('js')	//准备插入的点
var list = document.getElementById('ee')	//父节点
//要包含的节点.insertBefore(newNode,targetNode)
list.inserBefore(js.ee);

9、操作表单（验证）

表单：form DOM 树


下拉框 < select >

单选框 radio

多选框 checkbox

隐藏框 hidden

密码框 password

…

表单的目的：提交信息

9.1、获得要提交的信息

输入框

	<p>
    span>用户名：</span><input type="text" id="username">
    </p>    
</form>
<script>
	var input_text= document.getElementById('username')
	input_text.value	//得到输入框的值
    input_text.value = '123'	//修改输入的值
</script>

单选框、多选框

    
    <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 boy_radio= document.getElementById('boy')
    var girl_radio= document.getElementById('girl')
    
    // boy_radio.value	
	//"man"		
    //对于单选框，多选框等固定的值,value只能取到当前的值
    
    //查看返回的结果，可是使用checked判断
    boy_radio.checked；	//查看返回结果，true为选中，false为未选中
    boy_radio.checked = true;	//赋值可以更改结果
    
</script>

提交表单

MD5加密密码
按键提交

<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
    <!--  MD5 工具类  -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span> <input type="password" id="password" name="password">
    </p>
    <!-- 按钮 绑定事件， onclick 被点击 -->
    <button type="submit" onclick="aaa()">提交</button>
</form>
<script>
    //声明一个函数
    function aaa() {
        var uname = document.getElementById('username');    //获取id值
        var pwd = document.getElementById('password');
        console.log(uname.value);   //打印这个值
        console.log(pwd.value);

        //pwd.value = '***'     获取的值变为*** 

        //MD5 算法 密码转换
        pwd.value = md5(pwd.value);
        
        
    }
</script>
</body>
</html>

表单提交

οnsubmit= 绑定一个提交检测的函数， true false
将这个结果返回给表单，使用onsubmit 接收
οnsubmit=“return aaa()”

<!--表单绑定提交
οnsubmit= 绑定一个提交检测的函数， true false
将这个结果返回给表单，使用onsubmit 接收
οnsubmit="return aaa()"
-->
<form action="http://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span> <input type="text" 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">提交</button>
</form>
<script>

    function aaa() {
        var uname = document.getElementById('username');    //获取值
        var pwd = document.getElementById('input_password');
        var md5pwd = document.getElementById('md5_password');
        pwd.value = md5(pwd.value); // 密码提交瞬间变化,前段密保

        md5pwd.value = md5(pwd.value);      //将获得的密码，导入隐藏域中
        
        alert(1);
        //可以进行判断，效验表单内容，true通过，false 阻止提交
        return true;
    }
</script>
</body>

10、jQuery

jQuery学习网

jQuery.cuishifeng.cn

jQuery库，里面存在大量的javascript函数

10.1、获取jQuery

下载 jQuery

官网：https://jquery.com/
编译版.min.js（压缩版）
开发版.js
导入IDEA使用

CDN jQuery

在线的连接，更方便

<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <!-- jQuery在线连接 <script src="https://....."></script>-->
    <!-- jQuery文件导入 <script src="***/****.js"></script>  -->
</head>
<body>
    <a href="" id="test-jquery">点我</a>
    <script>
        
        //选择器就是css的选择器
        $('#test-jquery').click(function(){
            alert('hello.jQuery')
        })
    </script>
</body>
</html>

公式：

$(selector选择器).action(动作)

10.2、选择器

<script>
    //原js，选择器少，麻烦不好记
    //标签选择器
    document.getElementsByTagName();
    //ID选择器
    document.getElementById();
    //类选择器
    document.getElementsByClassName();

    //jQuery  css中的选择器它全部都能用
    $('p').click(); //标签选择器
    $('#id名').click(); //id选择器
    $('.class名').click(); //class选择器

</script>
</body>

其他选择器，都可以在开发工具站学习：https://jquery.cuishifeng.cn

10.3、事件

鼠标事件，键盘事件，其他事件

鼠标事件

mousedown() 按下
mousemove() 移动
mouse…（）

<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:500px;
        height:500px;
        border:1px solid red;
        }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
<!--坐标显示-->
mouse<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    //当网页元素加载完毕之后，响应事件
    //$(document).ready(function(){})  页面载入事件（ 默认简化成下面）
    $(function(){       //网页加载完毕后动作
        $('#divMove').mousemove(function(e){        //选择器#mouseMove 鼠标移动  e
        $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)})     //#mouseMove 文本 鼠标xy坐标
    })

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

操作DOM

节点文本操作

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

css的操作
$('#test-u li[name=python]').css({"color","red"});
元素的显示和隐藏：本质display : none

$('#test-u li[name=python]').show();	//显示
$('#test-u li[name=python]').hide();	//隐藏
$('#test-u li[name=python]').toggle();	//切换

娱乐测试

$(window).width()
$(window).height()

posted @ 2022-03-12 20:59 秃头星人阅读(62) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

秃头星人

努力是奇迹的另一个名字