JavaScript——JavaScript学习总记

学习地址


P2 基本使用及Helloworld

创建HTML文件,代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--script代码写在script标签里,script可以写在head和body标签里面-->
    <script>
        alert('hello,world'); //弹窗显示hello,world
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

JavaScript文件方式导入

在这里插入图片描述

JavaScript代码

alert('hello,world');

HTML导入包代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/js导入.js"></script>

</body>
</html>

P3 浏览器控制台使用

在这里插入图片描述

代码

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

    // JavaScript严格区分大小写

    // 1.定义变量
    //          1)变量类型    变量名 = 变量值;
    var num = 1;// 变量类型都是 var ,当赋值为数字,则为数字类型
    var name = "ha";// 当赋值为字符串时候就是字符串类型,可以说没有变量类型的说法
    //alert(name);// 以弹窗的形式打印 name 值(弹窗显示ha)


    // 2.条件控制
    var score = 65;
    if (score<60){
        alert("小于60")
    }else if (score>60 && score<70) {
        alert("60~70")
    }else {
        alert("大于70")
    }
    // (弹窗显示60~70)

    //console.log(score);// 在控制台打印(Console中打印) score 

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

P4 数据类型快速浏览

数据的类型有:数值、文本、图形、音频、视频··· ···

number:JavaScript不区分小数和整数
NaN:不是数字
Infinity:表示无限大的数字,计算机承载不了了显示


字符串:JavaScript字符串和java是一样的


布尔值:true,false


逻辑运算符&& 与运算、|| 或运算、 非运算


比较运算符= 赋值运算符、== 等于(类型不一样,值一样,也会 为true)、=== 绝对等于(要求类型和值都一样才会判断为true)。注意一:NaN=== NaN判断为false,要想知道是不是NaN需要通过方法isNaN()判断。注意二:1/3===(1-2/3)返回为fales,精度丢失问题,尽量避免浮点数运算,如果需要则采用Math.abs(1/3===(1-2/3))<0.0000001


null 和undefined:null空、nudefined:未定义


数组:Java数组值必须是相同类型的对象,JavaScript可以类型不同。如:var arr = [1,2,3, null,tuer,‘hello’],数组也可以这样写 new Array(1,2,3, null,tuer,‘hello’)


对象:var 对象名 = {内容}。例:var s = {name:“ha”,age:2,tags:[1,2,3, null,tuer,‘hello’]} 取值方法为 s.name 返回为 ha 。

P5 严格检查模式strict

将类型改为局部变量,则是将var改为let,为了判断不好的写法,在javaScript的第一行写 ‘use strict’

P6 字符串类型详解

1. 字符串单引号、双引号、换行、TAB等采用转译符号,跟Java一样。


2. 多行字符串编写采用var a = ` 内容 ` 方法去写,一个字符串占用一行。


3. 字符串连接方法。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<script>
   'use strict';
   let name= "ha";
 let msg= `你好${name}`;
console.log(msg)
</script>
</body>
</html>

4. 字符串长度:字符串名.length


5. 大小写转换:字符串名.toUpperCase() 转为大写、字符串名.toLowerCase()转为小写


6. 获取指定字符串的下标:字符串名.indexOf(‘字符串某一个元素’)


7. 字符串截取:字符串名.substring(数字),从数字下标开始截取到结束。字符串.subtring(开始下标,结束下标),截取方式为前闭后开(开始下标截取到结束下标的前一个)

P7 数组类型详解

Array可以包含任意数据类型

1.长度:字符串不可以用下标方法改数据

var arr = [1,2,3,4]
arr[0]=0;// 帮小标为0的数据1,改为了数据0,结果arr=[0,2,3,4]
arr.length=10;// 随让帮arr多大长度改变为10了,但是5~10都为空(undefined)
arr.length=2;// 长度为2后,后面的数据被丢失

2. indexOf()获取下标索引

arr = [1,2,3,4,5,6,7];
arr.indexOf(2);//获得arr的元素2得到下标索引为1
arr = [1,2,3,4,"1","2"];
arr.indexOf(2);//得到arr  2元素的下标为 1
arr.indexOf("2"); // 得到下标arr  “2”元素的下标为5

3. slice() 截取array的部分,返回一个新的数组

arr =  [1,2,3,4,"1","2"];
arr.slice(3); // 返回新数组 [4,"1","2"]

4. push和pop:从尾部压入和弹出元素

arr = [1,2,3,4,"1","2"];
arr.push("a","b"); // 得到 arr =  [1,2,3,4,"1","2","a","b"]; 从后面添加了元素
arr.pop(); // 得到 arr =  [1,2,3,4,"1","2","a"] ,从后面弹出一个元素
// arr.length 都跟着变了

5.unshift和shift:从数组前面压入和弹出元素

arr = [1,2,3,4,"1","2"];
arr.unshift("a","b"); // 得到arr = ["a","b",1,2,3,4,"1","2"]; 头部压入了元素
arr.shift();// 得到arr = ["b",1,2,3,4,"1","2"]; 头部弹出了一个元素

6. sort :排序

arr = [2,3,1]; // 注意字母也可以排序
arr.sort();// 得到arr = [1,2,3];

7.reverse 元素反转

arr = [1,2,3,4,5,6]
arr.reverse(); // 得到 arr = [6,5,4,3,2,1];

8. concat帮元素添加到尾部形成一个新的数组,原来的不变

arr = ["a","b","c"]
arr.concat([1,2,3]); // 得到一个新数组 ["a","b","c",1,2,3];
console.log(arr); // 看出arr还是等于["a","b","c"]

9. join 数组通过字符串连接

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<script>
   'use strict'
   let arr = [1,2,3,4,5]
   alert(arr.join('+')) // 弹窗显示 1+2+3+4+5
</script>
</body>
</html>

10.多维数:多维数组和Java是一样的
arr = [[1,2],[3,4],[“a”,“b”]]
arr[2][2]=“b”


P8 对象类型详解

对象的格式

var 对象名 = {
	属性名:属性值,
	属性名:属性值,
	属性名:属性值,
	··· ··· 
	属性名:属性值    // 最后一个不用逗号
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    let person = {
        name: 'ha',
        age: 3,
        email: '1103349536@qq.com',
        score: 99,
    };
    alert(person.name)// 警告窗显示ha
    alert(person.score)// 警告窗显示99
    
 
    // 一、name赋值方法
    person.name = 'koko' 
    alert(person.name) // 弹窗显示koko


    // 二、使用一个不存在的对象属性,不会报错,返回undfined
    console.log(person.password );//返回undfined

     
    // 三、delete 动态情况下删除属性
    console.log(person.name);//返回结果true, person的属性变为{age: 3,email: '1103349536@qq.com'score: 99,};
    

    // 四、动态的添加属性
    person.name='haha' // person属性变为{age: 3,email: '1103349536@qq.com'score: 99,name:'haha'};

    // 五、判断属性是否在对象中
    'age' in person // 返回为true 
    'toString' in person // 返回为true 原因是继承


    // 六、判断一个属性是否是这个对象自身拥有。hasOwnProperty()
    person.hasOwnProperty('toString') //返回为false
    person.hasOwnProperty('age')//返回为true
</script>
</body>
</html>

P9 分支和循环详解

流程控制

一、if判断

var age = 3;
if (age<3){ //第一个判断
	alert("小于3")
}else if(age>3){//第二个判断
	alert('大于3')
}else{//第三个判断
	alert('等于3')
}

二、while循环

var age = 1;
while(age<100){
	age = age+1;
}
console.log(age); //返回100

三、for循环

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

四、forEach循环

var age = [1,2,3,4,5,6,7]
age.forEach(function(value){
	console.log(value)
})

五、for_in 循环

var age = [1,2,3,4,5,6,7,8]
for(var num in age){
	if(age.hasOwnProperty(num)){
		console.log('存在')
		console.log(age[num])
	}
}

P10 Map和Set集合

  这两个是ES6才出来的新特性,现在IDAE中输入new Map()和new Set()看是否会报错,确定自己ES版本是否满足。

一、Map集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    let map = new Map([['tom',100],['jack',99],['tim',98]]);
    let name = map.get('tom');// 通过key获得value
    map.set('hermione',101);// 通过set 给map添加或者修改元素
    map.delete('jack');// 通过delete删除key来删除想删除的元素
    console.log(name); // 返回 100
</script>
</body>
</html>

二、Set集合: set是无序不重复集合

set.add()    //添加元素
set.delete() // 删除元素
set.has()  // 判断元素是否包含

P11 Iterable迭代和下周安排

for_in

'use strict'
var arr = [3,4,5];
for(let x in arr){
console.log(x); // 打印的是下标
}

for_of

var arr = [3,4,5];
for (let x of arr ){
console.log(x); // 遍历值(注意:这是ES6出来的新特性)该特性map,set都可以遍历
}

var map = new Map([["tom",100],["jeck",90],["tim",80]])
for (var y of map){
console.log(y); //遍历map
}

var set = new Set([3,4,5])
for (var z of set){
console.log(z); //遍历set
}

P12 函数的定义和参数获取

定义方式一: 绝对值函数

function abs(x){
	if(x>=0){
		return x;
	}else{
		return -x;
	}
}
console.log(abs(-10)); // 返回了10

在这里插入图片描述

一但执行return,则方法结束,返回一个结果,如果没有执行return,返回结果为NaN


定义方式二:

var abs = function(x){
if(x>=0){
		return x;
	}else{
		return -x;
	}
}
console.log(abs(-10)); // 返回了10

手动抛出异常的写法

if(typeof x!== 'number'){
	throw 'Not a Number';
}

  该语句意思是再x不等于number的时候会返回一个错误,返回Not a Number


arguments:代表传递进来的所有参数是一个数组。常用的是下面的rest


rest:ES6引入的新特性,rest必须写再最后面,并且前面要…表实

function asd(a,b,c,...rest){
	console.log(a);
	console.log(b);
	console.log(c);
	console.log(rest); //传递进来的自动变为数组(因为abc被用过了所以没有被传递进来了),被中括号抱起来,
}

P13 变量的作用域、let、const详解

1、变量的作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function f() {
        var x=1;
        x=x+1;
    }
    x=x+2;//Uncaught ReferenceError: x is not defined
</script>
</body>
</html>

  说明了,再JavaScript中,var定义变量是有作用域的,假如再函数中声明的,则再函数外不能使用

注意一: 同一变量两个方法的使用问题

function f1() {
     var x=1;
     x=x+1;
}
function f2() {
       var x=1;
       x=x+1;
}

两个方法内部变量互相不影响


注意二: 两个叠加方法内外部调用问题

function f1() {
           var x=1;
           function f2() {
     		var y=x+1;
           }
   	        var z = y+1;//Uncaught ReferenceError: y is not defined
}

内部函数可以调用外部函数声明的变量,但是外部函数不可以调用内部声明的函数


注意三: 两个叠加方法用同一个名字声明问题

function f1(){
	var x=1;
	function f2(){
		var x='A';
		console.log('inner'+x);
	}
	console.log('outer'+x);
	f2(); // 第二个执行,返回结果为innerA
}
f1(); // 先执行了这个结果为 outer1

同名变量互不影响,函数变量是由‘内’向‘外’查找,如果外部出现了内部相同名字的变量,则会自动屏蔽外部的变量。


注意四:

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

返回结果为xundefined,说明了由于引擎的问题,console.log(x);没有执行y的赋值,所以要帮y赋值写再前面


2、全局函数

全局变量

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

3、全局对象

var x=‘xxx’;
alert(x);
alert(window.x);// 返回结果相同,说明全局变量会自动绑定在window对象下

在alert前面加window对象,发现alert也是在window下面的一个变量

4、规范
由于我们所用的全局变量都绑定到为我们的window上。如果不同JavaScript文件,使用了相同的变量就会发生冲突,为了尽量减少冲突采用下面方法

//定义一个唯一的全局变量
var bsApp = {}//定义全局变量
bsApp.name = 'beishan';
bsApp.add = function(a,b){
	return a+b;
} 
//目的就是将自己的东西变唯一,并且放入自己创建的唯一空间里面

5、局部作用域

function f(){
	for(var i = 0;i < 100 ; i++){
		console.log(i)
	}
	console.log(i); // 出现问题!当 i 出了for的作用域却还能使用
} 

ES6 添加了let关键字,解决局部作用域冲突问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    function f() {
        for (let i = 0; i < 100; i++) {
            console.log(i);
        }
        console.log(i+'外部');//Uncaught ReferenceError: i is not defined
    }
</script>
</body>
</html>

所以建议使用let定义局部作用域变量,少用或者不要用var定义

6、常量const
ES6之前在全部大写字母命名的变量尽量不要修改

var PI='3.1415'
console.log(PI);
PI='123';
console(PI);//发现这个PI被修改了

在ES6 引入了const

const PI = '3.14';
PI = '123'; // PI发现报错

P14 方法的定义和调用、apply

1、方法: 方法就算把函数放在对象里面,对象只有两个东西:属性和方法

var xue = {
	name: 'xuezhe',
	bitrh:2019,
	
	//方法
	age: function(){
		//获取当前日期-出身日期=年龄
		var now = new Date().getFullYear(); // 获取当前年份
		return now-this.bitrh;
	}
}
xue.name;//属性
xue.age();//方法要带()

this.代表什么?拆开上面的代码,拆开方法

function getAge(){
		//获取当前日期-出身日期=年龄
		var now = new Date().getFullYear(); // 获取当前年份
		return now-this.bitrh;
}
var xue = {
	name: 'xuezhe',
	bitrh:2019,
	age: getAge
}
xue.age(); // 可以使用,返回正常
getAge(); // 返回NaN,说明在window上没有bitrh

this是无法指向的,是默认指向调用它的那个对象的


2、apply: 在js中可以控制this的调用

function getAge(){
		//获取当前日期-出身日期=年龄
		var now = new Date().getFullYear(); // 获取当前年份
		return now-this.bitrh;
}
var xue = {
	name: 'xuezhe',
	bitrh:2019,
	age: getAge
}
getAge.apply(xue,[]);// this指向xue,参数为空

P15 Date日期对象

内部对象

1、标准对象

typeof 123; //返回 "number"
typeof NaN;//返回 "number"
typeof "123";//返回 "string"
typeof true; //返回 "boolean"
typeof []; //返回 "object"
typeof{};//返回 "object"
typeof Math.abs;//返回 "function"
typeof undefined;//返回 "undefined"

2、Date

var now = new Date(); // 返回——>Wed Oct 21 2020 14:57:11 GMT+0800 (中国标准时间) {}
now.getFullYear(); // 返回——>年
now.getMonth(); // 返回——>月,月份是0~11
now.getDate(); // 返回——>日
now.getDay(); // 返回——>星期几
now.getHours(); // 返回——>时
now.getMinutes(); // 返回——>分
now.getSeconfs(); // 返回——>秒

now.getTime(); // 返回——>时间戳
console.log(new Date(1603263840134)); // 返回——>时间返回——>Wed Oct 21 2020 14:57:11 GMT+0800 (中国标准时间) {}
now.LocleString(); // 返回——>时间

P16 JSON对象

早期,所有数据传输都比较习惯使用XML文件!

1、什么是JSON?了解JOSN点击这里

在JavaScript中一切皆为对象,任何js支持的类型都是可以用JSON来表实;
格式:

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

2、JSON字符串和JS对象的转换

// JS对象
var user = {
	name: 'tim',
	age: 4,
	sex: '男'
}

//对象转换成JSON字符串
var jsonUser = JSON.stringify(user);
console.log(jsonUser);//返回——>{"name":"tim","age":4,"sex":"男"}

//JSON字符串转换为对象
console.log(JSON.parse('{"name":"tim","age":4,"sex":"男"}'));

P17 面向对象原型继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    let student = {
        name:"tim",
        age: 11,
        run: function () {
            console.log(this.name+"在跑")
        }
    };
    let jack={
        name:'jack'
    };
    jack.__proto__=student;
    jack.run();
</script>
</body>
</html>

function Student(name){
	this.name = name;
}
//给Student新增加一个方法
Student.prototype.hello = function(){
	alert('hello')
};
//该方法是ES6之前添加的方法,下面P18是ES6的新方法

对于原型,可以看成java中父类,但是又有区别。

P18 *面向对象class继承

1、class
  calss关键字,是在ES6引入的

//定义一个类、属性、方法并且使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    class student{
        constructor(name){//构造器
            this.name = name;
        }
        hello(){
            alert('hello');
        }
    }
    let xiaoming = new student('小明');
    let xiaohong = new student('小红');
    console.log(xiaoming.name);
    console.log(xiaohong.name);
    xiaoming.hello();
</script>
</body>
</html>

2、继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    class student{
        constructor(name){//构造器
            this.name = name;
        }
        hello(){
            alert('hello');
        }
    }
    class PrimaryStudent extends student{
        constructor(name,grade){
            super(name);
            this.grede = grade;
        }
        myGrade(){
            alert('我是小学生');
        }
    }
    let xiaoming = new student('小明');
    let xiaohong = new PrimaryStudent('小红',100);
    console.log(xiaoming.name);
    console.log(xiaohong.name);
    xiaoming.hello();
</script>
</body>
</html>

在这里插入图片描述
3、原型链
这个为面试内容,了解即可
理解该链接的图就行了

P19 操作BOM对象

BOM(浏览器 对象 模型)。
浏览器模型:

  • IE 浏览器
  • Chrome 谷歌浏览器
  • Safari 苹果浏览器
  • FireFox 火狐浏览器
  • Opera 欧朋浏览器(用得少)

这些都是内核浏览器


三方浏览器:

  • QQ浏览器
  • 360浏览器
  • ··· ···

1、window
window代表浏览器窗口


2、Navigator
封装了浏览器的信息


3、screen
获取屏幕信息

screen.width  // 获取屏幕的宽
screen.height  //获取屏幕的高

4、location
当前页面URL信息
在这里插入图片描述


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


document.title // 获取当前页面的标签
document.title = ‘s’ //修改当前页面标签为s


获取具体的文档树节点

<dl id="app">
	<dt> java</dt>
	<dd>javase</dd>
	<dd>javaee</dd>
</dl>
<script>
	var dl = docunment.getElementById('app');//获取id名字app的
</script>

获取cookie
document.cookie


history
浏览器的历史记录
history.back() //网页后退
history.forward() //网页前进

P20 获取DOM节点

学习核心

浏览器网页就算一个DOM树形结构,我们需要做的是:

  • 更新DOM节点
  • 遍历DOM节点
  • 删除DOM节点
  • 添加DOM节点

操作一个DOM节点就必须获得这个DOM节点

1、获得DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="P2">P2</p>
</div>
<script>
    'use strict'
    //对应css选择器
    let h1 = document.getElementsByName('h1');//获取h1
    let p1 = document.getElementById('p1');//获取id为p1
    let p2 = document.getElementsByClassName('p2');//获取class为p2的
    let father = document.getElementById('father');//获取id为father
    let c = father.children;//获取父类下面所有子节点
</script>
</body>
</html>

P21 更新DOM节点

1、操作文本
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="name">p1</div>
<script>
    'use strict'
    let name = document.getElementById('name');

    var int = self.setInterval('clock()',3000);//定时器
    function clock(){
        name.innerText='被修改了';//三秒后将’p1‘改为了’被修改了‘
    }
</script>
</body>
</html>
//解析文本标签
name.innerHTML='<strong>被修改了</strong>'//被修改了被加粗
2、操作css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--创建一个div-->
<div id="id1"></div>
<script>
    'use strict'
    let testId = document.getElementById('id1');//获取id1
    testId.innerText='abc';//给id1文本显示abc
    testId.style.color='red';//给id1显示文本字体颜色改为红色
    testId.style.fontSize='200px';//将字体大小该为200px
    testId.style.padding = '2em';//将内边距改为2em
</script>
</body>
</html>

P22 删除DOM节点

1、删除方法为:先获取父节点,在通过父节点删除自己

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = "id1">
    <h1 id="h1">h1</h1>
    <p id="p1">p</p>
</div>
<script>
    let f = h1.parentElement;//获取h1的父类
    f.removeChild(h1);//删除h1
</script>
</body>
</html>

P23 创建和插入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>
    'use strict';
    let js = document.getElementById('js');
    let list = document.getElementById('list');//捕捉接口
    
    self.setInterval('clock()',1000);
    function clock(){
        list.appendChild(js);//将id=js接口追加到list后面
    }
</script>
</body>
</html>

创建一个新的节点标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>

<script>
    'use strict';
    let newP = document.createElement('p');//创建一个p标签
    newP.id='newP';//将newP这个p标签设置id为newP
    newP.innerText = '建的新节点';
    self.setInterval('clock()',2000);
    function clock() {
        list.appendChild(newP);//将节点放在list后面
    }
</script>
</body>
</html>

添加id的方式用一条

let my = document.createElement('p');//创建一个p标签
my.setAttribute('id','my');//给标签添加一个id并且赋值为my

insert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="js">java</p>
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE------上走</p>
    <p id="me">javaME</p>
</div>

<script>
    'use strict';
    let ee = document.getElementById('se');
    let se = document.getElementById('ee');
    let list = document.getElementById('list');
    self.setInterval('clock()',2000);
    function clock(){
        list.insertBefore(se,ee);
    }

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

P24 获得和设置表单的值

什么是表单

  • 文本框(text
  • 下拉框(select
  • 单选框(radio
  • 多选框(checkbox
  • 隐藏框(hidden
  • 密码框(password
    ··· ···

  表单的目的:提交信息

1、获取提交信息

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<p>
<form action = "post">
   <span>用户名</span><input type="text" id="username">
</form>
</p>
<p>
   <span>性别:</span>
   <input type="radio" name="sex" value="man" id="boy"><input type="radio" name="sex" value="woman" id="girl"></p>
<script>
   let input_text=document.getElementById('username');
   let boy_radio=document.getElementById('boy');
   let girl_radio=document.getElementById('girl');
   console.log(input_text.value); //获取表单的值信息
   input_text.value='修改';//修改表单的值
   boy_radio.checked=true;//选中男
   console.log(boy_radio.checked);// 选中的时候为true,没有选中返回false

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

P25 *表单提交验证及前端密码MD5加密

1、提交表单

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

    <!--MD5工具类-->
    <script src="https://cdn.boot.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https://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">

    <!--事件绑定-->
    <button type="submit">提交</button>
</form>

<script>
    'use strict';
    function aaa() {
        alert('判断按钮是否绑定');
        let uname = document.getElementById('username');
        let pwd = document.getElementById('input_password');
        let md5pwd= document.getElementById('md5_password');
        md5pwd.value=md5(pwd,value());
        //可以校验判断表单内容,true就是通过提交,false阻止提交
        return true;
    }
</script>
</body>
</html>

P26 *初识JQuery及公式

JQuery是一个库,存放JavaScript函数的库

获取JQuey:

  • 通过CDN JQuey引入,百度搜索
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2" src="http://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">点击</a>
<script>
    $('#test-jquery').click(function () {
        alert('hello,JQuery!');
    })
</script>
</body>
</html>

P27 JQuery选择器

原选择器和JQuery选择器的对比

//原选择器
document.getElementsByName();//标签选择器
document.getElementsById();//id选择器
document.getElementsByClassName();//类选择器
//JQuery选择器
$('p').click();//标签选择器
$('#id').click();//id选择器
$('.class').click();//类选择器

手册官网https://www.jq22.com/chm/jquery/index.html

P28 JQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2" src="http://lib.baomitu.com/jquery/3.5.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>
    //当前页面加载完毕后相应事件,该方法是缩写
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    })
</script>
</body>
</html>

P29 *jQuery 操作DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2" src="http://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>
</head>
<body>
<ul id="test_ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    //text和html都是可以获取和修改值的,html修改样式用<>设置样式
    $('#test_ul li[name=python]').text(); //类选择器,绑定li中name=python这个,获取它的值
    $('#test_ul li[name=python]').html('<strong>设置值<strong>');//修改设置html值,strong为加粗

    $('#test_ul li[name=python]').css("color","red");// 操作css,修改字体颜色

    $('#test_ul li[name=python]').show();//显示元素
    $('#test_ul li[name=python]').hide();//隐藏元素,本质就是display : none

</script>
</body>
</html>
ajax需要学习一下

jQuery手册https://www.jq22.com/chm/jquery/index.html

P30 *前端小结及开发技巧分享

这一页适合看视频https://www.bilibili.com/video/BV1JJ41177di?p=30

JavaScript完结

JavaScript完结

JavaScript完结

JavaScript完结

JavaScript完结
JavaScript完结

··· ··· ···
··· ···
···
·

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:黑客帝国 设计师:我叫白小胖 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值