JavaScript学习

最新推荐文章于 2024-11-04 16:17:23 发布

HeSimple

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量433

点赞数

文章标签： javascript html5 html es6 jquery

本文链接：https://blog.csdn.net/sdlwhxp_xdry/article/details/120085247

版权

JavaScript

1 入门

1.1 外部引入js

在<header>头部中添加路径，最好是相对路径

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

2.快速入门

2.1 外部引入js

在<header>头部中添加路径，最好是相对路径

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

2.2 基本语法入门

<!--JavaScript要严格区分大小写-->
    <script>
        // 1. 定义变量 变量类型  变量名 = 变量值；
        var score = 71;
        // alert(score);
        // 2.条件控制
        if(score>80 && score<=100){
            alert("A");
        }else if (score>60 && score<=80){
            alert("B");
        }else {
            alert("C");
        }
    </script>
<!--    console.log(score)  在浏览器控制台打印变量-->

2.3 数据类型

number

123 //整数123
123.1 //浮点数123.1
1.123e3 //科学记数法
-99  //负数
NaN // not a number
Infinity //无穷

字符串

‘abc’，“abcd”

比较运算符

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

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

须知

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

浮点数问题

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

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

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

null和undefined

null 空
undefined 未定义

数组

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

var arr = [1,2,3,4,'hello',null,true];
//取数组小标：如果越界了，就会
undefined

对象

对象是大括号{}，数组是中括号[]~~，对象的最后一个属性后面无“，”

//数组
Person person = new Person(1,2,3,4,5);
//对象
var person = {    
    name: "zhonghuaernv",
    age: 1500,
    tag:['js','java','web','...']
}
//取对象的值：
person.name

//> "zhonghuaernv"

2.4 严格检查模式

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

3 数据类型详解

3.1 字符串

        let name1='你好啊，HeSimple';
        console.log(name1);
        // 字符串长度
        console.log(name1.length);
        //”，“ 的位置
        console.log("name1.indexOf('，')="+name1.indexOf('，'));//3
        console.log(name1.substring(1));
        //substing:[),包含左边不包含右边  是name1[1]和name1[2]，不包含name1[3]
        console.log("name1.substring(1,3)="+name1.substring(1,3));//好啊
        console.log(name1[1]);//好

3.2 数组

        var num=1;
        var arr=[1,2,3,4,"5",'6'];
        var length=arr.length=8;
        console.log(length);//
        console.log(arr)//(8) (8) [1, 2, 3, 4, "5", "6", empty × 2]
        console.log(arr[7]);//undefined
        var arr1=arr.slice(1,3); //slice 截取数组的一部分生成新数组,右边不闭合
        console.log(arr1)//(2) [2, 3]

注意：给arr.length 赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
字符串的“1”和数字的1 是不同的
slice（）

截取Array的一部分，返回一个新的数组，类似于String中的substring
push(), pop() 尾部

push: 压入到尾部
pop: 弹出尾部一个元素
unshift(), shift() 头部

unshift: 压入到头部
shift: 弹出头部一个元素
排序 sort()

(3)[“B”,“C”,“A”]

arr.sort()

(3)[“A”,“B”,“C”]`

元素反转 reverse()

(3)["B","C","A"]
arr.reverse()
(3)["A","C","B"]`

concat()

["B","C","A"]
arr.concat([1,2,3])
(6)["B","C","A",1,2,3]
arr(3)["B","C","A"]

连接符 join
```
["B","C","A"]
arr.join('-')
"B-C-A"
```
多维数组

arr = [[1,2],[3,4],[5,6],[7,8]];
 arr[1][1]
 4

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

3.3 对象

若干个键值对

//定义了一个person对象，它有三个属性
var person = {    
    name: "zhonghua",    
    age: 3000,    
    score: 100
}

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

1、对象赋值

person.name
"zhonghua"
person.name ="ernv"
"ernv"

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

person.haha
undefined

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

delete person.name
true
person
{age: 3000, score: 100}

4、动态的添加属性，通过delete添加对象的属性

person.haha = "haha"
"haha"
person
{age: 3000, score: 100, haha: "haha"}

3.4、流程控制

if 判断
while do-while 循环【避免死循环】
for循环
forEach 循环

3.5、Map 和 Set

Map：

    <script>
        'use strict';
        //ES6 Map
        //学生的成绩，学生的名字
        var map = new Map([['tom',100],['jack',90],['haha',80]]);
        var name = map.get('tom'); //通过key 获得 value
        map.set('admin',12356);
        console.log(name)
    </script>

Set：无序不重复的集合

var set = new Set([3,2,5,1，42]);
set.add(2); //添加
set.delete(1); //删除
console.log(set.has(3)); //是否包含某个元素

3.6、iterator

遍历数组

//通过 for of /
var arr = [3,4,5]
for(var x of arr){
    console.log(x)
}

遍历map

var map = new Map([["tom",100],["jack",90],["haha",80]]);
for(let x of map){
    console.log(x)
}

遍历set

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

4 函数

4.1 定义函数

定义方式一

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

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

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

定义方式二

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

function(x){…}这是一个匿名函数，但是可以把结果赋值给 abs, 通过abs 就可以调用函数！

方式一方式二，等价！

调用函数

abs(10) 
//10
abs(-10) 
//10

参数问题：JavaScript 可以传人一个参数，也可以不传递参数~

参数进来是否存在问题？

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

var abs = function(x){    
    if (typeof x !=='number'){  
        throw 'not a number' 
    }   
    if (x>=0){   
        return x;   
    }else {   
        return -x; 
    }
}

arguments

argument是一个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;  
    }
}

问题：arguments 包含所有的参数，我们有时候想使用多余的参数进行附加操作

以前：

if(arguments.length>2){  
    for (var i = 0; i < arguments.length; i++) {  
        //...    
    } 
}

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

function aaa(a,b,...rest){    
    console.log("a=>"+a);    
    console.log("b=>"+b);   
    console.log(rest);//剩余的所有参数
}

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

4.2 变量的作用域

在JavaScript中， var 的定义变量是存在作用域的。

假设在函数体中声明，则在函数体外不可以使用~

function qj(){    
    var x = 1;    
    x = x + 1;
} 
x = x + 2;
//Uncaught ReferenceError: x is not defined

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

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

在JavaScript中，函数查找变量从自身函数开始~，由“内”向“外”查找

提升变量的作用域

function zhu(){    
    let y;   
    let x = "x" + y; 
    console.log(x)   
    y = 'y';
}

这个是在JavaScript建立之初就存在的特性。

养成规范：所有变量定义都放在函数的头部，不要乱放，便于代码的维护；

function zhu2(){    
    var x = 1,       
        y = x + 1,       
        z, i, a; //undefined    //之后随便用
}

全局函数

//全局变量
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);

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

规范

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

//唯一全局变量
var HeAPP = {};
//定义全局变量
HeAPP.name = 'HeSimple';
HeAPP.add = function(a,b){
    return a + b;
};
/*
* HeAPP.add(1,1);
     2
  add(1,2)
     Uncaught ReferenceError: add is not defined at <anonymous>:1:1
* */

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

jQuery

局部作用域

function aaa(){   
    for (var i = 0; i <100, i++){ //如果是var，下面i+1可以取到值，如果是let，则报错
        console.log(i) 
    }    
    console.log(i+1);//问题？ i出了这个作用域还可以使用吗    可以
}

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

function aaa(){    
    for (let i = 0; i <100; i++){     
        console.log(i);   
    }  
    console.log(i+1);//问题？ i出了这个作用域还可以使用吗,i不能使用了，报错：i未定义
}

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

常量 const

在ES6 之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；

在ES6 引入了常量关键字const

const PI = '3.14'; //只读常量，不能修改console.log(PI);
PI = '123'; 
//TypeError: Assignment to constant variableconsole.log(PI);

4.2 方法

定义方法

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

var kuangshen = {    
    name: 'qinjiang',    
    birth: 2000,    
    age: function (){        
        // 今年 - 出生年      
        var now = new Date().getFullYear();     
        return now-this.birth;   
    }
}

kuangshen.name 
//"qinjiang"
kuangshen.age()
//21

function getAge(){ 
    let now = new Date().getFullYear(); 
    return now-this.birth;
}
let kuangshen = {   
    name: 'qinjiang', 
    birth: 2000, 
    age: getAge   //这里getAge不能带括号，只用方法名。不带括号age类型为方法；带括号age类型为number，得不到birth的值，则返回NaN.
}
//  
kuangshen.age()  
21
//
getAge()  
NaN

5 内部对象

5.1 Date

基本使用

<script>
    var now = new Date();//Wed May 12 2021 15:23:54 GMT+0800 (中国标准时间)
        var now=new Date();
        now.toLocaleString();
        //"2021/9/2 下午2:58:46"
        now.toGMTString();
        //"Thu, 02 Sep 2021 06:58:46 GMT"
        now.getFullYear();
        //2021
        now.getMonth();
        // 8   ,从0开始的
        now.getDate();
        // 2
        now.getDay();
        // 4
        now.getHours();
        // 14
        now.getMinutes();
        // 58
        now.getSeconds()
        // 46
        now.getHours();
        // 14
    now.getTime();//时间戳 全世界统一  1620804234034
    console.log(new Date(1620804234034)) //转时间戳为时刻
</script>

5.2 JSON

json 是什么

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

在JavaScript 一切结尾对象，任何js支持的类型都可以用 json 来表示； number，string…

格式：
- 对象{}
- 数组[]
- 所有的键值对都是用 key-value

JSON 字符串和 JS 对象的转化

<script>
    //json全是字符串
    var user={
        name:"hexipeng",
        age:3,
        sex:'男'
    }
	console.log(user);
	//{name: "hexipeng", age: 3, sex: "男"}
	var jsonUser=JSON.stringify(user);        //将对象转化为字符串
	console.log(jsonUser);
	//{"name":"hexipeng","age":3,"sex":"男"}，类型为字符串
	var user1=JSON.parse('{"name":"hexipeng","age":3,"sex":"男"}');//将字符串转化为对象
	console.log(user1);
	//{name: "hexipeng", age: 3, sex: "男"}
</script>

很多人搞不清楚，JSON 和 JS 对象的区别

var obj = {a:'hello',b:'hellob'};
var json = '{a:"hello",b:"hellob"}';

5.3、Ajax

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

6 面向对象的编程

6.1、什么是面向对象

原型对象

JavaScript、Java、C#…. 面向对象； JavaScript有些区别

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

JavaScript这个需要大家换一下思维！

class继承

class关键字，是在ES6引入的

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");

7 操作DOM对象

浏览器介绍

JavaScript 和浏览器关系？

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

BOM : 浏览器对象模型

IE6-11
Chrome
Safari
FireFox
Opera

window

window 代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
718
window,innerWidth
1253
window.outerHeight
1047
window.outerWidth
956

Navigator

Navigator 封装浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36 Edg/90.0.818.56"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36 Edg/90.0.818.56"
navigator.platform
"Win32"

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

不建议使这些属性来判断和编写代码

screen

screen.width
1920 (px)
screen.height
1080 (px)

location (重要)

location 代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com"
protocol:"https:"
reload:f reload()  //刷新网页
//设置新的地址
location.assign('https://blog.kuangstudy.com/')

document （内容；DOM）

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

document.title
"百度一下，你就知道"
document.title = "中华人民"
"中华人民"

获取具体文档树节点

<dl id="app">
    <dt>Java</dt>
    <dt>JavaSE</dt>
    <dt>JavaEE</dt>
</dl>
<script>
    var d1 = document.getElementById('app');
</script>

获取 cookie

document.cookie

劫持 cookie 原理

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

服务器可以设置 cookie： httpOnly

history

history代表浏览器的历史记录

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

8 操作DOM对象（重点）

核心

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

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

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

获得DOM节点

//对应 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;

更新节点

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

操作文本

id1.innerText = '455'修改文本的值
id1.innerHTML='<strong>123</strong>'可以解析HTML文本标签

操作css

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

删除节点

删除节点步骤：先获取父节点，通过父节点删除，不能自己删自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //对应 css选择器
    var self = document.getElementById('p1')
    var father = p1.parentElement;
    father.removeChild(self)
    //删除是一个动态的过程
    father.removeChild(father.children[0])
    father.removeChild(father.children[0])
    father.removeChild(father.children[0])
</script>

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

插入节点

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

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js); //追加到后面
</script>

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

<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    var list = document.getElementById('list');
    //通过JS创建一个新的节点
    var newP = document.createElement('p'); //创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello,world';
    list.appendChild(newP)
</script>

insertBefore

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee)

9 操作表单（验证）

表单是什么 form DOM树

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

表单的目的：提交信息

获得要提交的信息

<form action="post">
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>
<!--多选框的值，就是定义好的value-->
    <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 boy_radio = document.getElementById('boy'); 
    var girl_radio = document.getElementById('girl');
    //获得输入框的值
    input_text.value
    //修改输入框的值
    input_text.value ='123';
    //对于单选框 ，多选框等固定值，boy_radio.value 只能取得当前的值
    boy_radio.checked; //产看返回结果，是否为ture.如果是，则被选中
    girl_radio.checked = true; //赋值
</script>

提交表单，MD5加密，表单优化

<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 username = document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(username.value)
        console.log(pwd.value)
        // pwd.value = '******'; //低端操作
        //MD5 算法 (高端操作)
        pwd.value = md5(pwd.value);
        console.log(pwd.value);
    }
</script>

<!--
表单绑定事件
onsubmit = 绑定一个提交检测的函数 true false
将这个结果返回给表单，使用 onsubmit 接收！
οnsubmit="return aaa()"
-->
<form action="#" method="post">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username" onsubmit="return aaa()">
    </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 username = document.getElementById('username');
        var pwd = document.getElementById('input_password');
        var md5pwd = document.getElementById('md5-password');
        md5pwd.value = md5(pwd.value)
        console.log(username.value);
        console.log(md5pwd.value);
    }
</script>

10 jQuery

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--cdn引入-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--cdn引入-->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<!--
公式： $(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
    //选择器就是css选择器
    $('#test-jquery').click(function (){
        alert('hello,jQuery')
    })
</script>
</body>
</html>

选择器

//原生js 选择器很少，麻烦而且不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();;
//jQuery css 中的选择器它全部可以用到
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click(); //class选择器-

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

鼠标移动测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 250px;
            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>

操作DOM

节点文本操作

$('#test-ul li[name=python]').test(); //获得值
$('#test-ul li[name=python]').test('123'); //设置值
$('#test-ul').test(); //获得值
$('#test-ul').test('5678'); //设置值

css的操作

$('#test-ul').css({"color","red"})

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

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

nt.getElementsByClassName();;
//jQuery css 中的选择器它全部可以用到
$(‘p’).click(); //标签选择器
$(’#id1’).click(); //id选择器
$(’.class1’).click(); //class选择器-

HeSimple

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫