JS学习笔记_javascript let output = inputs[0] * weights[0] + i-CSDN博客

本文链接：https://blog.csdn.net/m0_55016911/article/details/125257870

1、一些杂项

在这里插入图片描述

2、数据类型

2.1、字符串

1、单引号或双引号

var s1 = "cnm";
var s2 = 'cnm';

2、转义字符\

中文Unicode、Ascll、空格以及字符串里打出符号

3、多行字符串

使用`（键盘Esc下面）包裹字符串，打印出来的字符就可以多行显示

var msg = `
	hello
world
`

4、模板字符串

也是使用`包裹，其内的字符串要拼接可以直接使用${}包裹。

var s1 = {
    name = "xiaowang",
    age = 16
};
var msg = `小王的年龄是${s1.age}`;

5、字符串长度

var s1 = "student";
console.log(s1.length);

6、字符串可变性

字符串赋值后就不能再修改了。

7、大小写转化

toUpperCase()//小写转大写
toLowpperCase()//大写转小写

console.log(s1.toUpperCase());
console.log(s1.toLowperCase());

8、通过元素获得下标

console.log(s1.indexOf('t'));

9、字符串截取

substring()

console.log(s1.substring(3));//从第三的下标开始截取
console.log(s1.substring(1,3);//从第一个的下标到第三个下标

2.2、数组

js的数组可以包含任意的数据类型，可变

1、长度

过长多余部分为empty，打印结果为undefined。过少会丢失

2、通过元素获得下标

var arr = [1,3,6];
arr.indexOf(2);

得到的是6。而"1"与1是不同的。

3、截取数组

slice()

arr.slice(1,3);

4、添加删除元素

push pop

var arr = [1,5,"a"];
arr.push("ad","ww");

push中的元素将添加进arr尾部。

pop，弹出尾部的一个元素。

unshift中的元素将添加进arr头部。

shift，弹出头部的一个元素。

5、排序

sort()

var arr = ["B","C","A"];
arr.sort();

得到[“A”,“B”,“C”]

6、元素反转

reverse()

反过来打印。

7、concat()

在原数组后加上新元素。但是不改变原数组。

8、连接符join()

使用括号内的符号打印数组。

9、多维数组

var arr = [[1,2],[3,4],["5","6"]];

2.3、对象

键:值

所有键都是字符串，调用要用引号，值是任意对象

var TL = {
        name:"Su",
        age:20,
        email:"99999@qq.com",
        school:WYU = {
            name:"五邑大学",
            age:50,
            address:"Jiangmen"
    }

1、调用

使用一个已定义的对象中未定义的属性不会报错。

一种是直接用.调用属性

console.log(person.name);

一种是只知道名字的用[]

var mingzi = "name";
console.log(person[mingzi]);

2、动态增删

delete person.name;

直接把person对象delete。

var person = {
    name:"cnm",
    age:14
}
person.email = 123456@qq.com

直接给新属性赋值就行。

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

hasOwnProperty

2.4、流程控制

诸如if while for这类的

但是他们的要有一个范围或者说用size，而不是直接输出全部。

1、foreach

不能中断循环，不改变原来的，无返回值undefine

2、for…in

遍历的是数组的索引（即键名），总是得到对象的key或数组、字符串的下标

3、for…of

遍历的是数组元素值,总是得到对象的value或数组、字符串的值

（想让对象也可以使用for…of循环的话可以用Object.keys()获取对象的键值再使用）

2.5、Map()和Set()

1、Map()

一种像组合的东西

var m = new Map([['jack',100],['tom',85],['john',59]]);
var name = m.get('tom');
console.log(name);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q9bknQA1-1655094916005)(C:\Users\特仑苏\AppData\Roaming\Typora\typora-user-images\image-20220320204943360.png)]

输出结果是85，和tom一组的，但是get85不能得到tom

使用set来增加或者修改，delete来删除

2、Set()

无序不重复的集合。当有多个重复的值时只保存一个。

var s = new Set([3,2,1,1,1,1]);

Set()内的值可以增删，使用add和delete，而has可以用于判断内部是否存在某个值

3、函数

3.1、定义函数

定义一个绝对值函数

定义方法1

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

当运行到return的时候，代表函数结束，返回结果。

如果没有执行return，函数执行完会返回undefined。

定义方法2

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

function(x){…}看作一个匿名函数，但是可以把结果赋值给a，通过a就可以调用函数。

3.2、arguments和rest

arguments就是一个js自己给的对象。代表的是函数传入的所有参数，都存在它里面。还有一些牛叉的功能，比如它的callee属性，可以输出调用的函数的代码

rest就是指省略号。它写在函数里代表着省略号后的参数，输出rest就是输出省略号存的参数。

4、变量

1、在函数里面声明（for的可以）的不能在外部调用。但是外部声明的可以被函数调用（包括嵌套的外面的函数）

2、变量名相同没有问题，只要在函数内就是独立的。

function(){
    var i = 2;
    i++;
}
function(){
    var i = 's',
        z = 'b';
    return i+z
}

3、变量在js里面默认先声明，再按照代码顺序进行赋值。

//规范定义放在头部，便于代码维护
function(){
    var x = 1,
    	y = 2,
        z,i,a;
    
    z = 3;
}

4、js只有一个全局作用域window。例如alert是window.alert=old_alert绑定住了。如果我们给window.alert绑定了别的东西，那么使用alert方法就会变成别的东西。

window.alert = function q(){};
alert(www);//没用，因为被重新定义了。
window.alert = old_alert();

5、由于全局变量都会绑定到我们的window上面。为了减少冲突，我们可以自己定义一个空间。

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

6、局部变量的定义尽量都使用let，这样就不会导致作用域冲突。而常量就使用const。

5、方法

函数放到对象里面就是方法，打印函数和方法都要加上括号

1、方法的定义

var Sun = {
        name:2,
        birth:2002,
        age:function(){
            var now = new Date().getFullYear();
            return now-this.birth;
        }
    }

也可以在外部定义，再调用到对象内，但调用时不能带上括号，只需要函数名。通过Sun.age()打印。

function getage(){
     	var now = new Date().getFullYear();
    	return now-this.birth;
    }

var Sun = {
        name:2,
        birth:2002,
        age:getage
    }

这个如果直接调用getage()，那么他的this.birth就是window这个对象的birth。因为this是无法指向的，默认指向调用他的对象。

可以用apply绑定方法，指定某对象。

6、JSON

var user = {
    name: "Lihua",
    age:4,
    sex:"男"
}

//对象转化为json赋给jsonuser对象{"name":"Lihua","age":4,"sex":"男"}
var jsonuser = JSON.stringify(user);

//json字符串转化为对象,调用一个JSON对象或者直接按格式输入
var obj1 = JSON.parse(jsonuser);
var obj2 = JSON.parse('{"name":"Lihua","age":4,"sex":"男"}');

7、面向对象

用__proto__来找一个原型

var Student = {
    age:14,
    sport:function(){
        console.log(this.name+"run.....")
    }   
}

var xiaoming = {
    name:"小明",
    favorite:"加塞"
}

xiaoming:__proto__ = Student;

打印xiaoming.sport就会输出小明run…，因为Student相当于xiaoming的父类。

class Student{
   constructor(name){
        this.name = name;
        alert("mmp");
    }
   cnm(){
        console.log("cnm");
        alert("cnm");
    }
}
    
class xiaoxuesheng extends Student{
    constructor(name,age){
        super(name);
        this.age = age;
    }
}

var xiaoming = new xiaoxuesheng("晓明",12);

8、DOM

是自上而下的，如果要获取DOM，就要在前面的HTML先定义了，一般来说重要的js才放在开头，剩下的都写在后面。

通过DOM返回的都是对象。

8.1、获取DOM对象

<body>
<div id="Dad">
<h1 id="hhh">h111111111111111111111111111</h1>
<p class="pp">p111111111111111111111111</p>
</div>
<a href="&" id="cnm">a</a>

<script>
    var k1 = document.getElementById('hhh');
    var z = document.getElementsByClassName('pp');
    var m = document.getElementById('cnm')
</script>
</body>

8.2、更新DOM节点

<body>
<div id="Dad">
<h1 id="hhh">h111111111111111111111111111</h1>
<p class="pp">p111111111111111111111111</p>
</div>
<a href="&" id="cnm">a</a>

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

1、操作文本

k1.innerText = '122';//修改文本的值
k1.innerHTML = '<strong>222</strong>';//可解析的HTML文本

2、操作css

k1.style.color = 'yellow';
k1.style.fontsize = '30px';

8.3、删除DOM节点

要先获得父对象，再通过父亲来调用删除节点。有的是数组有的是单独的，要区分。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cgV3CfIV-1655094916005)(C:\Users\特仑苏\AppData\Roaming\Typora\typora-user-images\image-20220402201619342.png)]

<body>
<div id="Dad">
<h1 id="hhh">h111111111111111111111111111</h1>
<p class="pp">p111111111111111111111111</p>
    <a href="&" id="cnm">a</a>
</div>
<p class="pp">sdads</p>
<script>
    var k1 = document.getElementById('hhh');
    var z = document.getElementsByTagName('p');
    var m = document.getElementById('cnm')
    
    var father = z[0].parentElement;//获得父节点
    father.removeChild('k1');//删除子节点叫做k1的
</script>
</body>

8.4、新建DOM对象

var myStyle = document.creatElement('style');//创造一个叫style的标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = '#cnm{background-color:black}';
document.getElementsByTagName('head')[0].appendChild(myStyle);
//把myStyle这个标签放到head的第一个孩子里

**setAttribute()**设置当前DOM元素的type属性

**insertBefore()**是在前面插入某节点（肯定是提前命名好的啦。）

8.5、一些小区别

var getbody = document.getElementsByTagName("body");
//这个是得到DOM对象
var onebody = document.body;
//这个是得到body，就像在控制台console一样
var onlybody = document.documentElement;
//得到整个HTML结构，同上的形式

9、操作表单

9.1、获得表单的值与设置

依旧和上面所说的一样，也是定义取得DOM对象，然后进行读值.value等等。相应的，也可以进行赋值。

form action="#" method="post">
    <p>
    <span>密码：</span><input type="password"  id="input-pwd">
    </p>
</form>
<scriot>
	var pwd = document.getElementById('input-pwd');
    pwd.value;//得到密码框的值
    pwd.value='121221'//修改值
</scriot>

9.2、表单提交与加密

<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
//引入md5

在form中设置好method是post，安全性提高，因为默认的是get方式，可以在url处查询到。

<form action="#" method="post">
<p>
<span>用户名：</span><input id="username" type="text" name="username" >
</p>
<p>
<span>密码：</span><input type="password"  id="input-pwd">
    //设置一个表面上输入的框框，但是不设置name，这样就不能被截获。
</p>
<input type="hidden" id="md5-pwd" name="md5pwd">
    //在这里设置一个隐藏的md5密码框，通过它的DOM对象来获得表面上密码框的md5加密后的值
    
<button type="submit" onclick="aaa()">提交</button>
    //使用onclick来获得点击监视，当点击的时候执行aaa()函数
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>

<script>
    function aaa() {
        var md5pwd = document.getElementById('md5-pwd');
        var pwd = document.getElementById('input-pwd');
        md5pwd.value=md5(pwd.value);
        console.log(md5);
        console.log('2');
    }
</script>

10、jQuery

使用 $符号指代。使用方法为$ (选择器).action()

例如

$('#pwd').click(function(){
alert('Hello jQuery')
});

$('.pp').mousemove(function(e){
alert('cnm');
})

10.1、jQuery事件

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        #divmove{
            height: 600px;
            width: 600px;
            border: 1px solid black;
        }
    </style>

<body>
mousezz:<span id="mouse"></span>
<div id = "divmove">
移动鼠标试逝
</div>
<script>
    $(document).ready(function (){
        $('#divmove').mousemove(function (e){
            $('#mouse').text('x:'+e.pageX+'y:'+e.pageY)
        })
    });
</script>
</body>