javaScript总结

一、第一部分:

1对象分为内建对象,宿主对象,自定义对象。

  • 数组(Array)(内建对象:):它和我们普通对象功能类似,也是用来存储一些值的

                            不同的是普通对象使用字符串作为属性名,而数组是使用数字来作为索引操作元素

@索引:从0开始的整数就是索引

 数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据

  • 创建数组对象

       eg:var arr=new Array();

       console.log(typeof arr);

       向数组中添加元素

              语法:数组[索引] = 值

       arr[0]=12;

③读取数组中的元素

              语法:数组[索引]

如果读取不存在的索引,不会出现报错现象而是返回undefined

④获取数组的长度,可以使用length这个属性获取

语法:数组.length

                  对于连续的数组,使用length可以获取到数组的长度(元素的个数)

                  对于非连续的数组,使用length汇获取到数组的最大的(索引+1)

                     *尽量不要创建非连续数组

⑤修改length

* 如果修改的length大于原长度,则多出部分会空出来

* 如果修改的length小于原长度,则多出的部分会被删除

  1. 数组字面量

1.创建一个数组

       var arr=new Array();

      

2.使用字面量来创建数组

       var arr1=[];

       //语法:[]

       console.log(arr1);

3.使用字面量创建数组时,可以在创建时就指定数组中的元素

       var arr2=[12,34,56,7,8,9,0,3,5];

       console.log(arr2[2]);//56

4.使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作为构造函数的参数传递,元素之间使用,隔开

       var arr3=new Array(12,34,56,7,8,9,0,3,5);

5.创建数组arr4,这个数组中只有一个元素10

       var arr4=[10];

6.创建一个长度为10的数组

       var arr5=new Array(10);

7.数组的值可以是任意的数据类型,包含对象的

       var arr6=["hello",123,false,undefined,null];

8.数组中可以存放函数

       var arr7=[function(){alert(123);},function(){alert("helloworld");}];

       arr7[0]();

9.二维数组

       var arr8=[

                     [1,3,4,5],

                     [1,4,6,7]

              ];

       console.log(arr8[1][2]);

 

  1. 数组的方法

①创建一个数组

②连接两个或更多的数组,并返回结果。

③把数组的所有元素串联成一个字符串。元素通过指定的分隔符进行分隔

 

  1. 关键字的作用

①push()

       - 该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度

       - 可以将要添加的元素作为方法的参数传递,这样这些元素将会自动添加到数组的末尾

       - 该方法会将数组新的长度作为返回值返回

②pop()

        - 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回

③    unshift()

- 向数组开头添加一个或多个元素,并返回新的数组长度     

- 向前边插入元素以后,其他元素的索引会依次调整

④shift()

- 可以删除数组的第一个元素,并将被删除的元素作为返回值返回

  1. 函数的方法apply与call

call()与apply()

              - 这两个方法都是函数对象的方法,需要通过函数对象来调用

              - 当对函数调用call()和apply()都会去调用函数执行

              - 在调用call()与apply()可以将一个对象指定为第一个参数

                     此时这个对象将会成为函数执行时的this

              - call()方法可以将实参在对象之后依次传递

              - apply() 方法需要将实参封装到一个数组中统一传递

this的总结:

              1.以函数的形式调用时,this始终都是window对象

              2.以方法的形式调用时,this就是调用方法的对象

              3.以构造方法的形式调用时,this是新创建的那个对象

              4.使用call与apply调用时,this是指定的那个对象

 

1 内建对象:日期对象Date,Date对象

2.在js代码中使用Date对象来表示一个时间

(1)创建一个Date对象

       如果时间使用构造函数创建一个Date对象,则会封装为当前代码执行的时间

       var d=new Date();

       console.log(d);

(2)创建一个指定的时间对象

需要在构造函数中传递一个表示时间的字符串作为参数

       var date2=new Date("2020-03-23 12:34:12");

       console.log(date2);

(3)

  1. getDate() - 获取当前日期对象时几日

var date=d.getDate();

       console.log(date);

  1. getDay() - 获取当前日期是星期几

        - 会返回一个0~6的值    0 表示周日 1 表示周一     ...     6 表示周六

var day=d.getDay();

       console.log(day);

 

  1. getMonth() - 获取当前日期对象的月份

- 会返回一个0~11的值     0 表示 一月    1 表示二月

 11 表示十二月

var month=d.getMonth();

       console.log(month);

  1. getFullYear() - 获取对象以四位数字返回年份

var year=d.getFullYear();

       console.log(year);

  1. getTime()

              - 获取当前日期对象的时间戳

              - 时间戳,指的是从格林威治标准时间的1970年1月1日,0时0分0秒

              到当前日期所花费的毫秒数(1秒=1000毫秒)                  

- 计算机底层在保存时间时使用都是时间戳

注意时差的问题 我们的时间是北京时间

可以使用时间戳来测试代码的执行性能

二、第二部分:

  1. Math对象和其他对象不同,它不是一个构造函数,它属于一个工具类不用创建对象,它里面封装了数学运算相关的属性和方法

例如:

              Math.PI 表示圆周率(约等于3.14159)

Math.abs(x) - 返回一个数的绝对值

              Math.sin(x) - 返回一个数的正弦

        Math.ceil() - 可以对一个数进行向上取整,小数位只要有值就自动进1

              Math.floor() - 可以对一个数进行向下取整,小数部分会被舍掉

              Math.round() - 可以对一个数进行四舍五入取整

        ceil向上取整 :  num=Math.ceil(1.4);num=Math.ceil(1.0);

        floor 向下取整:     num=Math.floor(123.999);

        round 四舍五入取整:  num=Math.round(1.5);

 

     Math.random()

                     - 可以用来生成一个0-1之间的随机数

                               Math.random()

                     - 可以用来生成一个0-10之间的随机数(整数)

                                   Math.round(Math.random()*10)

                     - 可以用来生成一个0-X之间的随机数(整数)

                                   Math.round(Math.random()*X)

                     - 可以用来生成一个1-10之间的随机数(整数)

                                   Math.round(Math.random()*9)+1

                     - 可以用来生成一个1-X之间的随机数(整数) 

                                   Math.round(Math.random()*(X-1))+1

- 可以用来生成一个Y-X之间的随机数(整数)

                                   Math.round(Math.random()*(X-Y))+Y

 

  1. 字符串中的相关方法

1.在底层字符串中以数组的形式保存

              ["h","e","l","l","o"....]

2.charAt()

                     - 可以返回字符串中指定位置的字符

                     - 根据索引获取指定的字符

3.charCodeAt()

                     - 获取指定位置字符的字符编码(Unicode编码)

4.String.fromCharCode()

                     - 可以根据字符编码获取字符

5.indexOf()   //"hello world";

                     - 该方法可以检索一个字符串中是否含有指定内容

                     - 如果字符串中含有该内容,则会返回第一次出现的索引

                            如果没有找到指定的内容,则会返回-1

                     - 可以指定第二个参数。指定开始查找的位置

       6.     lastIndexof()

                     - 该方法的用法和indexOf()一样

                            不同的是indexOf是从前往后找,

                            而lastIndexof是从后往前找

                     - 也可以指定开始查找的位置

7.slice()  //str="hello world";

                     - 可以从字符串中截取指定的内容

                     - 不会影响到原字符串,而是截取到内容返回

                     - 参数说明:

                            第一个参数:开始位置的索引(包括开始位置)

                            第二个参数:结束位置的索引(不包括结束位置)

                                   - 如果省略第二个参数,则会截取到后边所有的

                                   - 也可以传递一个负数作为参数,负数的话将会从后边计算

8.substring()

                     - 可以用来截取只一个字符串,和slice()类似

                     - 参数说明:

                            第一个参数:开始位置的索引(包括开始位置)

                            第二个参数:结束位置的索引(不包括结束位置)

                                   - 如果省略第二个参数,则会截取到后边所有的

                     - 不同的是这个方法不能接收负值,如果传递负值,则默认为0

                     - 如果第二个参数小于第一个参数,则自动调换位置

       9.split() 很重要的方法

                     - 可以将一个字符串拆分称为一个数组

                     - 参数:

                            需要一个字符串作为参数,将会根据该字符串去拆分数组

10.toUpperCase()

                     - 将一个字符串转换为大写并返回

         toLowerCase()

                     - 将一个字符串转换为小写并返回ss

 

三、运用javaScript写的鼠标拖拽事件小案例:

 

(1)上图是代码效果图。

(2)先设置一个盒子,设置它的高度、宽度、颜色、大小和样式。

(3)鼠标拖拽分为3个阶段:

当鼠标在元素上方按下时,拖拽开始(onmousedown)

当鼠标移动时元素跟随鼠标移动,拖拽进行中(onmousemove)

当鼠标松开时,拖拽停止,元素固定在最后所在位置(onmouseup)

(4)先声明变量获取元素,再写鼠标事件

 

 

(5)计算鼠标与盒子左侧和上方的距离:

左侧距离 = 鼠标水平坐标-盒子左侧偏移距离(offsetLeft)

上方距离 = 鼠标垂直坐标-盒子上方偏移距离(offsetTop)

(6)记得要设置盒子的left&top值

注意:要为元素加上定位

(7)先写鼠标按下事件,再写取消鼠标移动事件,但是需要注意的是:

当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,此时会导致拖拽功能异常,这是浏览器提供的默认行为,如果不希望发生这个行为,则可以通过return false 来取消默认行为

但是这个对IE8一下不起作用

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值