快速入门JavaScript

已于 2024-07-26 02:01:18 修改
阅读量473 收藏 10
点赞数 8
文章标签： javascript 开发语言 ecmascript
于 2024-03-16 19:30:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70215122/article/details/136766998
版权

1.1 javaScript  历史

创始人 布兰登 艾奇 生于1961年 在1995设计LiveScript后改名为JavaScript

1.2 javaScript 是什么类型的语言

JavaScript是一种在客户端运行的脚本语言（不需要编译，由js引擎逐行解释执行）

1.3 JavaScript可以做什么

网页特效 服务端开发 桌面开发 移动端开发 控制硬件 游戏开发 表单的动态校验

1.4 JavaScript/HTML/CSS的关系

html 决定了网页结构和内容

css 决定网页呈现给用户的美观表现

JavaScript 决定实现功能比如网页控制实现业务逻辑

1.5 JavaScript的组成

ECMAScript : JavaScript语法

DOM  : 页面文档对象模型

BOM  :  浏览器对象模型

JavaScript组成

1.6 JavaScript书写位置

行内式

直接写在元素内部

<input type="button" value="弹出" onclick="alert('已弹出')">

内嵌式

写在HTML文件内

<script>

               alert(' 已弹出')；

<script>

外部式

新建js文件直接写

alert('已弹出')

在HTML文件中

<script  src="文件路径"><script>

JavaScript注释
单行注释：

//被注释的内容

多行注释：

/*
   被注释的内容
   被注释的内容
   被注释的内容
*/

输入和输出

 alert() :浏览器弹出警示框

<script>

            alert('已弹出');

<script>

console.log(): 浏览器控制台打印输出

<script>

           console.log('已弹出');

<script>

prompt() :浏览器弹出输入框

<script>

             prompt('请输入');

<script>

2.1变量

变量：储存数据的容器，可以通过变量名获取或者修改数据.

2.2 变量的本质

本质：程序工作中在内存空间中申请占用一块空间来存放数据

2.3使用变量

声明变量

var age;//声明一个变量，age为变量名

var是JavaScript声明变量的关键字,使用var声明变量后，计算机会自动分配内存空间 .

赋值

var age=18;

简单的一个程序hello world

var name1='Helloworld';
console.log(name1);//控制台可见
alert(name1);//对话框可见

简单的变量使用

弹出输入框，输入数据，然后再弹出对话框输出刚才输入的数据.

var data = prompt('输入数据');//创建一个容器，将对话框的数据放到容器里
alert(data);//将容器里的东西打印到对话框

2.4 变量的扩展语法

变量的更新

var data='可乐';
//alert(data);//显示可乐对话框
data='雪碧';//雪碧将可乐的容器占据。
alert(data);//data变成了雪碧的容器，就会显示雪碧的对话框

2.5 变量的命名

3.1 数据类型

不同类型的数据需要内存的大小不同，需要分类充分利用内存空间，定义了不同的数据类型

3.2 变量的数据类型

JavaScript是动态语言，不用提前声明变量的类型，在运行过程中会自动确定。

var kele=‘可乐’；//kele会被自动确认成字符串类型

kele='123';//JavaScript仍然可以被执行，JavaScript的数据类型是可以改变的。

3.3 JavaScript数据类型的种类

简单的数据类型

获取变量的数据类型

typeof可以来获取检测变量的数据类型

var num =10;

console.log(typeof num)//会输出num的数据类型

var str='hello';

console.log(typeof str);//会输出string的数据类型

var bo=true;

console.log(typeof bo);//会输出boolean数据类型

var ud =undefined;

console.log(typeof ud);//会输出undefined

var nu=null;

console.log(typeof nu);//会输出object

运行控制台 

number

string

boolean

undefined

object

字面量

字面量是用于表达源代码中一个固定值的表示法

3.4 数字型 Number

JavaScript的数字型可以保存整数值和浮点数值

var age =21；

var PI=3.14；

数字型进制

八进制

var num=010;//数字前面加0表示八进制，取值范围（1-7）

console.log(num);//控制台会输出它的十进制

十六进制

var num=0x8;//数字前面加0x表示十六进制，取值范围（1-9 a-f）

console.log(num);//输出num的10进制

JavaScript数值的最大值和最小值

alert(Number.MAX_VALUE);//最大值

alert(Number.MIN_VALUE);//最小值

数字型的特色值

isNaN()方法

判断是否是一个非数字

var a=12;

console.log(isNAN(a));//判断它是否是一个非数字，是数字返回false，不是返回true

3.5 字符串型 String

var strA="hello world";//双引号

var strB='hello world';//单引号

HTML标签使用双引号，JavaScript都可以使用，最好用单引号

转义字符

转义字符都是以 /  开头

转义符的使用

var a='hello \n world';

console.log(a);

输出

hello

world

字符串的长度

通过length属性可获取字符串的长度

var str ='hello warld';

console.log(str.length);//获取str的长度

字符串拼接

用+号拼接

字符串A + 字符串B=字符串AB

console.log('你'+'好');

输出

你好

字符串型+数字型=字符串型

console.log('李'+2);

输出

李2

只要字符串与其他类型拼接得出结果也是字符串类型

3.6 布尔型 Boolean

var a=true;//a就是布尔型

var b=false//b也是布尔型

布尔型运算

var a=true;

console.log(a+1);//true在运算中等于1，false等于0

输出

2

3.7 Undefined

var a;// 仅仅声明没有赋值就被称为Undefined

undefined的运算

undefined+数字=NaN；//不是一个数字

3.8 null 空值

null 是一个值

var sp =null；

var b= sp+1；//b=1

4.1 数据类型转换

字符串转换

toString()

var num =1；//数字型

console(num.toString());//转换成字符串

console.log(typeof num.toString());//num的类型

控制台

1
string

String() 

var num1 =2；//数字型

console.log(String(num));//转换成字符串

console.log(typeof String(num));//num的类型

控制台

2
string

 任意类型+字符型

var num2 =3；//数字型

console.log(num2+'hello');//转换成字符串

console.log(typeof (num2+'hello'));//num的类型

控制台 

3hello
string

转换为数字型

parseInt()

var st=prompt('字符型');//输入任意字符

console.log(parseInt(st));//输出数字型（整数）

parseFloat()

var st=prompt('字符型');//输入任意字符型

console.log(parseFloat(st));//输出数字型（浮点小数）

Number()

var st='2233';//字符型

console.log(Number(st));//会输出数字型

隐式转换（- * /）

console.log('2233' -0);//也能进行转换数字型

布尔型转换

Boolean()

代表空，否定的会被转换为false，如0 null NaN undefind

其余值会被转换为true ,如 1  '你好'

console.log(Boolean(''));//表示null 会输出false

console.log(Boolean(undefined));//表示undefind 会输出false

console.log(Boolean(0));//表示0 会输出false

console.log(Boolean(NaN));//表示NaN 会输出false

console.log(Boolean('你好'));//表示字符串 会输出true

console.log(Boolean(123));//表示除了0以外的数字型 会输出true

控制台

false

false

false

false

true

true

4.2 算数运算符

加，减，乘，除，取余


 

console.log(1+2);//加

console.log(3-2);//减

console.log(2*2);//乘

console.log(4/2);//除

console.log(9%2);//取余

运行

3
1
4
2
1

浮点数精度

var num=0.1+0.1;

console.log(num==0.2);
fales;

浮点数精度很高尽量用整数去运算

4.3 表达式和返回值

表达式：由数字，运算符，变量等组成的式子

返回值：表达式最后得出的结果

console.log(9/3);//表达式

3//返回值

4.4递增递减运算符

前置递增 ++变量

var a=1;

++a;//表示a=a+1

console.log(a);

输出

2

后置递增 变量++

var a=1;

a++;

console.log(a);//输出的是2，前置递增和后置递增单独使用是一样的 

var a=1;

console.log(a++ + 2);//输出3并且a=2

console.log(a);//输出2

前置递减运算符--变量

 var a=1;

 console.log(--a);//输出0,--a=a-1

后置递减运算符变量--

var a=1；

console.log(a-- +2);//输出3，编译后变成a=0

console.log(a);//输出0

4.5 比较运算符

//小于(<)

console.log(0<1);//true

console.log(1<0);//false

//大于(>)

console.log(1>0);//true

console.log(0>1);//false

//大于等于号(>=)

console.log(1>=1);//true

console.log(1>=0);//true

console.log(0>=1);//false

//小于等于

console.log(1<=1);//true

console.log(1<=0);//false

console.log(0<=1);//true

//判等号(==)

console.log(1==1);//true

console.log(1=='1');//true，可以转换数据类型

console.log(1==0);//false

//不等号(!=)

console.log(1 !=1);//false

console.log(1 !=0);//true

//全等号(===或!==)

console.log(1===1);//true

console.log(1===0);//false

console.log(1==='1');//false,数据类型也必须相同

4.6 逻辑运算符

逻辑运算符是用布尔值运算的运算符。返回值也是布尔值，经常用于多个条件判断

//逻辑与 &&
console.log(1>0&&0>1);//1>0返回true ，0>1 返回false,他们两个返回一个true，最终返回值为true
//逻辑或 || 

console.log(1>0||0>1);//1>0返回true ，0>1 返回false,他们两个返回一个false，最终返回值为false

//逻辑非 !
var a=2

console.log(!a>0);//当a不大于0时输出true,大于0时输出false

返回值

true

false

false

逻辑中断

//逻辑与
console.log(2233 && 3344);//如果第一个左边返回为true，那么将会返回右边的值

console.log(0 &&3344)//如果左边返回值为false，则将左边的值返回，&&后面将不会运算
//逻辑或
console.log(2233 || 3344);//如果左边为true，则返回左边

console.log(0||3344);//如果左边为fales,将返回右边

返回值

3344

0
 
2233

3344

4.7 赋值运算符

//=

var a=1;//简单赋值

//+=

var b=1；

b+=1;//b=b+1

//-=

var c=0;

c-=1;//c=c-1

//*=

var d=2;

d*=2;//d=d*2

//  /=

var e=2;

e/=2;//e=e*2

// %=

var f=2;

f%=2;//f=f*2

4.8 运算符优先级

5.1 流程控制

控制代码的结构顺序，有3种结构分别是顺序结构 分支结构 循环结构.

5.2 顺序流程控制

以代码的先后顺序来执行的流程控制

5.3 分支流程控制

在程序中根据不同的条件可以去执行不同的代码

if 语句

                    if语句流程图

if(条件表达式)//如果条件返回为true这可以执行大括号里的语句，为fales跳过大括号的语句继续执行
{
    执行语句
}

列

var a=prompt('请输出');
    if(a>0)//如果输如的数字大于0就会弹出大于
    {
        alert('大于');

    }

    if(a<=0)//如果输入小于0或者是0就会弹出小于等于
    {
        alert('小于或等于');
    }

if else 双分支语句

基本语法

if(条件语句)如果条件语句为ture则执行语句A，为fales则执行语句B

{

          执行语句A

}

else

{

         执行语句B

}

 列

var a =prompt('请输出');
if(a>0)
{
    alert('大于0');
}
else
{
    alert('小于等于0');
}

if else if多分支语句

if(判断条件)
{执行语句}
if else(判断条件)
{执行语句}
if else(判断条件)
{执行语句}
if else(判断条件)
{执行语句}
else//如果都不符合将会执行else的语句
{执行语句}

列

  var a =prompt('数字');
   if(a==1)
   {
       alert('1');
   }
   else if(a==2)
   {
       alert('2');
   }
   else if(a==3)
   {
       alert('3');
   }
   else{2233}

5.4 三元表达式

由三元运算表达的式子  ，++变量，  +  ，？：

判断条件 ？ 表达式A : 表达式B;//如果条件判断为true 返回表达式A，为fales则返回表达式B

   
   var a =prompt('数字');
   a>0 ? a='大于0': a='小于0';
   alert(a);

5.5 switch语句

switch 是多分支语句，基于不同的条件来运行不同的代码

语法结构

switch(表达式)
{
    case 值A:
    执行语句1；
    break;
    case 值B;
    执行语句2;
    break;
    default:
    执行语句3; 
}

列

   var a =prompt('输入数字');
   switch(Number(a))
   {
    case 1:
        alert('你输入的是1');
        break;
    case 2:
        alert('你输入的是2');
        break;
    case 3:
        alert('你输入的是3');
        break;
    default:
        alert('sb');
        
   }

5.6 JavaScript的循环

javaScript主要有三种循环,主要是为了重复执行某些代码

for 循环

//语法结构
for(初始化变量;条件表达式;操作表达式)
{
       循环体//需要循环执行的语句
}
//首先执行初始化变量，然后判断条件表达式如果为true，就去执行循环体再运行操作表达式
//如果条件表达式为false就跳出循环，不再执行操作表达式


//比如让一个语句执行100次
for(var a=1;a<=100;a++)
{
       console.log(a);//被执行的语句
}


//双for循环 语法结构
for(初始化变量A;条件表达式A;操作表达式A)
{     
     for(初始化变量B;条件表达式B;操作表达式B)
     {
           循环体
     }

}
//先执行外部的for循环1次，内部的循环执行全部，然后在执行外部的for循环
//比如
var c='';
for(var a=1;a<=5;a++)
{
    
    for(var b=1;b=5;a++)
    {
       c=c+'※';  
    }
    c=c+'\n';
}
console.log(c);
//会打出一个※组成的正方型

while 循环

//语法结构
while(条件表达式)
{
     //循环体
}
//先执行条件表达式，为true时执行循环体，为false时退出循环，执行后面的代码

//如  执行100次1

var a=1;
while(a<=100)
{
    console.log('1');
    a++;
}

do....while循环

//do while 语法结构
//先执行循环体在执行条件表达式，条件表达式为true再次执行循环体，为false则退出循环
do{
      //循环体
}while(条件表达式)


//简单使用do while

var a=1;
do{
      console.log(a);
      a++;
}while(a<=100)

5.7 continue 和   break

continue 关键字

用于立即跳出本次循环，继续执行下次循环

for(var i=1;i<=100;i++)
{
     if(i==5)
     {
          continue;//遇到continue跳出循环
     }
     console.log(i);//continue运行后此语句跳出一次循环输出，i在等于5的时候不执行
}

break 关键字

用于立即跳出整个循环

//break 关键字
for(var i=1;i<=5;i++)
{
    if(i==3)
    {
         break;跳出整个循环
    }
    console.log(i)//i在等于3时循环不在执行

}

6.1数组

数组概念

指一组数据的集合，每单个数据被称作元素，数组中可以存放元素，数组就是存这一组数据的变量名

//数组可以储存多个不同类型的值
var arr=[1,a,b,4,5,.,,'a'];

创建数组

1. 利用 new 创建数组

//利用new 创建数组
var 数组名 =new Array();//创建一个数组

//创建数组
var arr=new Array(1,2,3,4,a);

2. 利用数组的字面量来创建

//利用数组的字面量来创建
var arr=[];
//创建数组
var arr=[a,1,3]//数据要用到 , 隔开

获取数组的元素

//打印数组的所以元素
var arr=[1,2,a,'xiao',0]
console(arr);


//获取数组元素
console.log(arr[0]);//数组是以0开始进行排列，这里获取的数组元素就是1
console.log(arr[5]);//arr没有第6个数组所以会打印undefined

遍历数组

//把数组的每个元素都访问一遍
var arr=[0,1,2,3,4,5,6];
for(var i=0;i<7;i++)
{
       console.log(arr[i]);随着i的增加循环打出每一个元素
}

数组的长度

//使用length可以访问数组元素的数量
//格式：  数组名.length
var arr=[0,1,2,3,4]

console.log(arr.length);//返回值为5

数组中新增元素

//修改length长度新增数组元素
var arr=[1,2,3,4];
arr.length=5;//增加了两个空元素
console.log(arr[4]);//打印的是undefined


//修改索引号来新增数组元素


var arr=[1,2,3];//三个元素
var arr[3]='123';//创建 一个空位把元素填进去
console,log(arr);//会有四个元素

6.2 函数

函数概念

函数就是封装了一段可以重复执行的代码块，通过函数可以实现大量代码的重复使用。

//比如
function getSum(A,B)//封装函数
   {    
         alert(Number(B)+Number(A));
   }
   var A=prompt();
   var B=prompt();
  
   getSum(A,B);//执行封装的函数

函数的使用

//1 声明函数有两种方式（命名函数）和（匿名函数）
//1命名函数
function 函数名()
{
     函数体
}
//2匿名函数
var 变量名=function()
{
    函数体
}

//2 调用函数

函数名();
//列
//声明函数
//1
function nihao()
{
    console.log('你好')被调用后执行
}

nihao();//调用

//2
var nihao1=function()
{
     console.log('你好');
}

返回

你好

函数的参数

//参数有 形参  实参 两种，形参在封装函数中使用,实参在调用函数中使用


//形参
function 函数名(形参1,形参2......)//可以有也可以没有
{
        函数体(参数1，参数2)
}

//实参

函数名(实参1,实参2........);

//列

function hname(c1)
{
    console.log(c1);
}

hname('你好');//将  你好  赋值与 c1 ，c1在参与函数体的并执行后返回

返回值

你好

参数匹配问题


function mun(a,b)
{
      console.log(a+b);
}
//如果参数匹配，输出结果就是正常

mun(1,2);


//如果实参多于形参，多余的实参将会被省略
mun(1,2,3);

//如果实参多于形参，少于的实参将，多余形参的定义将会是underfund，会输出NaN
mun(1);

输出

3
3
nan

函数的返回值

//函数的返回值
function 函数名()
{
     return 返回值;
}

函数名();


//列
function name()
{
   return 2233;
}

name()l;
console.log(name());

输出

2233
//return中止函数
//函数内return后的代码不会被执行
function name()
{
   return 2233;
   console.log('3344');//此行代码在return后被终止
}

name()l;
console.log(name());



//return 只能返回一个值

function fan(n1,n2)
{
  return n1,n2;
}
console.log(fan(1,2));//只能返回最后的值，只能返回2


//如果函数没有return会返回undefined

function fan2()
{
     //没有return
}
console.log(fan2())//返回undefined

输出

2233
2
undefind

6.3 arguments 

arguments是函数的一个内置对象，储存了传递的所有实参。

function fan()
{
   console.log(arguments);//存储所有传递的实参
}
fan(1,2,3,4,5);

输出

arguments(5)[1,2,3,4,5, callee:f,Symbol(Symbol.iterator):f]

6.4作用域

javaScript作用域：是指代码名字起效果的范围

全局作用域

//全局作用域
//在script标签 或者在js文件内
<script>
      var a=1;在标签内的作用域可以在函数内使用也可以在函数外使用
<script>

局部作用域

//局部作用域 
//在函数内使用的的变量，仅能在函数内部使用不会影响函数外的代码

function a2()
{
    var a=10;
}


var a=100;//不会被函数内的代码影响

变量的作用域

//全局变量
//在全局作用域下的变量全局都可以使用
var num=10;
console.log(num);//可以直接使用
function fan()
{
    console.log(num);在函数内也可以使用
}
fan();






//局部变量
//在局部作用域下的变量 

function fun1()
{
   var num1=12;局部变量仅能在作用域范围内使用
}
console.log(num1);//程序找不到此变量

作用域链

内部函数访问外部函数的变量，用的是链式查找的方法，所以叫做作用域链

var num=223; //全局变量
function fun()
{//fun()函数内没有num的变量
    function fun1()
    {
        console.log(num);
//链式查找先在fun1()函数内找没有然后到fun()函数内找，找不到再向fun函数外找，这样的方式叫做链式
    }
}

6.5 预解析

//预解析
//js引擎把js 里的所有的var function 提到作用域前面，后按照顺序执行代码

console.log(a);//返回值是undefind
var a=10;//把var a;提到作用域前面

变量预解析

//把变量提升声明不提升赋值
console.log(num);
var num=10;
//相当与
var num;
console.log(num);//预解析仅提升变量不提升赋值
num=2233;

 函数预解析

fun();
var fun=function()
{
     console.log(2233)
}
//会报错
//相当于
var fun;
fun();
fun=function()
{
   console.log(2233);
}//通过了预解析这样写是错的说以会报错


//正常写

num();//这样调用就没有问题
function num()
{
    console.log(2233);
}
//通过预解析相当预

function num()
{  
     console.log(2233);
}

num();//和上面的意思是一样的

6.6 对象

对象是一组无序的相关属性性和方法的集合，比如 字符串 数值 数组 函数 基本都属于对象

创建对象

//用字面量创建对象
//创建
var obj=//对象名
{
       name1: '李华威',//属性名：属性值,的方式
       age: '18',
       sex: '武装直升机',
       fun: function()
       {
           console.log('你好')
       }
};
//调用
console.log(obj.name1);//对象名.属性名
console.log(obj['name1']);//对象名['属性名']，两个都可以调用
//调用方法
obj.fun();//对象名.函数名

//用new Object创建对象

var obj=new Object();//创建对象

obj.nume1='李华伟';//添加对象的属性
obj.hello=function()//添加对象的方法
{
     console.log('你好');
}
//调用
console.log(obj.nume1);//调用对象
obj.hello();//调用方法


//用构造函数创建对象
//格式

function 构造函数名字()
{ 
     this.属性1=属性值;
     this.属性2=属性值;
     this.属性3=属性值;
     this.方法=function()
     {
           //函数体
     }
}

//调用
new 构造函数名();


//列

function Boy(name1,age)
{ 
      this.name1=name1;
      this.age=age;
      this.gm=function(game)
      { 
           console.log(game);
      }
}
var xm = new Boy('小明',18);

console.log(xm.name1);//调用
console.log(xm.age);
xm.gm('lol');//执行方法

遍历对象

//for in的方法遍历对象
var obj=
{ 
     name1:'xiao',
     age:18,
     sex:'武装直升机'，
     fun:function()
     {
           console.log('方法');
     }
}

for(var k in obj)
{
    console.log(k);//打印属性名
    console.log(obj[k]);//得到属性值
}

6.7 内置对象

MDN

可以通过MDN查询内置对象的属性

MDN 网络文档 (mozilla.org)

Math对象

//Math不是一个构造函数，不用new可以直接使用
//圆周率
console.log(Math.PI);
//向下取整数
console.log(Math.floor());
//向上取整数
console.log(Math.ceil());
//就近取整数
console.log(Math.round());
//绝对值
console.log(Math.abs());
//最大值
console.log(Math.max());
//最小值
console.log(Math.min());
//取0<=x<1范围的随机小数
console.log(random());

Date对象

用来处理日期和时间的


//使用Date对象
var date=new Date();//Date是个构造函数，必须用new来创建日期对象
console.log(date);//Date没有参数，返回系统当前时间
//Date的参数可以是数字型也可以是字符型
var dateA=new Date(2024,5,6);//数字型的参数格式
console.log(dateA);//返回的月份是4月
var dateB=new Date('2024-6-11 12:12:12');//字符形式的参数
console.log(dateB);//返回值


//格式化日期时间
var date=new Date();
console.log(date.getFullYear());//返回当前的年
console.log(date.getMonth()+1);//获取当月（0-11）getMonth获取月份少一个月所以获取当前月要＋1
console.log(date.getDate());//获取当天日期
console.log(date.getDay());//获取星期几（周日为0，周六为6）
console.log(date.getHours());//获取当前小时
console.log(date.getMinutes());//获取当前分钟
console.log(date.getSeconds());//获取当前秒

数组对象

Array对象是用于构造函数的全局对象，数组是类似于列表的高阶对象

//字面量创建数组
var arr=[1,2,3];
//new Array() 创建数组
var arr1=new Array(1,2,3);



//判断是否为数组
//1 instanceof 运算符 判断数组
var arr=[];//创建数组
console.log(arr instanceof Array);//true为是数组，false为不是数组
var obj={}//创建对象
console.log(obj instanceof Array);//返回false

//2 Array.isArray() 的方法判断 ie9版本以上支持
var arr=[];//创建数组
console.log(Array.isArray(arr))//返回为true

var obj={}//创建对象
console.log(Array.isArray(obj));//返回为false


//添加数组元素

//push()添加一个或多个数组元素在末尾
var arr=[1,2,3,4];//创建一个数组
arr.push(5,6);//添加2个数组，返回元素的个数
console.log(arr);//打印出全部数组
//结果应该是 1 2 3 4 5 6 六个元素

//unshift 在开头添加一个或多个元素

var arr=[1,2,3,4];//创建一个数组
arr.unshift(5,6);在前面添加2个元素，返回一下元素的个数
console.log(arr);//打印出的结果应该为 5 6 1 2 3 4

//删除数组元素

//pop() 删除数组末尾的一个元素
var arr=[1,2,3];//创建数组
arr.pop();//删除末尾的数组，返回一下被删除的元素
console.log(arr);结果1 2
//shift 可以删除数组的第一个元素
var arr=[1,2,3];//创建一个数组
arr.shift();//返回被删除的元素，删除开头的数组元素
console.log(arr);结果应该是 1 2


//数组排序
//reverse()颠倒数组中的元素

var arr=[1,2,3]
arr.reverse();//反转数组
console.log(arr);//结果为3，2，1
//sort()对数组的元素进行排序,仅能对个位数进行排序
var arr=[3,4,6,5];
arr.sort();//排序
console.log(arr);结果为：3 4 5 6

//sort()  2 可以对个位数以上的数组元素排序
var arr=[22,33,55,11,10];
arr.sort(function(a,b)
{
      return a-b;//升序的方法，降序return b-a;
});
console.log(arr);


//数组索引方法


//indexOf()数组中查找给定元素的第一个索引
var arr=[0,1,'ni',3,];
console.log(arr.indexOf('ni'))//会返回‘ni’元素的位置，所以会返回2，如果没有这个元素就会返回-1
//lastindexOf()在数组中最后一个索引
var arr=[0,1,2,3,'ni'];
console.log(arr.lastindexOf('in'));
//会返回‘ni’元素的索引号，但是从后面开始，找到后就结束并返回，如果没有就返回-1

数组转字符串方法

//数组转换为字符串


//1. toString() 

var arr=[1,2,3];
console.log(arr.toString());//转换为字符串  1，2，3

//2. join()
var arr=[1,2,3];
console.log(arr.join('|'));//可以定义分割符号 1|2|3

字符串对象

字符串不可变

//字符串不可变

var str='123';//创建字符并赋值
//在内存中创建一个空间将字符'123'方入


str='456';//再次赋值
//再次赋值后str='456'后'123'字符，不可用但并未删除，方置字符'123'的空间仍然占用内存
//字符'456'赋值后是从新开辟一个内存空间并存入。

基本包装类型

//基本包装类型：简单数据类型包装成复杂数据类型让他拥有方法和属性

//原理
//1. 将简单数组类型包装

var temp=new String('any');

//2. temp为临时变量，将临时变量的值给 str

str=temp;

//3. 销毁临时变量temp

temp=null;

//4. 简单的变量被包装后拥有属性和方法

console.log(str.length);//获取str的长度

根据字符返回位置

//indexOf()从左到右开始查询

var str='你他妈1你他妈的2';
console.log(str.indexOf('妈'));//返回第一个'妈'字符的索引号2
console.log(str.indexOf('妈'，3))//从3以后开始查询字符的索引号6
//indexOf如果没有找到字符就会返回-1
console.log(str.indexOf('3'));//返回-1

//lastIndexOf()从右到左开始查询
var str ='你他妈的你他妈，你 ';
console.log(str.lastIndexOf('他'));
console.log(str.lastIndexOf('你',7));
//没有找到就会返回-1

根据位置返回字符

// 1 charAt() 返回指定位置的字符
var str='123';
console.log(charAt(1));//返回是的是2字符

// 2 charCodeAt()  获取字符的ASCII码
var str='abc';
console.log(charCodeAt(0));//0索引号返回的是a字符，a字符对应的ASCII是97
// 3 str[]  获取指定位置处的字符 h5新增
var str='a12b';
console.log(str[0]);//返回的是a字符

字符串的操作方法

// 1.concat()  拼接字符
var str='22';
console.log(str.concat('33'));//返回的是2233
console.log(str.concat('33','44'));//返回的是223344

// 2.substr()  截取字符
var str='01234567';
console.log(str.substr(2,6));//会把345给截出来

// 3.replace() 替换字符
var str='你好';
console.log(str.replace('好','不好'));//会返回'你不好'字符串

// 4.split()   字符转换为数组
var str=2,3,4,5;//创建一个字符串，用 ，为字符串格式
console.log(str.split(','));//将 ，变为分隔符格式，返回的是数组[2,3,4,5]

7.1 Web API

web API主要是针对浏览器提供接口，用于浏览器交互效果

DOM

DOM是文档对象模型是W3C组织推荐的扩展性标记语言的编程接口，通过接口可以改变网页的内容，结构和样式

获取元素

通过ID获取
通过标签名
通过html5新增方法
特殊元素获取

通过ID方法获取

使用getElementByld()方法获取带有ID的元素对象
<div id="ab">abc</div>
<script>
    var adc=document.getElementById('ab');//返回的是标签，没有返回null
    console.log(adc);
    console.dir(abc);//打印元素对象和属性方法
</script>

通过标签名获取

用getElementsByTagName()方法返回指定的标签名的对象集合
<ul>
     <li>0</li>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
</ul>
<script>
       //获得元素对象的集合
       var lis=document.getElementsByTagName('li');
       console.log(lis); //返回值是伪数组0，1，2，3，4.拥有长度
       console.log(lis[0]);//打印出的第一位 0
       console.log(lis[1]);//返回为 2

//遍历每个元素
for(var i=0;i<lis.length;i++){
    console.log(lis[i]);
}
</script>
element.getElementsByTagName()获取元素

<ul>
     <li>0</li>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
</ul>

<script>
       var ul=document.getElementsByTagName('ul');
       console.log(ul[0].getElementsByTagName('li'));//获取第一个元素
</script>
//可以获取某个元素的子元素

html5新增加的获取方法

根据类名返回元素对象
document.getElementsByClassName('类名');
根据选择器返回第一个元素
document.queSelector('选择器');

 

返回选择器中的所有内容
querySelectorAll('选择器')
<div class="fj">轰炸器</div>
<div class="fj">直升机</div>
<div id="qs">
      <ul>
          <li>可乐</li>
          <li>雪碧</li>
      </ul>
</div>

<script>
//getElementsByClassName()
       var fjs=document.getElementsByClassName('fj');
       console.log(fjs);//返回值为伪数组类型

//querySelector()
      var fjs1=document.querySelector('.fj');//类选择器后面跟 .
      console.log('.fj');
      var qs1=document.querySelector('#qs');//id选择器跟 #
      console.log('#qs');
      var li =document.querSelector('li');//可以直接选取标签
      console.log(li);//返回默认第一个li标签的内容
//querySelectorAll()
      var Allfj=document.querSelectorAll('.fj');
      console.log(Allfj);//会将fj的类里的集合全部返回
      var lis=document.querySelectorAll('li');
      console.log(lis);//会将li的集合全部返回
</script>

获取特殊标签

获取body元素
document.body;


获取html元素
document.documentElement;
var bodyEl=document.body;
console.log('bodyEl');//获取body元素


var htmlEl=document.documentElement;
console.log(htmlEl);//返回HTML的标签元素

兔2boy
关注
  • 8
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值