JS基础所有知识点

最新推荐文章于 2023-05-02 09:40:35 发布

I-T枭

最新推荐文章于 2023-05-02 09:40:35 发布

阅读量563

点赞数

本文章转载于：https://www.jianshu.com/p/56c686bf375c

基础复习笔记

JS效果三要素:
1. 时间
2. 事件
3. 运动轨迹(分步骤来实现先死后活法逐步来)

(1)获取元素 :

getElementById()----静态方法,前面只能跟随document
document.body,document.title ----页面上只有一个的元素
getElementsByTagName()-----动态方法,前面可以是document也可以跟其他元素，返回的是一个类似数组的集合
(1)有类似数组的length
(2)有类似数组的应用方式例如:ali[0]
(3)再用TagName的时候必须要加上[]
(4)所谓的动态方法,是指通过js动态添加的元素，getElementsByTagName()也可以找到
但是document.getElementById是找不到的

(2)事件:

事件:鼠标事件，键盘事件,系统事件,表单事件,自定义事件等等

onclick
onmouseover
onmouseleave
onmousedown
onmouseout
onmouseup
onmousemove
......

添加事件

元素.onmouseover

函数

函数可以理解为方法,工具比如

function abc(){
  /*要做的事情*/
}

直接调用就是abc()
事件调用: 元素.事件 = 函数名
匿名函数

  元素.onmouseover = function(){}
  window.alert(1);  window.alert("ok");

变量

变量就是变化的量,由数字，字母，下划线，美元($)组成.但是开头不能用数字。定义一个变量必须用var也可以用window["xxx"]

var li = document.getElementById("list");
var num = 123;
var name = "leo";

JS属性操作(重点)

属性名
属性值
属性的读取操作:获取,找到
元素.属性名
属性的写操作:替换，修改
元素.属性名 = 新的值
添加的话需要用+=
innerHTML读取元素内所有的HTML代码

属性读写操作的注意事项

JS属性中不允许出现"-",例如font-size改为fontSize
class在JS里面是保留字,在JS作用class要用className
4个绝对不要判断
1.相对路径(src ,href)
2.颜色值
3.innerHTML值也不要(IE678可能有空格)
4.type类型也不要判断.因为IE678下面type更改不了
[]的使用
1. 点"."后面的值无法修改
2. []里面的值可以修改,JS允许把.替换成[] 例如style[attr]这样的

条件判断

if(){}
if(){}else{}
if(){}else if(){}else if(){}

数组

放数据的仓库
中括号[],间隔用逗号,最后一个数据不要加逗号
数组的length属性

自定义索引和属性

自定义属性 abtn[0].abc = 123; //自定义属性
自定义属性赋值 obj.timer = setInterval(function(){},1000); //自定义属性赋值

(1)要是基础类型可以用typeOf()来判断
字符串方法charAt(),获取到字符串第几个charCodeAt()获取到UniCode编码。然后在计算。再利用fromCharCode()换算成字符
(2)要是引用类型可以用instanceOf Array;instanceOf Object 来判断
Number()方法能转化字符串数字，空，空数组，要是前面有0比如00100转化的结果就是100
parseInt()相当于把前面的数字部分转化为数字，后面的字符直接舍弃.他转化不了空，真要是转化空结果就是NaN
parseFloat()同上
isNaN()判断是不是NaN

作用域重点

域：空间，范围，区域
作用:读，写

(1)在JS找到变量前，他要做的就是先找到一些关键字 var function,参数然后在正是运行代码之前他把这些都提前付了一个值,undefined
遇到重名的只留一个
(2)逐行解读代码。每读一行就是到库里面去看看，要是有值就替换，改变表达式的值

alert(a); //弹出：function a(){alert(4);}
var a=1; //预解析中的a改为了1
alert(a);  //弹出1
function a(){alert(2);}//函数声明，没有改变a的值。什么也没发生。
alert(a); //继续弹出1，因为a在预处理库里面的值没有被改过。
var a=3; //预处理中a的值变为3
alert(a); //弹出3
function a(){alert(4);} //函数声明，什么也没有发生
alert(a); //继续弹出3
a(); //报错 a is not a function
第一步:
       预编译他会先找一些关键字存储到内存中。 比如var function 参数等等
       他找到var a 先看左边，不看右边.上来都给他一个未定义 var a = undefined;要是function他就直接替换了
       比如上面a从undefined直接变成了方法
       他根本不考虑后面的值
第二步:
        在一步步执行代码
        要是遇见表达式（表达式就是 var a = xxx）他才会重新替换或者赋值

函数的作用域要区分全局变量和局部变量

在方法内部写var的都是局部。在方法外面的都是全局变量。要是在方法里面不加var,那他改变的就是全局的值.

特别注意的就是在JS里面只有方法有作用域。for和if里面都没有作用域

真和假

真:非0的数字,字符串,true,函数,object,[],{}都是真的
假:就记住6个为假其余都真 0,NaN,空字符串,null,false,undefined

函数返回值return

这里特别注意下:

alert fn1();
function fn1(){
    return function(){
        alert(1);
    }
}

返回的值就是function(){alert(1)}

alert fn1()();
function fn1(){
    return function(){
        alert(1);
    }
}

返回的值就是1

arguments参数合集

arguments表示所有的参数合集

lert(sum(1,2,3));
function sum(){
    var n=0;
    for(var i=0; i<arguments.length; i++){
        n += arguments[i];
    }
    return n;
}

工具类

获取到样式

function getStyle(obj,attr)
{
  return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]
}

兼容IE678 获取到样式合集.获取到元素的属性值

运动函数
//封装运动函数
    //既然是运动函数就需要传递几个条件(参数)
    // 1.对象(你得知道让谁动吧)
    // 2.方向(你得告诉他朝哪边走吧)
    // 3.速度 (你得告诉他一次走多少吧)
    // 4.终点(你得告诉他什么时候停止吧)
    // 5.回调函数(到达终点以后干点什么吧)
    function Imove(obj,attr,step,target,endfn)
    {
        //防止累加,越来越快。这样一上来我都从0开始计算
        clearTimeout(obj.timer);
        //主要是判断速度是正的还是负的，上来先比较。我的思路是要是目标的位置比初始的位置大，则速度肯定是正的，要是小则速度肯定是负的
        step =  target>parseInt(getStyle(obj,attr))? step:-step;
        obj.timer = setInterval(function(){
            var dis = parseInt(getStyle(obj,attr))+step;   //获取到每次走了之后距离最开始的位置
            //判断一下当走的距离要是超过了终点，则必须拉回来。要是没超过。则继续走.
            if(dis>=target&&step>0||dis<target&&step<0)
            {
                dis = target;
            }
            obj.style[attr] = dis+"px";   //给这个对象赋值，让他自己慢慢走。
            if(dis==target)               //当到达了终点了，就不让他走了。这个时候你需要清除定时器了。因为没用了。
            {
                clearInterval(obj.timer);   //清除定时器
                endfn&&endfn();           //执行回调方法
            }
        },100)
    }
    //封装运动函数结束

下面是抖动函数封装

抖动函数封装
function shake(obj,attr,endfn) {
        var arr = [];
        for (var i = 20; i > 0; i -= 2)
        {
            arr.push(i,-i);
        }
        arr.push(0);
        clearInterval(obj.shaker);
        var index = 0 ;
        obj.shaker = setInterval(function(){
            var speed = (parseInt(getStyle(obj,attr))+arr[index]);
            obj.style[attr] = speed +"px";
            ++index;
            if(index==arr.length)
            {
                clearInterval(obj.shaker);
                endfn&&endfn();
            }
        },10)
    }

下面是滤镜opacity函数封装

function doopacity(obj,step,target,endfn)
    {
      var first = getStyle(obj,"opacity")*100;  //获取到滤镜的初始值
       step = target>first?step:-step;    //一步走的距离是正的是负的
        clearInterval(obj.opacity);       //一上来清除定时器。防止累加
         obj.opacity = setInterval(function(){
           var speed = getStyle(obj,"opacity")*100+step;     //改变opacity
           if(speed>=target&&step>0&&speed<=target&&step<0)
           {
               speed = target;        //变成目标值
           }
           if(speed==target)
           {
               clearInterval(obj.opacity);   //要是相当则清空
               endfn&&endfn();                //执行回调函数
           }
             obj.style["opacity"] = speed/100;   //DIV滤镜效果
             obj.style.filter = 'alpha(opacity:' + speed + ')';  //为了兼容性
        },100)
    }

时间函数

getFullYear() //获取到年份
getMonth() //这里特别注意的一定要+1因为他从0开始
getDate() //获取到多少号
getDay() //获取到星期几，得到是一个数值，要是星期天，则得到数字0
getHours() //获取到小时
getMinutes() //获取到分钟
getSeconds() //获取到秒数

Date对象参数

数字形式:new Date(2014,4,1,9,48,12) //特别注意月份从0开始，所以他实际找的是5月

var iNow = new Date();
var iNew = new Date(2014, 10, 26, 21, 56, 0);  //获取的是11月
var t = Math.floor((iNew - iNow)/1000); 
var str = Math.floor(t/86400) + '天' +  Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' +  t%60 + '秒';

天: Math.floor(t/86400);
时: Math.floor(t%86400/3600);
分:Math.floor(t%86400%3600/60);
秒:Math.floor(t%60);

时间戳

getTime();返回的就是格林威治时间1970年 1月1日0点0分0秒0毫秒到现在的毫秒数

字符串获取，封装，截取，查找，检测

length 空格也算长度
charAt()找到子字符串，括号要是什么也不写。默认找到第0个
charCodeAt()得到指定字符串的unicode编码
String.fromCharCode():根据字符编码。返回一个字符。例如:String.fromCharCode(22937);返回的就是妙字
要是想获取到多个，可以String.fromCharCode(22937,22938);

查找indexOf,lastIndexOf

indexof()返回某个字符或字符串的位置.string.indexOf('m',5)代表从str字符串中的第5位开始以后找到m的位置.
如果要是找不到则返回-1
lastIndexOf()从右边往前找，也可以带数字参数，表示从哪里找

比较类，截取类

substring(n,m)表示从第n截取，到第m位置结束.如果没有m默认截取到最后一位,包前不包后.
slice(n,m),str.slice(0,2)与str.slice(2,0)这样的结果完全不一样。后者找不到结果。因为slice()方法不会判断里面的参数大小并交换参数位置.
slice(-2);截取的是从最后一位到倒数第二位,-1表示的最后一位.str.slice(-4,-2);截取的是倒数第四位到倒数第二位

toUpperCase()转换为大写
toLowerCase()转换为小写
split()讲字符串切割成数组

var str = 'www.miaov.com';
str.split('.'); => [“www”, “miaov”, “com”];
var str1 = 'leo'; 
str1.split(); => ['leo'];
str2 = ‘leo’; 
str2.split(‘’); => [“l”, “e”, “o”]；
var str3 = ‘/www.miaov.com/’; 
str3.split(‘/’); => [””, “www.miaov.com”, “”]；
var str4 = ‘2013-11-29-23-07’;
str4.split(‘-‘, 3); => [“2013”, “11”, “29”]

join方法用来把数组变成字符串

var arr = [‘aa’, ‘bb’, ‘cc]; 
arr.join(); => ‘aa,bb,cc’ .join()括号中什么也不写，默认就是用逗号隔开。
arr.join(‘’); => ‘aabbcc’ ；
 arr.join(‘-‘); => ‘aa-bb-cc’

下面是所有的字符串操作总结

var str = '妙味课堂-WWW.miaov.com';

str.charAt(1); //味
str.charCodeAt(1); //21619
String.fromCharCode(22937, 21619); //妙味

str.indexOf('m', 3); //9
str.lastIndexOf('o'); //16

'1000' < '2' //true
'1000' > 2 //true

str.substring(0, 4); //妙味课堂
str.slice(-3); //'com'

str.toUpperCase(); //'妙味课堂-WWW.MIAOV.COM'
str.toLowerCase(); //'妙味课堂-www.miaov.com'

str.split('.', 2); //['秒微课堂-www', 'miaov']

var arr = ['www', 'miaov', 'com'];
arr.join('.'); //'www.miaov.com'

for-in 循环遍历json因为json是个对象。没有长度。类似键值对。循环的是属性

var json4 = { 'name': 'miaov', 'age': 3, 'fun': '前端开发'};
for(var attr in json4){
    alert(attr);
    alert(json4[attr]);
}

var json5 = { 
    url: ['img/1.png', 'img/2.png'],
    text: ['图片一', '图片二']
};

for(var attr in json5) {
    for(var i=0; i<json5[attr].length; i++){
        alert(json5[attr][i]);
    }
}

数组

可以通过修改数组的length属性来清空数组。
从后面添加数组push() arr.push()往数组最后一位加内容..push()方法是有返回值得。返回是数组的新长度
前面添加数组unshift() arr.unshift()往数组的最前面添加内容，返回值为数组的新长度(IE6,7不支持)
删除pop() arr.pop()表示从后面删除一个数组元素。返回值就是要删除的数组
删除shift() arr.shift()删除数组的第一个返回值是被扔掉的值

var arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
arr.unshift(arr.pop()); //数组变为：['Leo', '钟毅', '张森', '杜鹏', 'TM']
或
arr.push(arr.shift()); //数组变为：['钟毅', '张森', '杜鹏', 'Leo', 'TM']

splice()方法
splice(a,b,c) a表示起始位置,b表示个数,c表示要替换的值
b要是为0表示插入，c要是什么也不写表示删除。

代码见下

var arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
//删除
//arr.splice(0, 1); //删掉第0位，删1个。两个参数第一个是从第几位开始，第二个是删掉几个。splice删除的时候有返回值，返回的是被删除的内容
//替换
//arr.splice(0, 1, '莫涛'); //替换第0位，替换1个，替换为'莫涛'。返回的还是删除的东西
//添加
arr.splice(1, 0, '李贤'); //在第1位那里，删除0个，添加了一个'李贤'到了第1位，'钟毅'就变成了arr[2]了。后面也可以添加多个。如果splice删除了0个，那么就没有返回值。

数组去重

var arr = [1, 2, 2, 4, 2];
for ( var i=0; i<arr.length; i++ ) {
    for ( var j = i+1; j<arr.length; j++) {
        if( arr[i]==arr[j] ){
            arr.splice( j, 1 );
            j--;
        }
    }
}
也可以使用indexOf

Sort排序

var arr = ['c', 'd', 'a', 'e'];
arr.sort(); // 'a', 'c', 'd', 'e' 按照unicode编码排序

var arr2 = [4, 3, 5, 76, 2, 0, 8];
// arr2.sort(); // 0, 2, 3, 4, 5, 76, 8 sort默认是将数组中的每一个按照字符串来排序的，因此出现了76排在8前面的情况

// arr2. sort(function( a, b ){
    return a - b; //如果a-b返回正数，就a、b两个数字换个序。如果a-b是负数，就不换序
}) //返回数字从小到大 0, 2, 3, 4, 5, 8, 76

// arr2. sort(function( a, b ){
    return b - a;
}) //返回数字从大到小 76,, 8, 5, 4, 3, 2, 0

随机数

Math.round( Math.random()*80 + 20 ); //返回20~100之间的随机整数

concat连接,表示把2个数组拼接起来

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];

arr1.concat(arr2); //[1, 2, 3, 4, 5, 6] 新数组与原来数组没什么关系。
arr1.concat(arr2, arr3); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

reverse反转

var arr1 = [1, 2, 3];
arr1.reverse();
alert(arr1); // [3, 2, 1]

以上JS基础全部基础点

对应的链接是:

基础知识点所有效果点击这里

作者：我拥抱着我的未来
链接：https://www.jianshu.com/p/56c686bf375c
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

I-T枭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS基础所有知识点

本文章转载于：https://www.jianshu.com/p/56c686bf375c基础复习笔记JS效果三要素:时间事件运动轨迹(分步骤来实现先死后活法逐步来)(1)获取元素 :getElementById()----静态方法,前面只能跟随documentdocument.body,document.title ----页面上只有一个的元素getElementsByTagName()----...
复制链接

扫一扫