JS基础所有知识点

基础复习笔记

  • 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); //自定义属性赋值

数据类型

6大类

  • 对象
  • undefined
  • Boolean
  • String
  • number

(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

这里特别注意下:

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

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

 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

工具类

获取到样式

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

下面是抖动函数封装

抖动函数封装
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

数组

  • 可以通过修改数组的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

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基础全部基础点

对应的链接是:

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

你可能感兴趣的:(JS基础所有知识点)