JavaScript学习简单记录

最新推荐文章于 2023-07-29 20:06:11 发布

m0_51110014

最新推荐文章于 2023-07-29 20:06:11 发布

阅读量458

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/m0_51110014/article/details/126652333

版权

JavaScript

1、JavaScript概述

**HTML:**网站的结构搭建 CSS:网页界面的美化 JavaScript:网页动态实现

前端框架： BootStrap、ElementUI、LayUi、VUE…

什么是JavaScript？

JavaScript是一门世界上流行的脚本语言。由网景公司（1997年）耗时10天完成开发！

一个合格的java开发者，必须精通JavaScript，因为JavaScript在实际工作中JavaScript可能比java代码写的还多

JavaScript 特点：语法格式不是很严格，遵循java语法格式，基本不会有问题！！！

2、JavaScript入门

**学习JavaScript必须学会使用浏览器控制台等进行调试 **

1、内部引入

  <script>
        alert("lihui");
  </script>

2、内部引入(lh.jjs)

    <!--外部引入-->
    <script src="js/lh.js"> </script>

3、基本语法入门

  <!--script标签内，写JavaScript代码 js代码位置不固定 行内引入-->
    <script>
        //1、定义变量   变量类型    变量名    变量值
        var num = 1;
        //条件控制
        if (num > 0 && num <2){
            alert("lihui");
        }else if (num >2 && num <3){
            alert("lihui");
        }else {
            alert("lihui");
        }
        console.log(num);//在浏览器控制台打印变量 相当于java中的输出
    </script>

数据类型

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

number：js不区分小数和整数。

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

字符串：

'lihui'      "lihui"

布尔值：

true      false

逻辑运算：

&& || !

比较运算符：

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

这是一个js弊端、尽量不要使用 ==

Math.abs//绝对值函数

null和undefined区别？

null：空 undefined：未定义

创建变量：es5用var es6用let

定义数组：

var arr = {...};
new Array(...);

数组下标越界：undefined

**对象：**对象是用大括号、数组使用中括号。

  Person person = new Person(1,2,3);
        var person = {
            name:"lihui",
            age:3,
            tags:['js','java',[web],'...']
        }

取对象的值：

person.name
>"lihui"
person.age
>3

严格检查模式(strict)：

<!--
	idea需要设置es6的语法。
	'use strict':严格检查默认、预防JavaScript的随意性导致产生的一些问题。
	局部变量都建议使用let 定义
	必须写在JavaScript的第一行！
-->

字符串的使用

1、正常字符串使用''或者""包裹
2、需要注意转义字符 \
\'
\n
\t
\u4e2d \u#### Unicode字符
\x41  Ascall字符

多个字符串编写

使用：``符号

使用模板字符串

使用：`lihui,你好${}`

字符串长度

console.log(str.length)

字符串的可变性，不可变

大小写转换

//这里是方法、不是属性
student.toUpperCase()
student.toLowerCase()

student.indexOf(‘t’)

substring

student.subString(1)  //从第一个到最后一个
student.subString(1,3)//[1,3)

数组

Array可以包含任意数据类型

var arr = [1,2,3]

长度

arr.length

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

indexOf:通过元素、获得下标索引

arr.indexof(2)

字符串的’1’和数字1颜色是不一样的。

slice():截取array的一部分，返回一个新数组，类似于String中的substring

push(),pop() 尾部

push:压入到尾部
pop:弹出尾部的一个元素

unshift(),shift()头部

unshift:压入到头部
shift:弹出头部的一个元素

排序 sort()

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

元素反转reverse()

['A','B','C']
arr.reverse()
['C','B','A']

concat()

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

注意：concat()并没有修改数组，只是会返回一个新的数组

连接符join

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

['C','B','A']
arr.join('-')
"C-B-A"

多维数组

arr = [[1,2],[2,3],["5","6"]]
arr[1][1]
1

数组：存储数据（如何存、如何取、都可以自己实现）

对象

由若干个键值对组成

var 对象名 = {
	属性名：属性值，
	属性名：属性值，
	属性名：属性值，
	属性名：属性值
}

js中的对象，{…}表示一个对象，键值对描述属性，xxxx.xxxx,多个属性直接使用逗号隔开，最后一个属性不加逗号。

1、对象赋值

person.name ="lihui"
person.age = 18

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

person.lihui
undefined

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

delete person.name
true
person

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

person.lh ="lihui"
"lihui"
person

5、判断属性值是否在这个对象中！ xxx in xxx !

'age' in person
true
//继承
'toString' in person
true

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

person.hasOwnProperty("toString")
false
persion.hasOwnProperty("age")
true

流程控制

if判断

 var num = 1;
        //条件控制
        if (num > 0 && num <2){
            alert("lihui");
        }else if (num >2 && num <3){
            alert("lihui");
        }else {
            alert("lihui");
        }

循环

        while (num< 100){
            age = age +1;
        }

		do{
            age = age +1
        }while (age<10)
        
       for (let i = 0; i < 100; i++) {
            alert(i)
        }
		//for in 相当于java的for 
		for (const arrayKey in array) {
            alert("lihui")
        }

Map 和 Set

ES6的新特性：

Map:

let map = new Map(['lihui',90],['hh',98])
        var lihui = map.get('lihui');
        map.set('qianying')
        console.log(lihui)

Set:无序不重复的集合

var set = new Set([1,2,3]) //set可以去重
        set.delete(1);
        set.add(3);
		consloe.log(set.has(3))

** iterator **

遍历数组：

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

遍历map

var map = new Map(['tom',90],['lihiui',89]);
for(let x of map){
	console.log(x)
}

遍历set

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

函数

方法：对象（属性、方法）

函数：

定义函数

绝对值函数：

定义方式一：

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可以传递任意个参数，也可以不传递参数~

参数进来是否存在的问题？可以进行判断。假设不存在参数，可以规避。

arguments

arguments是一个js免费赠送的关键字，使用多余的参数，

代表，传递进来的所有参数，是一个数组。

rest

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

变量的作用域

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

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

和java的基本一致！！！

全局函数

全局对象：window

alert（）这个函数本身也是一个全局对象。

局部作用域：let

常量：const

ES5：只要用大写字母定义的变量就是常量（但是存在缺陷，这个常量可以改变）

ES6:引入了const关键字定义常量，只读变量。

方法

定义方法：

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

var lihui ={
            name:"lihui",
            age:18,
            //方法
            bith:function (){
                var now = new Date().getFullYear();
                return now-this.age;
            }
        }
//属性
lihui.name
//方法，一定要带()
lihui.bith()

this.代表什么？不同的位置代表的不一样。

this是无法指向的，是默认指向调用他的那个对象！！！

apply

在js中可以控制this的指向。

getAge.apply(方法名、参数);

内部对象

标准对象：

Date

  var now = new Date();
        now.getFullYear();
        now.getMonth();
        now.getDate();
        now.getDay();
        ...

JSON

json是什么？

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

格式：

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

对象转换为json

var user = {
            name:"lihui",
            age:8,
            sex:"男"
      }
      var s = JSON.stringify(user);
     
      var parse = JSON.parse("{'name':'lihui',{'age':18}");

JSON和JS对象的区别：

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

Ajax

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

面向对象编程

什么是面向对象？

JavaScript和其他语言有所区别：

类：模板

对象：具体的实例

JavaScript中：

原型对象：

class继承：

//定义一个类
class student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert("lh")
    }
}
var lihui = new Student("")
var qianying = new Student("")
lihui.hello()

继承：

class xiaoxuesheng extends Student{
    constructor(name,grade){
        supper(name);
        this.grade = grade;
    }
}

原型链：

操作BOM对象（重点）

浏览器介绍：

JavaScript和浏览器的关系？

JavaScript诞生就是为了能够让代码能够在浏览器上面运行！！！

BOM:浏览器对象模型

IE
Chrome
Safari
FireForx

window（重要）

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
150
window.innerHeight
150
window.innerHeight
227
window.innerWidth
816

Navigator

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

navigator对象一般不会使用，因为会被人为修改。

screen

screen.width
1280
screen.width
1280

location（重要）

host:"'chrome://new-tab-page/'"
href:href: "chrome://new-tab-page/"
protocol: "chrome:"
reload:f reload() //刷新网页
//设置新的地址
location.assign("https://www.baidu.com")

document

document.title
'新标签页'

获取具体的文档树节点

<dl id="app">
    <dt>a</dt>
    <dt>b</dt>
    <dt>c</dt>
</dl>
<script>
  var dl = document.getElementById('app');  
</script>

获取cookie

document.cookie
''

劫持cookie原理

www.baidu.com

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

服务器端可以设置cookie：httpOnly

history

history.back
ƒ back() { [native code] }
history.forward
ƒ forward() { [native code] }

操作DOM对象（重点）

核心

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

更新：更新Dom节点
遍历Dom节点：得到Dom节点
添加：添加一个新的Dom节点

要操作一个Dom节点、必须要先获得这个Dom节点。

Document:文档树。树的每一个节点就是一个Dom

获取Dom节点

 <div id="father">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</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 children = father.children;

        father.firstChild
        father.lastChild

    </script>

原生代码：用jQuery代替。

更新节点

操作文本： 
	<div id="id1">

    </div>

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

操作js:

    id1.innerText="123"
    "123"
    id1.innerHTML='<strong>123</strong>'
    "<strong>123</strong>" 
    
  	id1.style.color ='red'
	"red"

删除节点

删除节点的步骤：先获取父节点、在通过父节点删除本身节点。

   <div id="father">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
    
     <script>
        father.removeChild(p1)
     </script>

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

插入节点

获得某个Dom节点，这个节点如果为空，通过innerHtml就可以添加一个元素。如果Dom节点已经存在元素，我们就不能添加，这样会覆盖原来的操作。

    <p id="lihui">javascript</p>
    <div id="id1">
        <p id="se">javase</p>
        <p id="ee">javaee</p>
        <p id="me">javame</p>
    </div>

    <script>
        let js = document.getElementById('lihui');
        var list = document.getElementById('id1');
		list.appendChild(js);
    </script>

创建一个新的标签

    <p id="lihui">javascript</p>
    <div id="id1">
        <p id="se">javase</p>
        <p id="ee">javaee</p>
        <p id="me">javame</p>
    </div>

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

        var lh = document.createElement('p');
        lh.id='lihui';
        lh.innerText='hello,lihui';
        //创建一个新节点标签(通过这属性，可以设置任意属性的值)
        var scriptElement = document.createElement('script');
        scriptElement.setAttribute('type','text/javascript')
    </script>

insert

inserBefore

xxx.insertBefore('新节点','旧节点');

操作表单（验证）

表单是什么 form DOM 树

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

表单的目的：提交信息

 <form action="post">
       <p> <span>用户名：</span><input type="text" id="userName"></p>
       <p> <span>性别：</span>
           <input type="radio" name="sex" value="nan" id="boy">男
           <input type="radio" name="sex" value="nv" id="girl">女
       </p>
    </form>

    <script>
        let by = document.getElementById('userName');
        var boy = document.getElementById('boy');
        var girl = document.getElementById('girl');

        //得到输入框的值
        input_text.value
        //修改输入框的值
        input_text.value="123"
        //对于单选框，多选框等等固定的值，boy.value只能获得当前的值
        boy.checked = true;//查看放回的结果是否为true，如果为true，被选中
    </script>

提交表单

    <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>
       <p> <span>性别：</span>
           <input type="radio" name="sex" value="nan" id="boy">男
           <input type="radio" name="sex" value="nv" id="girl">女
       </p>
        <!--<input type="submit">-->
        <!--绑定事件、onclick 被点击-->
        <button type="button" onclick="sub()">提交</button>

    </form>

    <script>
        function sub(){
            var username = document.getElementById('userName');
            let pws = document.getElementById('password');
            console.log(username.value);
            console.log(pws.value);
            pds.value="123";
            return true;
        }
    </script>

jQuery

JavaScript和jQuery的关系；工具类

jQuery官网：

https://jquery.com/

cdnjQuery：

http://lib.sinaapp.com/

引入jQuery：

src="地址"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://lib.sinaapp.com/"></script>

</head>
<body>

<a href="" id="test-jquery">点我</a>
    <script>
       $('#test-jquery').click(function (){
           alert('lihui');
       })
    </script>

</body>
</html>

jQuery选择器

 <script>
        //标签选择器
        document.getElementsByTagName();
        //id选择器
        document.getElementById();
        //类选择器
        document.getElementsByClassName();
        //jQuery
        $('p').click();//标签选择器
        $('#de').click();//id选择器
        $('.clas').click();//类选择器
//使用官网学习
    </script>

事件

鼠标事件、键盘事件、
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://lib.sinaapp.com/"></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').onmousemove(function (e){
               $('#mouseMove').text('X:'+e.pageX+'Y:'+e.pageY)
           })
        });
    </script>

</body>
</html>

jQuery操作Dom

  <script>
        $('#test-ul li[name=lh]').text();//获得值
	    $('#test-ul li[name=lh]').text('jalgj');//设置值
        $('#test-ul').html();//获得值
 		$('#test-ul').html(<a></a>);//设置值
  </script>