javascript基础知识汇总

  • 时间:
  • 8173人关注

本文主要介绍javascript一些基础知识,比较实用,希望能给大家做一个参考。,另外这篇文章主要知识点是关于javascript、基础、javascript的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

1、var msg;//声明一个变量,在没有给此变量赋值以前,该变量名为:undefined

2、msg = "hello";//不适用var则可以声明一个全局变量,但是此变量因为是全局的,所以容易引起其他调用的一些问题,故不推荐

3、javaScript有5种基本数据类型,Undefined、Null、Boolean、Number和String;以及一种复杂数据类型:Object

4、var num=076;//代表的八进制,以0开头,假如后面的数值超出8的范围,例:08、079等,则按十进制解析

5、var num=0x22;//代表十六进制

6、NaN->Not a Number;//非数字,NaN不和任何值相等,包托它自己;判断一个值是否可以转换为数值的方式:isNaN(*),*为所要进行转化的数据

7、向Number转化时,false->0;true->1;""->0;"00022"->22;"helloworld"->NaN;注:采用的是Number()方式

8、假如采用parseInt()方式进行转化则与7(对字符串来说)不同,基本原理如下:

1)对String的第一个非空格字符进行解析,若是空格则跳过,假如是非数字或者负号,则直接返回NaN;
2)对接下去的字符继续解析,直到遇到非数字或者解析完成,返回已经解析的内容;
3)如果解析到字符串的非空格字符以0x开头且后面加16进制字符则转换成16进制,若是0开头且后面加8进制字符则转换为8进制;

例:"1234blue"->1234;""->NaN;"0xA"->10;"070"->56;" 22.5"->22;"   12 457 blue"->12;解析时只跳过1)中出现的空格

9、还可以采用parseInt(*,*)方式,后面一个变量代表的是所要转换的进制;可选16,10,8,2等,例parseInt("10",16)->16,此时不需要再添加0x或者0

10、toString()方法一般不必使用参数,true->"true",都是按照字符串来转换,但是当由数字转换为String时,可以添加参数,用于设置进制

例:var num = 10->String-------num.toString()->"10";num.toString(2)->"1010";num.toString(8)->"12";

11、在JavaScript中以32位数据表示一个数,左移<<不会改变符号位,例:2<<5;-->64即:10->1000000

12、右移分为两种:有符号右移和无符号右移:

1)有符号右移:>>只移动数据位,不移动符号位:-64>>5 ---->-2
2)无符号右移:>>>所有的都要移动,因此负数移动之后会变为正数,且此正数一般非常大

12、switch语句中的case非常强大,可以是数值,也可以是字符串甚至表达式

13、javaScript中function()中可以不添加参数,对于其来说其实是由arguments[]接收的

14、javascript没有块级作用域,如下例子:

 

复制代码 代码如下:
if(true)
{
    var color = "blue";
}
alert(color);

 

会打印出blue出来,这个仅限于alert语句是位于全局环境中,但是在类C语言中则不会出现此种情况,一般都会销毁for函数等循环函数除外,在javascript中也会销毁。

15、instance of 语句用于判断是否属于某种数据类型,或者某种对象:person instanceof Object //变量person是Object?若是则返回true

16、将变量值设置为null可以解除对此变量的引用,javascript的垃圾收集器在下次运行时会将其回收

17、引用类型与类相似,但是不是一码事!创建一个引用类型有两种方法:
1)

复制代码 代码如下:
var person = new Object();//Object是javascript中最常用的一个引用类型
person.name = "zhangsan";
person.age = 30;

 

2)

复制代码 代码如下:
var person = {
    name : "zhangsan",
    age : 30    //注意此处没有","!
};

 

3) 是2)与1)的结合

复制代码 代码如下:
var person = {};
person.name = "zhangsan";
person.age = 30;

 

上述3种方法中第二种是最常用的

18、对象有三种:user-defined-object(用户自定义对象),native-object(内置对象)和host-object(宿主对象)
其中native-object是内置在javascript中的对象,如Array、Math和Date等,而host-object是浏览器提供的对象。

19、JavaScript中打开一个新的窗口用:window.open(url,name,features),这三个参数都是可选择的,说明如下:

1)url是要打开的窗口的地址
2)name是新窗口的名字,可以通过name与新窗口进行通讯
3)features是一个以","分割的字符串,如"height:300,width:200",其内容是新窗口的各种属性

20、可以在html文档中直接调用javascript功能,这个得使用javascript:xxxxxx的方式,其中javascript被称为javascript伪协议
例,有某方法:function test(){}
<a href="javascript:test()">test</a>//此种方法就是使用javascript伪协议进行调用javascript方法,此种方法非常不提倡,因为不同浏览器对此种伪协议的支持是不一样的。

21、很多节点的内容并不在其value中,如:<p id="desc">Hello world</p>,此时可以用var text = document.getElementById("desc").firstChild.nodeValue;
此处text得到的值为:Hello World

22、在html文档中插入一个新元素的方法:

1)创建一个新的元素(包括其内容等)
2)把这个新元素插入节点数

说明:1)创建新元素的方法:var para = document.createElement("p");//创建一个<p></p>
此时这个元素已经具有了<p>的所有属性,但是里面还没有内容,并且并未插入到文档中
然后用var txt = document.createTextNode(text)方法创建一个文本节点内容,将这个文本节点内容插入到<p>中

2)parent.appendChild(child)//方法可以将某个child元素插入到parent元素下
包括两部分的工作:1-将文本节点插入到<p>节点下,para.appendChild(txt);2-将<p>节点插入到其他节点下

23、set和get方法也可以为一个对象设置属性,称之为存储器属性,它可以实现比较复杂的运算,如:

 

复制代码 代码如下:
var m = {
    x : 1,//数据属性
    y : 1,

 

    get r() {return Math.sqrt(this.x*this.x + this.y*this.y);},//存储器属性,此种属性写法:set(或get) 属性名称(param(set方法有)) {函数体}
    set r(newvalue) {
      var oldvalue = Math.sqrt(this.x*this.x + this.y*this.y);
      var radio = newvalue/oldvalue;
      this.x *= ratio;
      this.y *= ratio;
    }
}

 

24、数组的操作:

1)length属性表示长度
2)join()方法:

复制代码 代码如下:
var a = [1,2,3];
a.join()----->"1,2,3"
a.join(" ");----->"1 2 3"
a.join("");----->"123"

3)reverse()//将数组中的元素颠倒顺序
复制代码 代码如下:
var a = [1,2,3];a.reverse().join()--->"3,2,1"

4)sort()//将数组中的元素排序并返回排序后的数组
sort()//按照字母表的顺序进行排序

 

 

复制代码 代码如下:
sort(function(a,b){//a、b指的是数组中的元素
    if(a>b)
    {
        return 1;
    }
    else if()
    {
        return -1
    }
    else
    {
        return 0;
    }
}
)//此种方法可以自由定义自己所需要的排序方式

 

5)concat()//创建并返回一个新的数组,它用于连接数组,它连接的是数组中的元素而不是数组本身

复制代码 代码如下:
var a = [1,2,3]
a.concat(4,5)----->[1,2,3,4,5]
a.concat([4,5])----->[1,2,3,4,5]
a.concat([4,5],[6,7])----->[1,2,3,4,5,6,7]
a.concat(4,[5,[6,7]])----->[1,2,3,4,5,[6,7]]

 

6)slice()返回指定数组的一个片段,可以写两个参数或者一个参数,一个参数代表是从参数当前位置开始一直到结尾,两个参数是指从第一个参数到第二个参数
参数-1,指定了最后一个元素,即倒数第一个元素,而-3则指定了倒数第三个元素

复制代码 代码如下:
var a = [1,2,3,4,5];
a.slice(0,3);----->[1,2,3]
a.slice(3);----->[4,5]
a.slice(1,-1);----->[2,3,4]
a.slice(-3,-2);----->[3]

 

25、window.location = "//www.jb51.net/";//可以用于打开网页

26、setTimeout()//两个参数,一为回调函数,二为回调时间,说明是多少毫秒之后调用此回调函数,如:

复制代码 代码如下:
setTimeout(function(){alert("Hello World");},2000);//两秒之后弹出对话框
clearTimeout(h);//用于取消setTimeout的调用,var h = setTimeout(func,time);

 

27、某个元素的单击事件:var tempelement = document.getElementById("xx");tempelement.onclick = function(){alert("Hello");};

28、var nowtime = new Date();nowtime.toLocaleTimeString();可以显示当前时间(注:是时间而不包含日期)

29、setInterval(func,time);//它用来注册指定的时间之后重复调用的函数,func是重复调用的函数,time是指定的时间,单位毫秒
而clearInterval(h);是用于取消注册的事件,其中的h是var h = setInterval(func,time);

30、无论是setTimeout还是setInterval放time设定为0时,都不是立即执行,而是将这个方法放入到队列中,等待前面的状态执行完毕之后才执行

31、window.location.href//可以获得当前document载入的URL地址,window.location.search//可以得到当前文档中?字符后面的内容,一般用于
检测键值对即name=value的情况

32、window的navigator属性可以包含多个属性:
1)appName----->Web浏览区的全称
2)appVersion----->浏览器厂商和版本
3)userAgent----->通常包含appVersion和其他的信息,没有一定的格式
4)platfrom----->在其运行浏览器的操作系统,甚至有可能使硬件
5)onLine----->此属性如果存在的话表示当前浏览器是否连接到网络
6)geolocation----->用于确定用户地理位置信息的接口

33、Screen对象可以获得有关窗口显示的大小和可用的颜色数量的信息

34、window提供了三种对话框
1)alert-->提示对话框
2)confirm()----->也是显示一条信息,但是要求用户确定或者取消,例:var correct = confirm("hello world"); if(correct){return true}
3)prompt()----->显示一条信息,等待用户输入并返回那个字符串

35、window提供了模态对话框的显示方案:showModalDialog(param1,param2,param3)//
参数一:用以指定提供对话框HTML内容的URL
参数二:可以是一个任意值,这个值在对话框里的脚本中可以通过window.dialogArguments属性的值访问。
参数三:是一个非标准列表,包含以分号隔开的name=value对,如果提供了这个参数就可以配置对话框的尺寸和其他属性,用dialogwidth和dialogheight来
设置对话框窗口的大小,用"resizable = yes"来允许用户改变窗口大小

36、name属性也可以用来获得某些元素,但是name属性只在少数html元素中有效:表单<form>,表单元素,<iframe>和<img>元素
document.getElementsByName();//获得所有name属性组成的数组

37、由于历史原因,只有<form>,<img>和那些有href属性的<a>,才有document.forms.id//name为form标签的id,其他元素是不可以的

38、getElementsByClassName();可以取得parent节点下的相同的className的子节点

39、Node节点的重要属性说明如下:
1)parentNode----->给节点的父节点,假如是document对象则它的父节点是null
2)childNodes----->只读的类数组节点,它是该节点的子节点
3)firstChild和lastChild,该节点的第一个子节点和最后一个子节点
4)nextSibling、previoursSibling,该节点的兄弟节点的前一个和后一个
5)nodeType----->该节点的节点类型,是返回一个数值,9代表document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点
6)nodeValue----->text节点或Comment节点的文本内容
7)nodeName----->元素的标签名,以大写形式表示

40、在Html中可以创建一个可编辑的区域元素,方法:

复制代码 代码如下:
<div id="editor" contenteditable>Click to Edit</div>,可以通过innerHTML属性获取其中的内容;
var editor = document.getElementById("editor"); alert(editor.innerHTML);//显示所有内容,包括<br>等

 

41、window.onload中加载两个function的方法window.onload=function(){
    //此处写两个function
    func1();
    func2();
}

42、对Element设置css属性的方法:

复制代码 代码如下:
var tip = document.createElement("dd");//创建一个元素
tip.style.cssText = "position:absolute;bottom:0;height:20px;width:380px;padding:10px;color:#fff;background:#fff;";//设置元素的css属性

 

查看更多JavaScript的语法,大家可以关注:《JavaScript 参考教程》、《JavaScript代码风格指南》,也希望大家多多支持码农之家。


上一篇:详解javascript正则表达式

下一篇:js的变量提升及实例用法

相关内容

  • 2020版Python学习路线图(附学习资料)

    这篇文章主要介绍了Python学习路线图(2020最新版),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    04-07Python学习路线图

    阅读更多
  • Java和JavaScript是什么关系

    java和javascript外形字母非常像,但是二者是完全不同的二种语言。形象说,二者关系就和雷锋和雷峰塔关系一样。 js属于脚本语言,不需要编就能在浏览器解释执行;而java属于编程语言,需要编译之后才能运行。 通常js写到网页的jsp、html中,由浏览器解释,发挥其作用;而java经过编译成为class文件,运行在web服务器容器中,比如tomcat。 要说二者,看起来相同的地方,也就是编程语法上,看起来都一样。 1、java和JavaScript没有任何的血缘关系,java是是由

    12-18Java与JavaScript关系

    阅读更多
  • JAVA基础班容易吗

    java学习是由简入难的学习过程,不要一开始就学习太过于复杂的,也不要好高骛远,java的基础很重要,所以一定要由最基础的学起,抓实基础。首先要学习java的基础知识。 不要被新技术迷惑,所谓万变不离其宗,新技术都是基于java的基础之上,如果基础不扎实,对于这些新技术的理解也是一知半解,学不到根源。学员通过在Java培训机构地学习理论,项目实践,老师指导等梳理知识点,快速积累经验,让学员能迅速提升软件开发中所需要的各种技能素

    12-04JAVA基础班学习容易吗

    阅读更多
  • 0基础能学javaweb吗

    之所以想要转行学Java web,无外乎是因为对目前自身工作薪资以及发展前景并不满意,想通过学习一门技术进入能符合自身预期目标的行业或者岗位。而Java web开发是目前国内高薪行业之一,是很多同学的选择。如果你之前没有接触过Java的话你可以先从JavaSE开始学起,毕竟JavaWeb前面还有数据库以及web前端。如果你是零基础的话,可以看书开始学起也可以看视频教程开始学,当然每个人的学习方法都是不一样的。 1、首先要了解web是什么,一般呢,java we

    11-29零基础可以学javaweb吗

    阅读更多
  • python基础再学java轻松吗

    java是个好语言,在工程方面比python要好上很多。你要喜欢它才会理解它,感受它,用熟练就好。虽然它可能不优美,不简洁。不过它开发速度快,性能好,稳定。支持也广泛。 java与python都是必须的。我曾经是先写python语言,然后自己写了个工具,把它自动翻译成java,再手工改一改。 java整体开发大些的代码,比如几万行的程序,这方面比python成本反而要低。 python适合几百行,最多几千行的代码。如果写到1万多行就比较辛苦了。 1、Python和Java两种编程

    11-26有python基础学java轻松吗

    阅读更多
  • JavaScript启示录

    JavaScript启示录

    《JavaScript启示录》无关于JavaScript设计模式,也无关于JavaScript面向对象代码实现。《JavaScript启示录》意图通过考察原生JavaScript对象和不同环境对原生对象的支持和细微差别。

    大小:24.4 MBJS

    点击下载
  • Three.js开发指南:WebGL的JavaScript 3D库

    Three.js开发指南:WebGL的JavaScript 3D库

    大小:180.1 MBThree.js

    点击下载
  • HTML CSS JavaScript网页制作从入门到精通

    HTML CSS JavaScript网页制作从入门到精通

    HTML CSS JavaScript网页制作从入门到精通 第3版 共分为19章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特

    大小:65.2 MB网页制作

    点击下载
  • Head First JavaScript程序设计

    Head First JavaScript程序设计

    大小:71.2 MBJavaScript

    点击下载
  • 趣学JavaScript:教孩子学编程

    趣学JavaScript:教孩子学编程

    大小:42.7 MBJavaScript

    点击下载
  • JavaScript和jQuery实战手册

    JavaScript和jQuery实战手册

    JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

    大小:103 MBJavaScript

    点击下载
  • JavaScript前端开发案例教程

    JavaScript前端开发案例教程

    JavaScript是这种运用于Web前端开发的开发语言,具备简易、易懂、实用的特性,用JavaScript开发设计网页页面能够提高网页页面的参与性,为客户出示即时的、动态性的互动感受。 《 JavaScript前端

    大小:75.1 MBJS前端

    点击下载

学习笔记