JS笔记

最新推荐文章于 2022-04-01 00:04:24 发布

骂人兔兔成

最新推荐文章于 2022-04-01 00:04:24 发布

阅读量339

点赞数

文章标签： js

本文链接：https://blog.csdn.net/MrttcNB/article/details/109361689

版权

JavaScript

1. 快速入门

1.1 引入JavaScript

内部标签
```
<script>
    //........
</script>
```
外部引入

xxx.js
```
//.....
```
xxx.html
```
<script src="abc.js"></script>
```

1.2 基本语法入门

基本代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--严格区分大小写-->
    <script>
        //1.定义变量： 变量类型 变量名  =  变量值
        var num = 1;
        // alert(num);
        //2.条件控制
        if(2>1){
            alert(true);
        }
        //console.log(num)在浏览器的控制台打印变量！ 相当于System.out.println();
    </script>
</head>
<body>

</body>
</html>

控制台的使用

console 可以直接写js代码

console.log(num)在浏览器的控制台打印变量！相当于System.out.println();
sources 调试，打断点
network 网络请求
application 存一些简单的数据

1.3 数据类型

数

js不区分小数和整数 Number

NaN (not a number不是个数)

Infinity (无限大)

比较运算符

== 等于（不限类型）

=== 绝对等于（限制类型）

不要使用 == 尽量使用 === 来比较

注：NaN与所有数值都不相等，包括自己。

只能通过 isNaN(NaN)来判断这个数是否是NaN

浮点数

console.log(1/3) === (1-2/3) 结果为false

所以尽量避免使用浮点数进行比较

解决方法：

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

null 和 undefined

null 空

undefined 未定义

数组

java数组必须是相同类型的对象，js中不需要

var arr=[1,2,3,4,5,‘hello’,null true];

new Array(1,2,3,4,5,‘hello’);

为了保证代码的可读性，尽量使用第一种方式定义

取数组下标：如果越界了会报 undefined

对象

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

var person = {

name: “majiacheng”,

age: 3,

tags: [xx,xx,xx]

}

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

1.4严格检查模式

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

必须写在JavaScript的第一行。（前提，idea需要设置支持ES6语法）

局部变量建议使用let来定义。

2.数据类型

2.1 字符串

正常字符串中使用单引号双引号

转义字符\

\' 打印’
\n 换行
\t table
\u#### Unicode字符
\x41 Ascll字符

多行字符串编写

var msg = 
    `hello
	 world
	 你好`

模板字符串

let name = "qinjiang";
let age = 3;

let msg = `你好呀，${name},我${age}岁了`

字符串长度
```
str.length
```
字符串不可变

大小写转换

//注意这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()

获取字符指定的下标
```
student.indexOf('x')
```

截取第x到第x个字符前闭后开

studeunt.substring(1)//从第一个字符串截取到最后一个字符串
studeunt.substring(1.3)//[1-3)

2.2 数组

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

var arr = [1,2,3,4,5,6]
arr[0] = 1
console.log(arr)

长度

arr.length 给arr.length 赋值，数组大小就会发生变化。如果赋值过小，元素就会丢失。
indexOf，通过元素获得下标索引
```
arr.indexOf(2)
1
```
字符串的1和数字的1是不同的
arr.slice(2,5) 输出数组下标为[2,5)的部分，返回一个新的数组，类似于string中的substring
push,pop

push 压入到尾部

pop 弹出尾部元素
unshift(),shift() 头部

unshift 压入头部

shift 弹出头部元素
排序 arr.sort()
元素反转
拼接 concat ()

注意，该方法没有修改数组，只是会返回一个新的数组。
连接符 join

打印拼接数组，使用特定的字符串连接
```
arr.join('-')
"1-2-3-4-5-6"
```
多维数组

2.3对象

若干个键值对

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

var person = {
    name: "majicheng"
    age:3,
    email:"305631901@qq.com",
    score:0
}

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

1. 对象赋值

person.name = "mrttc"

2. 使用一个不存在的对象不会报错。会提示undefined

3. 动态的删减属性

delete person.name

动态的添加

person.haha = "haha"

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

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

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

hasOwnProperty()

2.4 Map和Set

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

    <script>
        'use strict'
        var map = new Map([['tom',100],['jack',90],['haha',80]]);
        var name = map.get('tom');//通过key获得value
        map.set('admin',123456);//新增
        //map.delete('tom',100);//删除
        console.log(map);
    </script>
</head>
<body>

</body>
</html>

set:无序不重复集合

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

2.5 iterator

遍历数组

'use strict'
var arr = [3,4,5]
for(var x in arr){   //遍历下标
    console.log(x)
}
var arr = [3,4,5]
for(var x for arr){  //遍历值
    console.log(x)
}

遍历map

'use strict'
var map = new Map([['x',3],['y',4],['z',5]])
for(let x of map){
    console.log(x)
}

遍历set

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

3.函数

3.1、定义函数

定义方式一

绝对值函数

function abs(x){
    if(x>=0){
        return x;
    }
    else{
        return -x;
    }
}
console.log(abs(-1));

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

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

定义方式二

'use strict'
var abs = function(x){
    if(x>=0){
        return x;
    }
    else{
        return -x;
    }
}
console.log(abs(-1));

var fc = function(x){…}为匿名函数，但是可以给把结果赋值给fc，通过fc就可以调用函数。

调用函数

JavaScript可以传递任意个参数，也可以不传参数

不存在参数：

手动定义异常

var abs = function(x){
    //手动抛出异常
    if(typeof x!=='number'){
        throw 'Not a Number';
    }

    if(x>=0){
        return x;
    }
    else{
        return -x;
    }
}
console.log(abs());

有多个参数：

var abs = function(x){
    console.log("x=>"+x);

    for(var i = 0; i<arguments.length;i++){
        console.log(arguments[i]);
    }
}

x只等于第一个值，但是可以通过arguments来把其他值遍历出来。

arguments代表传递进来的所有参数为一个数组。

3.2 作用域

为了解决局部作用域的冲突问题建议局部变量尽量用let来定义

JavaScript实际上只有一个全局作用域。变量假如在函数的作用范围没找到，就会向外查找，如果全局作用域都没找到，则会报错refrenceError(就近原则)

常量关键字 const 只读变量

3.3 方法

'use strict'
var ma = {
    name: '马佳成',
    birth: 1998,
    age: function (){
        var now = 2020
        return now-ma.birth;
    }
}
//属性 ma.name
//方法 ma.age()
方法一定要带()

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

写在外面：

'use strict'
function getAge(){
    var now = 2020;
    return now-this.birth;
}
var ma = {
    name: '马佳成',
    birth: 1998,
    age: getAge
    }
getAge.apply(ma,[]);//this,指向了ma，参数为空

4、内部对象

4.1、Date

var now =new Date();
now.getFullYear();
now.getMonth();
now.getDate();
now.getDay();
now.getHours();
now.getMinutes();
now.getMinutes();
now.getTime();//时间戳 从1970年1.1 00.00.00 开始的毫秒数
console.log(new Data(xxxxxx))//时间戳转为时间

转换

now.toLocaleString()
"2020/10/14 下午5:33:21"
now.toGMTString()
"Wed, 14 Oct 2020 09:33:21 GMT"

4.2、JSON

早期，所有数据传输都是XML

JSON（JavaScript Object Notation) 是一种轻量级的数据交换格式

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

格式：

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

var user = {
    name: "majiacheng",
    age: "22",
    sex: "boy"
}

//对象转换为json字符串{"name":"majiacheng","age":"22","sex":"boy"}
var jsonUser = JSON.stringify(user)

 var user = JSON.parse('{"name":"majiacheng","age":"22","sex":"boy"}')//json字符串转换为对象，参数为json字符串

JS对象和json的区别：

var json = '{"name":"majiacheng","age":"22","sex":"boy"}'
var obj = {name:'majiacheng',age:'22',sex:'boy'};

5、面向对象的编程

JavaScript和其他的面向对象的编程语言有些区别

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

//定义一个学生的类
class student{
    constructor(name) {
        this.name = name ;
    }

    hello(){
        alert('hello')
    }
}

2、使用

var xiaoming =  new student("xm");
xiaoming.name
xiaoming.hello()

3、继承

class student{
    constructor(name) {
        this.name = name ;
    }

    hello(){
        alert('hello')
    }

}
var xiaoming =  new student("xm");
class leader extends student{
    constructor(name,level) {
        super(name)
        this.level = level ;
    }

    myLevel(){
        alert('俺是班干部')
    }

}
var xiaohong = new leader("xh","daduizhang")

6、操作BOM对象

JavaScript的诞生就是为了能在浏览器上运行

bom：浏览器对象模型

window方法浏览器窗口

navigator.appName

navigator.appVersion

navigator.userAgent

navigator.platform

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

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

screen 屏幕尺寸

location 代表当前页面的URL信息

reload:f reload() //刷新网页

设置新的地址 localtion.assign(‘链接’)

document 代表当前页面

document.title
document.title=‘xxx’

获取具体的文档数节点

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

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

history.back()//前进

history.forword()//后退

7、操作DOM对象(重点)

DOM：文档对象模型

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

增删改查

寻找

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

<body>
<div id = "father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var p3 = document.getElementsByTagName('h1');
    var father = document.getElementById('father')
    
    var childens = father.children;//获取父节点下的所有子节点
    father.firstChild
    father.lastChild
</script>
</body>

修改

<body>

<p id="p1">p1</p>


<script>
    var p1 = document.getElementById('p1')
    p1.innerText='哈哈哈'//修改文本的值
    p1.innerHTML='<strong>123</strong>'//可以解析HTML文本标签
    //操作
    p1.style.color='red'//属性使用字符串包裹
    p1.style.fontSize='20px'
</script>
</body>

删除

<body>
<div id = father>
    <p id="p1">p1</p>
</div>

<script>
    var father = p1.parentElement;//找到父节点
    father.removeChild(p1);//通过父节点删除自己
    //另一种删除方法 father.removeChild(father.children[0/1/2]);  
</script>
</body>

删除是一个动态的过程，当使用第二种方法进行删除时要注意序号问题。

插入

获得某个dom节点后，如果这个节点为空，那么可以通过innerHTML增加元素，但是如果这个DOM节点已经存在元素了这么操作原来的元素会被覆盖

<body>
<p id="out">out</p>
<div id = father>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
    <p id="p3">p3</p>
</div>

<script>
    var js=document.getElementById('out')
    var list=document.getElementById('father')
    list.appendChild(js)//将out移到father内
    father.appendChild(out)
    var newP = document.createElement('p')//创建一个标签p
    newP.id='newP';//给标签一个id
    newP.innerText = 'Hello,world'; //标签内容
    father.appendChild((newP))     //把标签放进去   
</script>
//插入到标签前面
    <script>
    var js =document.getElementById('out')
    var p2 =document.getElementById('p2')
    var father = document.getElementById('father')
    father.insertBefore(out,p2)//在father中，out结点插入到p2的前面
</script>
    
</body>

获取表单的值

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

<script>
    var input_text = document.getElementById('username');
    //input_text.value 获得输入框的值
    //input_text.value = ‘xxx’  修改输入框的值为xxx
    var man = document.getElementById('man')
    var woman = document.getElementById('woman')
    //man.checked获取输入框的值
</script>

表单的提交与验证

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <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" required name="username">
    </p>
    <p>
        <span>密码：</span>
        <input type="password" id="password" required name="passward">
        <button type="submit" onclick="test()">提交</button>
</form>

<script>
    function test(){
        var name = document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(pwd.value);
        //md5
        pwd.value = md5 (pwd.value);
        console.log(pwd.value);
    }
</script>
</body>
</html>

8、jQuery

引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入cdn -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 本地引入 -->
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<!--
公式： $(selector).action()
-->
<a href = "" id="test-jquery">点我</a>

<script>
    $('#test-jquery').click(function (){
        alert('hello.jQuery')
    })
</script>
</body>
</html>

选择器

常用的

<script>
    $('p').click();//标签
    $('#id').click()://id
    $('.class').click()://类
</script>

更多的选择器可以查询此网站 jQuary中文手册

事件

鼠标键盘其他

显示鼠标的坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <script src="lib/jquery-3.5.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--
公式： $(selector).action()
-->
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的值
$('#test-ul li[name=python]').test('设置值');//设置值
$('#test-ul').html();//

css的操作

$('#test-ul li[name=python]').css({"color","red"})//更多可以查询文档

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

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