javascript基础知识


Posted in Javascript onJune 07, 2016

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 = "https://3water.com/";//可以用于打开网页

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实现多域名不同文件的调用方法
Jan 12 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 #Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 #Javascript
javascript如何定义对象数组
Jun 07 #Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 #Javascript
bootstrap输入框组代码分享
Jun 07 #Javascript
javascript 数组的定义和数组的长度
Jun 07 #Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 #Javascript
You might like
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
javascript下过滤数组重复值的代码
2007/09/10 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
Django实现随机图形验证码的示例
2020/10/15 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
高职助产应届生自荐信
2013/09/24 职场文书
家长评语和期望
2014/02/10 职场文书
校企合作协议书
2014/04/16 职场文书
售房协议书
2014/08/19 职场文书
工厂无线对讲系统解决方案
2022/02/18 无线电
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js