JS学习笔记

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值