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 相关文章推荐
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
微信小程序实现授权登录
May 15 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
TS 类型兼容教程示例详解
Sep 23 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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
js代码实现轮播图
2020/05/04 Javascript
python通过线程实现定时器timer的方法
2015/03/16 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
使用python爬取B站千万级数据
2018/06/08 Python
Python实现最常见加密方式详解
2019/07/13 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python处理excel绘制雷达图
2019/10/18 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
傲盾软件面试题
2015/08/17 面试题
毕业生自我推荐
2013/11/04 职场文书
推荐信模板
2014/05/09 职场文书
党章学习心得体会2016
2016/01/14 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
pandas进行数据输入和输出的方法详解
2022/03/23 Python