爆肝归纳JavaScript学习知识点

本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了包括javascript简单入门、javascript基础语法等等整理的知识点,希望对大家有帮助。

爆肝归纳JavaScript学习知识点

相关推荐:javascript教程

一、JavaScript简单入门

1.1.一门客户端脚本语言

运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言:不需要编译,直接就可以被浏览器解析执行了
功能:可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验

1.2.JavaScript发展史

1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C– ,后来更名为:ScriptEase
1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript
1996年,微软抄袭JavaScript开发出JScript语言
1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。

立即学习“Java免费学习笔记(深入)”;

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

1.3.JavaScript优势

a.解释性语言 b.基于对象 c.事件驱动 d.弱类型 e.安全性高 f.跨平台

1.4.JavaScript引用

如需在 HTML 页面中插入 JavaScript,请使用 标签。
会告诉 JavaScript 在何处开始和结束。
之间的代码行包含了 JavaScript


1.5.JavaScript输出的几种方式

window.alert()document.write()innerHTMLconsole.log()

就个人使用来看 console.log()在编程中使用是较多切方便的 直接F12控制台即可查看输出内容

1.6.JavaScript有哪些关键字

在这里插入图片描述

1.7.JavaScript注释

// 这是代码:单句注释,在编辑器一般是ctrl + L键。
/* 这是代码 */:多行注释,在编辑器一般是ctrl + shift + L键。

1.8.JavaScript常见标识符有哪些

在这里插入图片描述

1.9.JavaScript常见HTML事件有哪些

在这里插入图片描述

1.10.JavaScript常见运算符

在这里插入图片描述

1.11.JavaScript常见赋值运算符

在这里插入图片描述

1.12.JavaScript常见比较运算符

在这里插入图片描述

1.13.JavaScript常见逻辑运算符

在这里插入图片描述

二、细讲JavaScript基础语法

2.1.变量

2.1.1.定义一个变量

// 声明一个变量名为test的变量。var test;
var age, name, sex;//声明age、name、sex三个变量
//同时声明变量并赋值var age = 10, name = "小强", sex = "1";

2.1.2.变量命名规则及规范

1、由字母、数字、下划线、符号组成,不能以数字开头
2、不能使用关键字,例如:while
3、区分大小写
规范:约定俗成的写法
1、变量名要有意义.
2、遵守驼峰命名法,驼峰命名法:首字母小写,后面单词首字母大写,例如userName.

2.2.数据类型

其中数据类型有:Number类型、String类型、Boolean类型、Undefined类型、Null类型、Object类型

2.2.1.Number

Number数字类型:包含整数和小数
可以表示:十进制、八进制、十六进制

如:

var num = 10; //十进制var num1 = 012; //八进制var num2 = ox123; //十六进制

数值范围:

console.log(Number.MAX_VALUE); //最大值 值为5e-324console.log(Number.MIN_VALUE); // 最小值 值为1.7976931348623157e+308无穷大:Infinity无穷小:-Infinity

数值判断不可以用小数验证小数以及不要用NaN验证是不是NaN (NaN—-not a number) 但是可以用isNaN— is not a number结果是不是NaN
如:

var num; //声明一个变量,未赋值console.log(isNaN(num)); // true 不是一个数字吗? 结果是true

2.2.2.String

字符串转义符:

转义序列 字符

退格走纸换页换行回车横向跳格(Ctrl-I)‘单引号“双引号双斜杠

eg:

var str = "iam a pm"console.log(str); // iam a pm

字符串拼接:

var str1 = "先生";var str2 = "您好";console.log(str1+str2); // 先生您好

若是字符串和数字拼接 结果也是字符串 拼接效果如上所示

2.2.3.Boolean

布尔类型的话两个属性 true/false

2.2.4.Undefined

undefined表示一个声明了没有赋值的变量,变量只声明的时候值默认是undefined
如:

var num;console.log(num); // undefined

2.2.5.Null

Null表示一个空,变量的值如果想为null,必须手动设置

2.2.6.Object

2.3.数据类型的转换

2.3.1.转换成数值类型

(1)、Number()可以把任意值转换成数值,如果要转换的字符串中有一个不是数值的字符,返回NaN
如:

var num1 = Number("10");console.log(num1); // 10var num2 = Number('10adbdn');console.log(num2); //NaNvar num3 = Number("10.78");console.log(num3); //10.78var num4 = Number('10.65dd');console.log(num4); //NaNvar num5 = Number("a10");console.log(num5); //NaN

(2)、parseInt()转整数
如:

var num1 = parseInt("10");console.log(num1); // 10var num2 = parseInt('10adbdn');console.log(num2); //10var num3 = parseInt("10.78");console.log(num3); //10var num4 = parseInt('10.65dd');console.log(num4); //10var num5 =parseInt("a10");console.log(num5); //NaN

(3)、parseFloat()转小数
如:

var num1 = parseFloat("10");console.log(num1); // 10var num2 = parseFloat('10adbdn');console.log(num2); //10var num3 = parseFloat("10.78");console.log(num3); //10var num4 = parseFloat('10.65dd');console.log(num4); //10var num5 = parseFloat("a10");console.log(num5);

(4)、Number()、parseInt()、parseFloat()三者的区别
Number()要比parseInt()和parseFloat()严格.
parseInt()和parseFloat()相似,parseFloat会解析第一个. 遇到第二个.或者非数字结束

2.3.2.转换成字符串类型

(1)、toString()
如:

var num = 10;console.log(num.toString()); // 字符串 10

(2)、String()
如:

var num1 =5;console.log(String(num1)); // 字符串 5

(2)、JSON.stringfy()

2.3.3.转换成布尔类型

0、空字符串、null 、undefined 、NaN 会转换成false 其它都会转换成true
如:

var num1 = Boolean(0);console.log(num1); // falsevar num2 = Boolean("");console.log(num2); // falsevar num3 = Boolean(null);console.log(num3); / falsevar num4 = Boolean(undefined);console.log(num4); // falsevar num5 = 10;var num6;console.log(Boolean(num5+num6)); / false

2.4.运算符

运算符种类:算数运算符、复合运算符、关系运算符、逻辑运算符

(1)、算数运算符:“+”“-”“*”“/”“%”
算数运算表达式:由算数运算符连接起来的表达式 复合运

(2)、复合运算符:“+=”“-=”“*=”“/=”“%=”
复合运算运算表达式:由复合运算符连接起来的表达式

(3)、关系运算符:“>”“=”“<=”“”“=”“!=”“!==”
关系运算表达式:由关系运算符连接起来的表达式

(4)、逻辑运算符:“&&”“||”“!”
逻辑运算表达式:由逻辑运算符连接起来的表达式

表达式1 && 表达式2
如果有一个为false,整个的结果就是false

表达式1 || 表达式2
如果有一个为true,整个的结果就是false

! 表达式
表达式的结果是true,整个的结果为false
表达式的结果是false,整个的结果为true

2.5.运算符的优先级

由高到低:

() 优先级最高
一元运算符 ++ – !
算数运算符 先* / % 后 + –
关系运算符 > >= < <=
相等运算符 == != === !==
逻辑运算符 先&& 后||
赋值运算符

2.6.函数

2.6.1.简介

JavaScript中的函数就是对象。对象是“名/值”对的集合并拥有一个连到原型对象的隐藏连接。对象字面量产生的对象连接到Object.prototype。函数对象连接到Function.prototype(该原型对象本身连接到Object.prototype)。每个函数在创建时会附加两个隐藏属性:函数的上下文和实现函数行为的代码

2.6.2.函数使用

function functionname(){这里是要执行的代码}

语法:
圆括号可包括由逗号分隔的参数:

(参数 1, 参数 2, …)

由函数执行的代码被放置在花括号中:{}

function name(参数 1, 参数 2, 参数 3) {    要执行的代码}

函数参数(Function parameters)是在函数定义中所列的名称。
函数参数(Function arguments)是当调用函数时由函数接收的真实的值

函数的调用:

//此处创建一个函数sumfunction sum(num1, num2) {    var result = num1 + num2;    console.log("num1 + num2 = " + result);}// 函数调用sum(10, 20);

立即执行函数:

$(function(){//不只有函数 所有变量输出等等在这里写都是页面加载直接运行sum()})

2.7.JavaScript正则表达式

2.7.1.创建正则表达式

字面量。语法:Reg = /pattern/modifiers; 字面量的正则由两个正斜杆组成//,第一个正斜杆后面写规则:/pattern[规则可以写各式各样的元字符|量词|字集|断言…]。第二个正斜杆后面写标识符/modifiers[g全局匹配 | i忽略大小写 | m换行匹配 | ^起始位置 | $结束位置] 标识符。
var Reg = /box/gi;
构造函数。语法 Reg = new RegExp( pattern , modifiers ); pattern ,modifiers此时是字符串。何种方法创建都是一样的,pattern 模式 模板,要匹配的内容,modifiers 修饰符。

var Reg = new RegExp("box","gi");

2.7.2.String中正则表达式方法

方法 描述

String.match(Reg)返回RegExp匹配的包含全部字符串的数组或nullString.search(Reg)返回RegExp匹配字符串首次出现的位置String.replace(Reg, newStr)用newStr替换RegExp匹配结果,并返回新字符串String.split(Reg)返回字符串按指定RegExp拆分的数组

var str = 'a1b2c3a4a5',    reg = /a/g;console.log(str.match(reg)); //["a", "a", "a"]var str = 'a1b2c3a4a5',    reg = /a/;console.log(str.search(reg)); //0var str = 'a1b2c3a4a5',    reg = /a/g;console.log(str.replace(reg,function(){    console.log(arguments);    return 5555;}));var str = 'a,b,c,d',    reg = /,/g;//console.log(str.split(',')); //["a", "b", "c", "d"]console.log(str.split(reg)) //["a", "b", "c", "d"]

2.7.3.RegExp对象的方法

方法 描述

RegExp.exec(String)在字符串中执行匹配搜索,返回首次匹配结果数组RegExp.test(String)在字符串中测试模式匹配,返回true或false

2.7.4.修饰符

修饰符也称作标识符,可指定匹配的模式,修饰符用于执行区分大小写和全局匹配。
i忽略大小写匹配。
g全局匹配,没有g只匹配第一个元素,就不在进行匹配。
m执行多行匹配

var patt =  /pattern/i;         //忽略大小写匹配var patt =  /pattern/g;         //全局匹配var patt =  /pattern/m;         //执行多行匹配

2.7.5.元字符

在正则表达式中具有特殊意义的专用字符。
特殊的转译字符. /。

今天学点啥 今天学点啥

秘塔AI推出的AI学习助手

今天学点啥 258 查看详情 今天学点啥

. 单个任意字符,除了换行符与制表符  转义字符,将具有特殊意义的符号转义成普通符号: .d 数字[0~9]D 非数字s 空格S 非空格w 字符[字母|数字|下划线]W 非字符 单词边界( 除了 (字)字母 数字_ 都算单词边界) B 非单词边界
var reg = /./;//匹配.var reg = //;//匹配ar reg = ///;//匹配/var str = '';var reg = //g;console.log(reg.test(str)); //true

2.8.JavaScript常用对象

2.8.1.Date对象

Date对象是一个有关日期和时间的对象。它具有动态性,必须试用new关键字创建一个实例,如:
var Mydata=new Date();
Date对象没有提供直接访问的属性,只有获取和设置日期的方法,如下表

在这里插入图片描述

2.8.2.String对象

String对象是JavaScript提供的字符串处理对象,创建对象实例后才能引用,它提供了对字符串进行处理的属性和方法(类似java一样)具体如下表:
属性 length —返回字符串中字符的个数。
注意:一个汉字也是一个字符!!

在这里插入图片描述

2.8.3.Math对象

属性:
在这里插入图片描述
Math对象方法:

三角函数(sin(), cos(), tan(),asin(), acos(), atan(), atan2())是以弧度返回值的。可以通过除法Math.PI / 180把弧度转换为角度,也可以通过其他方法来转换。

方法 说明

Math.abs(x)返回x的绝对值.Math.acos(x)返回x的反余弦值.Math.acosh(x)返回x的反双曲余弦值.Math.asin(x)返回x的反正弦值.Math.asinh(x)返回x的反双曲正弦值.Math.atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值.Math.atanh(x)返回 x 的反双曲正切值.Math.atan2(x, y)返回 y/x 的反正切值.Math.cbrt(x)返回x的立方根.Math.ceil(x)返回x向上取整后的值.Math.clz32(x)Returns the number of leading zeroes of a 32-bit integer.Math.cos(x)返回x的余弦值.Math.cosh(x)返回x的双曲余弦值.Math.exp(x)返回 Ex, 当x为参数, E 是欧拉常数 (2.718…), 自然对数的底.Math.expm1(x)返回 exp(x)-1 的值.Math.floor(x)返回小于x的最大整数。Math.fround(x)Returns the nearest single precision float representation of a number.Math.hypot([x[,y[,…]]])Returns the square root of the sum of squares of its arguments.Math.imul(x)Returns the result of a 32-bit integer multiplication.Math.log(x)Returns the natural logarithm (loge, also ln) of a number.Math.log1p(x)Returns the natural logarithm of 1 + x (loge, also ln) of a number.Math.log10(x)Returns the base 10 logarithm of x.Math.log2(x)Returns the base 2 logarithm of x.Math.max([x[,y[,…]]])返回0个到多个数值中最大值.Math.min([x[,y[,…]]])返回0个到多个数值中最小值.Math.pow(x,y)返回x的y次幂.Math.random()返回0到1之间的伪随机数. 可能等于0,但是一定小于1Math.round(x)返回四舍五入后的整数.但是Math.round(-4.40)值为-4Math.sign(x)返回x的符号函数, 判定x是正数,负数还是0.Math.sin(x)返回正弦值.Math.sinh(x)返回x的双曲正弦值.Math.sqrt(x)返回x的平方根.Math.tan(x)返回x的正切值.Math.tanh(x)返回x的双曲正切值.Math.toSource()返回字符串 “Math”.Math.trunc(x)返回x的整数部分,去除小数.

例子1:写一个函数,返回从min到max之间的随机整数,包括min不包括max

function getRandomArbitrary(min, max) {  return min + Math.random() * (max - min);}

例子2:写一个函数,生成一个长度为 n 的随机字符串,字符串字符的取值范围包括0到9,a到 z,A到Z

function getRandomInt(min, max) {  return min + Math.floor(Math.random() * (max - min + 1));}function randomStr(n){  var dict = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';  var str = '';  for(i = 0; i < n;i++){    str += dict[getRandomInt(0,62)];  }  return str;}var str = getRandStr(10);console.log(str);

2.8.4.数组对象

数组的分类**
1、二维数组,二维数组的本质是数组中的元素又是数组。

var arr = [[1,2],[a,b]];alert(arr[1][0]); //a 第2列第1行所在的元素

2、稀疏数组

稀疏数组是包含从0开始的不连续索引的数组。在稀疏数组中一般length属性值比实际元素个数大(不常见)
举例

var a=["a",,"b",,,,"c",,];

数组对象属性

属性 作用

length 属性表示数组的长度,即其中元素的个数prototype 属性返回对象类型原型的引用constructor 属性表示创建对象的函数

1.length属性:

alert(arr.length); //显示数组的长度10arr.length=15; //增大数组的长度,length属性是可变的alert(arr.length); //显示数组的长度已经变为15

2.prototype 属性

prototype 属性返回对象类型原型的引用。prototype 属性是object共有的。
objectName.prototype
objectName 参数是object对象的名称。
说明:用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。
对于数组对象,用以下例子说明prototype 属性的用途。
给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype, 并使用它。

function array_max( ){   var i, max = this[0];   for (i = 1; i < this.length; i++){       if (max < this[i])       max = this[i];   }   return max;}Array.prototype.max = array_max;var x = new Array(1, 2, 3, 4, 5, 6);var y = x.max( );

3.constructor 属性

constructor 属性表示创建对象的函数。
object.constructor //object是对象或函数的名称。
说明:constructor 属性是所有具有prototype 的对象的成员。它们包括除 Global 和 Math对象以外的所有JScript固有对象。constructor属性保存了对构造特定对象实例的函数的引用。

例如:

x = new String("Hi");if (x.constructor == String) // 进行处理(条件为真)。//或function MyFunc {// 函数体。}y = new MyFunc;if (y.constructor == MyFunc) // 进行处理(条件为真)。

Array的对象方法
说明:部分是ECMAScript5的新特性(IE678不支持)

方法 作用

concat()连接两个或者更多的数组,并返回结果join()将数组的元素组起一个字符串pop()删除并返回数组的最后一个元素push()数组末尾添加一个或者多个元素,返回新的长度reverse颠倒数组中元素的顺序shift()删除并返回数组的第一个元素slice()从某个已有的数组返回选定的元素sort()对数组元素排序splice()删除元素,并向数组添加新元素toSource()返回该对象的源代码toString()把数组转化为字符串并返回结果toLocalString()把数组转化为本地元素并返回结果unshift向数组开头添加一个或者更多的元素,并返回新的长度valueof()返回数组对象的原始值forEach()遍历数组对象map()对数组做一些映射filter()过滤every()检查判断some()检查判断reduce()两两执行一定的操作reduceRight()从右到左执行操作indexOf()数组检索查找某个元素Array.isArray([])判断是否是数组

主要对一些新特性进行讲解

concat
concat作用是拼接数组,需要注意的是也可以把一个数组元素作为拼接的元素,如果这样的话,数组会被拉平,再和其它的元素拼接起来成为新的数组,但是不会被拉平两次,concat不会修改原数组。

例如:

var arr=[1,2,3,4,5];arr.concat([10,11],13);//[1,2,3,4,5,10,11,13]arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]

slice
slice(a,b)a和b可以取负数,表示从a位置开始截取到b位置的一段数组,是一个左闭右开的区间,a和b可以取负数,如果是负数代表倒数第a/b个元素

var arr=[1,2,3,4,5];arr.slice(1,3);//[2,3]arr.slice(1);//[2,3,4,5]arr.slice(1,-1);//[2,3,4]arr.slice(-4,-3);//[2]

splice
splice删除元素并向数组添加新元素
object.splice(a)从左边开始删除a个元素
object.splice(a,b)从a位置开始截取其中的b个元素
object.splice(a,b,c,d)从a位置开始截取b个元素,并将c和d或者更多的元素插入原数组
需要注意的是splice会修改原数组

var arr=[1,2,3,4,5];arr.splice(2);//[3,4,5]arr;//[1,2];原数组被修改了var arr=[1,2,3,4,5];arr.splice(2,2);//[3,4]arr;//[1,2,5];var arr=[1,2,3,4,5];arr.splice(1,1,‘a’,‘b’);//[2]arr;//[1,"a","b",3,4,5];

foreach
foreach()函数从头到尾把数组遍历一遍。有三个参数分别是:数组元素,元素的索引,数组本身

var arr = [1, 2, 3, 4, 5];arr.forEach(function(x, index, a){//分别对应:数组元素,元素的索引,数组本身    console.log(x + '|' + index + '|' + (a === arr));});// 1|0|true// 2|1|true// 3|2|true// 4|3|true// 5|4|true

reduce()
Array的reduce()把一个函数作用在这个Array的[x1, x2, x3…]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
var arr = [1, 2, 3];var sum = arr.reduce(function(x, y) {     return x + y}, 0); //参数 0是可选的,如果写了参数0那第一次传递的两个值就是0和1如果不写第一次传递的就是数组的前两个值,计算结果是6arr; //[1, 2, 3]arr = [3, 9, 6];var max = arr.reduce(function(x, y) {     console.log(x + "|" + y);     return x > y ? x : y;});// 3|9// 9|6max; // 9

数组和一般对象的比较

数组/一般对象

相同点都可以继承,对象不一定是数组,都可以当做对象添加属性不同点数组自动更新length按索引访问数组比访问一般对象属性明显迅速。数组对象继承Array.prototype上的大量数组操作方法

数组和字符串的比较

数组 /字符串

相同点字符串是数组的一种不同点字符串是不可变的数组,字符串没有数组的方法

2.9.JSON

2.9.1.stringify()

用于把js对象序列化为JSON字符串

var person={name:"xiaoming",age:12}var json=JSON.stringify(person); //{"name":"xiaoming","age":12}

stringify() 除了可以接受对象外,还可以接受2个参数,第一个参数是过滤器,可以是对象属性的数组集合,也可以是函数;第二个参数是一个选项,表示是否在JSON字符串中保留缩进

数组过滤器:

json=JSON.stringify(person,['name']); //{"name":"xiaoming"}

函数过滤器:

json=JSON.stringify(person,function(key,value){    switch(key){        case "name":           return value+",wang";        case "age":           return undefined;        default:           return value;    }});//{"name":"xiaoming,wang"}

注意,如果函数返回undefined,则该属性就会被忽略;

字符串缩进:

json=JSON.stringify(person,null,4);{    "name": "xiaoming",    "age": 12}

2.9.2.toJSON()

向对象添加toJSON()方法:

var person={    name:"xiaoming",    age:12,    toJSON:function(){        return this.name+" is "+this.age;    }}json=JSON.stringify(person);console.log(json); //"xiaoming is 12"

2.9.3.parse()

parse()除了接受json字符串外,也可以接受一个函数参数。该函数接受2个值,一个键和一个值;

var person=JSON.parse('{"name":"xiaoming","age":12}');var person=JSON.parse('{"name":"xiaoming","age":12}',function(key,value){    if(key=="age"){        return value+10;    }    else{        return value;    }});

2.10.Ajax

2.10.1.创建步骤:

1.创建一个XMLHttpRequest异步对象
2.设置请求方式和请求地址
3.接着,用send发送请求
4.监听状态变化
5.最后,接收返回的数据

例:

const xhr = new XMLHttpRequest()xhr.open('GET', './data/test.json', true)xhr.onreadystatechange = function () {  if (xhr.readyState === 4) {    if (xhr.status === 200) {      console.log(JSON.parse(xhr.responseText))    } else {      console.log('其它情况...')    }  }}xhr.send()

2.10.2.ajax在jQuery中的应用

$.ajax({                    type:"post",  //请求方式                    url:"a.php", //服务器的链接地址                    dataType:"json", //传送和接受数据的格式                    data:{                        username:"james",                        password:"123456"                    },                    success:function(data){//接受数据成功时调用的函数                       console.log(data);//data为服务器返回的数据                    },                    error:function(request){//请求数据失败时调用的函数                        alert("发生错误:"+request.status);                    }});

2.10.3.GET方法

结构

$.get( url,[ data ],[ callback ],[ type ])

参数解释:
在这里插入图片描述

//步骤一:创建异步对象var ajax = new XMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的urlajax.open("get", "users.json");//步骤三:发送请求ajax.send();//步骤四:注册事件 onreadystatechange 状态改变就会调用ajax.onreadystatechange = function () {    if (ajax.readyState == 4 && ajax.status == 200) {        //步骤五:如果能够进到这个判断,说明数据完美的回来了,并且请求的页面是存在的        console.log(ajax.responseText);//输入响应的内容    }};

2.10.4.POST方法

它与$.get( )方法的结构和使用方式都相同,不过之间仍然有一下区别

2.10.5.get与post区别

1.post的安全性高于get;如果以get方式请求,请求参数会拼接到url后面,安全性性低,以post方式请求,请求参数会包裹在请求体中,安全性更高
2.数量区别:get方式传输的数据量小,规定不能超过2kb,post方式请求数据量大,没有限制。
3.传输速度:get的传输速度高于post
因为使用方法相同,因此只要改变jQuery函数,就可以将程序在GET请求和POST请求之间切换

2.11.Cookie

2.11.1.js中cookie的读取操作

function getCookie(c_name){    if (document.cookie.length>0){  //先查询cookie是否为空,为空就return ""      c_start=document.cookie.indexOf(c_name + "=")  //通过String对象的indexOf()来检查这个cookie是否存在,不存在就为 -1        if (c_start!=-1){         c_start=c_start + c_name.length+1  //最后这个+1其实就是表示"="号啦,这样就获取到了cookie值的开始位置        c_end=document.cookie.indexOf(";",c_start)  //其实我刚看见indexOf()第二个参数的时候猛然有点晕,后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项,所以通过";"号是否存在来判断        if (c_end==-1) c_end=document.cookie.length          return unescape(document.cookie.substring(c_start,c_end))  //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的,都是很重要的基础,想了解的可以搜索下,在文章结尾处也会进行讲解cookie编码细节      }     }    return ""  } 

2.11.2.cookie简单存储操作

$.cookie("groupCode",222)

2.11.3.cookie设置过期时间

document.cookie = "name=value;expires=date"

2.11.4.cookie修改

document.cookie = "username=zhangsan";document.cookie = "username=lisi";var cookies = document.cookie;console.log(cookies);

2.11.5.cookie删除

document.cookie = "username=zhangsan";document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";var cookies = document.cookie;console.log(cookies);

2.12.循环

2.12.1.for循环

for是最常用的循环,主要用来循环数组

let arr = [1,2,3];for (let i=0; i<arr.length; i++){ console.log(i,arr[i])}// 0 1// 1 2// 2 3

2.12.2.Array.forEach()

语法:arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

callback为数组中每个元素执行的函数,该函数接收三个参数,currentValue(数组中正在处理的当前元素),index(数组中正在处理的当前元素的索引),array(forEach() 方法正在操作的数组)

thisArg为当执行回调函数 callback 时,用作 this 的值。

let arr = [1, 2,  , 3]let arrCopy1 = []arr.map((item, index, arr) => {     arrCopy1.push(item * 2)})console.log(arrCopy1)// [2, 4, 6]

forEach() 为每个数组元素执行一次 callback 函数
那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)
与map()和reduce()不同的是,它没有返回值,总是返回undefind。
forEach()除了抛出异常以外,没有办法中止或跳出 forEach() 循环。

2.12.3.while

while 语句可以在某个条件表达式为真的前提下,循环执行指定的一段代码,直到那个表达式不为真时结束循环

示例:

let n = 0;while (n < 3) {  n++;}console.log(n);// expected output: 3

注:使用break语句在condition计算结果为真之前停止循环

2.12.4.do…while

do…while 语句创建一个执行指定语句的循环,直到condition值为 false。在执行statement 后检测condition,所以指定的statement至少执行一次

示例:

const list = ['a', 'b', 'c']let i = 0do {  console.log(list[i]) //value  console.log(i) //index  i = i + 1} while (i < list.length)

2.12.5.for…in

for…in循环可以用来遍历对象的可枚举属性列表(包括[[Prototype]]链)

主要用于遍历对象,通过属性列表可以获取属性值

for (let property in object) {  console.log(property) //property name  console.log(object[property]) //property value}

相关推荐:javascript学习教程

以上就是爆肝归纳JavaScript学习知识点的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/552431.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月9日 20:41:54
下一篇 2025年11月9日 20:42:54

相关推荐

  • 项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结

    项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结 随着互联网的快速发展,网页设计已经成为了各行各业都离不开的一项技能。优秀的网页设计可以给用户留下深刻的印象,提升用户体验,增加用户的黏性和转化率。而要做出优秀的网页设计,除了对美学的理解和创意的运用外,还需要掌握一些基本的技能,如…

    2025年12月24日
    200
  • 学完HTML和CSS之后我应该做什么?

    网页开发是一段漫长的旅程,但是掌握了HTML和CSS技能意味着你已经赢得了一半的战斗。这两种语言对于学习网页开发技能来说非常重要和基础。现在不可或缺的是下一个问题,学完HTML和CSS之后我该做什么呢? 对这些问题的答案可以分为2-3个部分,你可以继续练习你的HTML和CSS编码,然后了解在学习完H…

    2025年12月24日
    000
  • 聊聊怎么利用CSS实现波浪进度条效果

    本篇文章给大家分享css 高阶技巧,介绍一下如何使用css实现波浪进度条效果,希望对大家有所帮助! 本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 在上两篇中,我们…

    2025年12月24日 好文分享
    200
  • 巧用距离、角度及光影制作炫酷的 3D 文字特效

    如何利用 css 实现3d立体的数字?下面本篇文章就带大家巧用视觉障眼法,构建不一样的 3d 文字特效,希望对大家有所帮助! 最近群里有这样一个有意思的问题,大家在讨论,使用 CSS 3D 能否实现如下所示的效果: 这里的核心难点在于,如何利用 CSS 实现一个立体的数字?CSS 能做到吗? 不是特…

    2025年12月24日 好文分享
    000
  • CSS高阶技巧:实现图片渐隐消的多种方法

    将专注于实现复杂布局,兼容设备差异,制作酷炫动画,制作复杂交互,提升可访问性及构建奇思妙想效果等方面的内容。 在兼顾基础概述的同时,注重对技巧的挖掘,结合实际进行运用,欢迎大家关注。 正文从这里开始。 在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: 立即学习“前端…

    2025年12月24日 好文分享
    000
  • css实现登录按钮炫酷效果(附代码实例)

    今天在网上看到一个炫酷的登录按钮效果;初看时感觉好牛掰;但是一点一点的抛开以后发现,并没有那么难;我会将全部代码贴出来;如果有不对的地方,大家指点一哈。 分析 我们抛开before不谈的话;其实原理和就是通过背景大小以及配合位置达到颜色渐变的效果。 text-transform: uppercase…

    2025年12月24日
    000
  • CSS flex布局属性:align-items和align-content的区别

    在用flex布局时,发现有两个属性功能好像有点类似:align-items和align-content,乍看之下,它们都是用于定义flex容器中元素在交叉轴(主轴为flex-deriction定义的方向,默认为row,那么交叉轴跟主轴垂直即为column,反之它们互调,flex基本的概念如下图所示)…

    2025年12月24日 好文分享
    000
  • 手把手教你用 transition 实现短视频 APP的点赞动画

    怎么使用纯 css 实现有趣的点赞动画?下面本篇文章就带大家了解一下巧妙借助 transition实现点赞动画的方法,希望对大家有所帮助! 在各种短视频界面上,我们经常会看到类似这样的点赞动画: 非常的有意思,有意思的交互会让用户更愿意进行互动。 那么,这么有趣的点赞动画,有没有可能使用纯 CSS …

    2025年12月24日 好文分享
    000
  • 巧用CSS实现各种奇形怪状按钮(附代码)

    本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮,希望对大家有所帮助! 怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢? 本文基于一些高频出现在设计稿中的,使用 css 实现稍微有点难度和技巧性的按钮,讲解使用 css 如何尽可能的实现它们。【推荐学习:…

    2025年12月24日 好文分享
    000
  • 原来利用纯CSS也能实现文字轮播与图片轮播!

    怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯css也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助! 今天,分享一个实际业务中能够用得上的动画技巧。【推荐学习:css视频教程】 巧用逐帧动画,配合补间动画实现一个无限循环的轮播效果,像是这样: 立即学习“前端…

    2025年12月24日 好文分享
    000
  • 总结整理:需要避坑的五大常见css错误(收藏)

    本篇文章给大家总结5个最常见的css错误,并介绍一下避坑方法,希望对大家有所帮助! 正如我们今天所知,CSS语言是web的一个重要组成部分。它使我们有能力绘制元素在屏幕、网页或其他媒体中的展示方式。 它简单、强大,而且是声明式的。我们可以很容易地实现复杂的事情,如暗黑/光明模式。然而,对它有很多误解…

    2025年12月24日
    000
  • CSS+JS实现爱心点赞按钮(代码示例)

    本篇文章给大家介绍一下css+js实现一个“爱之满满”点赞按钮的方法,希望对大家有所帮助! 前段时间在看一档说唱节目,被里面的一个说唱歌手JBcob的爱之满满这句词给洗脑了。 于是这次给大家带来一个爱之满满的点赞按钮,让大家在点赞的同时还能感受到被爱包裹的感觉。 立即学习“前端免费学习笔记(深入)”…

    2025年12月24日 好文分享
    000
  • 让人眼前一亮的五个前端小技巧

    为了让大家编程更轻松一些,本挑选一些有用的但相对比较少见有用的技巧。废话不多说,开车了。 1.快速隐藏 要隐藏一个DOM元素,不需要JavaScript。一个原生的HTML属性就足以隐藏。其效果类似于添加一个style display: none;。 该段落在页面上是不可见的,它对HTML是隐藏的。…

    2025年12月24日
    000
  • 如何实现炫酷的数字大屏

    依托强大无远开发平台,可以快速实现带各种酷炫联动效果的数字化大屏。一起来看一下吧 DEMO 地址:https://previewer.wuyuan.io/p… 配置地址:https://workbench.wuyuan.io/p… 效果图 1 效果图 2 实现步骤 1. 完成…

    2025年12月24日 好文分享
    000
  • 使用JS或CSS如何实现瀑布流布局,几种方案介绍

    本篇文章带大家了解一下瀑布流布局,介绍一下三种靠谱js方案,以及n种不靠谱css方案。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 本着实用精神,我们今天来分享一下瀑布流布局(昨天有个小兄弟问我怎么做,我找了半天没找到,啊原来写在内网了)。 演示地址: http://www.li…

    2025年12月24日 好文分享
    000
  • 详解CSS3+SVG滤镜实现不规则边框的方法

    本篇文章将介绍一种配合 svg 滤镜实现各种不规则图形添加边框的小技巧。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 需求背景,给不规则图形添加边框 在我们日常开发中,时长会遇到一些非矩形、非圆形的图案。类似下面这些: 使用纯 CSS,搭配一些技巧,是可以制作出上面的图形的,当然…

    2025年12月24日 好文分享
    000
  • 5个有用的css函数(分享)

    CSS 包含了许多函数,而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来,这让我们的开发更加轻松,也减少了对JavaScript的依赖。CSS 函数是它所具有的最强大的特性之一,在本文中,我将介绍一些我认为有用的函数。 (学习视频分享:css视频教程) a…

    2025年12月24日 好文分享
    000
  • CSS元素选择器的运作原理介绍

    推荐教程:CSS视频教程 在前端工程师的日常工作中,使用 CSS 元素选择器是稀松平常的事;无论你是编写一般的 CSS 还是需要经过编译的 SASS,SCSS,LESS等,最终都被编译成一行一行的 CSS 样式属性,最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢? 浏览器渲染 我们先看一下…

    2025年12月24日 好文分享
    000
  • 清除浮动和闭合浮动的介绍

    本篇文章给大家带来的内容是关于清除浮动和闭合浮动的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 为什么要清除浮动 子元素 float:left; 脱离文档流,会造成父元素塌陷(撑不起来) 父元素 靠子元素撑起来 清除浮动  clear:both 清除浮动 // 伪元素 :af…

    好文分享 2025年12月24日
    000
  • 选择器(picker)插件的实现方法介绍(代码)

    本篇文章给大家带来的内容是关于选择器(picker)插件的实现方法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一个正常的选择器插件是非常细致的,一步一步来描述就是。手指滑动内容跟随手指滚动,当内容到底或触顶的时候就不能在滚动并且内容要一直保持在正确的位置上。 第一步…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信