专注综合财经股票网,提供炒股知识,追涨停技巧等文章,是广大股民的学习社区!

JS基础所有知识点

发布:互联网2019-10-21 08:25:02分类: 国内资讯

基础复习笔记

  • 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转化的结果就是100parseInt()相当于把前面的数字部分转化为数字,后面的字符直接舍弃.他转化不了空,真要是转化空结果就是NaNparseFloat()同上isNaN()判断是不是NaN

作用域重点

  • 域:空间,范围,区域
  • 作用:读,写

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

alert(a); //弹出:function a(){alert(4);}var a=1; //预解析中的a改为了1alert(a);  //弹出1function a(){alert(2);}//函数声明,没有改变a的值。什么也没发生。alert(a); //继续弹出1,因为a在预处理库里面的值没有被改过。var a=3; //预处理中a的值变为3alert(a); //弹出3function a(){alert(4);} //函数声明,什么也没有发生alert(a); //继续弹出3a(); //报错 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<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); //21619String.fromCharCode(22937, 21619); //妙味str.indexOf('m', 3); //9str.lastIndexOf('o'); //16'1000' < '2' //true'1000' > 2 //truestr.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基础全部基础点

对应的链接是:

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

温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!