Javascript

Javascript重要知识点梳理

一、Javascript语言基础

1.定义

javascript：是一种运行在浏览器宿主环境中的脚本语言。

2.javascript中的数据类型

n Number : 数值型（整形、浮点型）

n String : 字符串

n Boolean: 布尔型true|false

n Array: 数组

n Object: 对象

n Undefined: 未定义

n Null: 空

3.定义变量

语法：var变量名=值;

注意：var关键字可有可无。

int age = 5;//java 数据类型变量名 = 值;

var age = 5;//javascript

var name="zhangsan"; var score = 55;

强调：变量的数据类型由它的值来确定。

变量的数据类型可以动态变化。（注意：这个特性和java是大大的不同）

4.typeof 关键字

对变量或值调用 typeof 运算符将返回下列值之一：

undefined - 如果变量是 Undefined 类型的

boolean - 如果变量是 Boolean 类型的

number - 如果变量是 Number 类型的

string - 如果变量是 String 类型的

object - 如果变量是一种引用类型或 Null 类型的

示例：

varname = "zhangsan";

var type = typeof name;

alert(type); //string

5.流程控制

顺序结构、选择结构、循环结构

选择结构：if-else if-else、if-else if-else、switch

选择结构：for

二、对话框

  1>.alert     提示对话框(确定按钮)

  2>.confirm   确认对话框（选择）（确定按钮、取消按钮）

     该方法返回值为boolean(true|false)；为true则点击的是确定，否则点击的是取消

     var result = confirm("您确定要执行删除操作吗？");

  3>.prompt    输入对话框（文本框、确定按钮、取消按钮）

     该方法返回值为string；

     var age = prompt("请输入年龄", "18");    

 var age = prompt("请输入年龄");

三、函数

1.字符串常用函数

  0>.length：获取字符串的长度

  1>.substring() : 取子串函数（从一个字符串中截取一部分字符串）

  2>.charAt()：获取指定索引位置的字符

  3>.indexOf()：判断一个字符串在另一个字符串中的索引位置（是否包含另一个字符串）

  4>.lastIndexOf()：判断一个字符串在另一个字符串中的最后一次索引位置

  5>.replace()：使用指定字符串替换其他的字符串

  6>.split()：字符串分割函数

  7>.toLowerCase()：转换为小写字符

  8>.toUpperCase()：转换为大写字符

2.数学运算函数

  1>.Math.abs     取绝对值

  2>.Math.ceil    比num大的最小整数值

  3>.Math.floor   比num小的最大整数值

  4>.Math.round   四舍五入取整

  5>.Math.pow     m的n次方

  6>.Math.random  生成介于0.0~1.0之间的随机数

3.数据类型转换函数

  1>.parseInt()     转换成整数

    var num = parseInt(5.6); //parseInt("521")    parseInt("125abc")    parseInt("125.56abc")

  2>.parseFloat()   转换成小数

    Var num = parseFloat("125.5")

四、数组

  javascript中，数组可以存储多个元素，并且元素的数据类型可以不同；并且可以随时向集合中添加元素。

  1>.创建数组

     var array = new Array();     var array = new Array(10,20,30,40,50);

  2>.添加元素

     array.push(10);  array.push(false);  array.push("abc");  array.push(10,20,30,40,50);

  3>.获取数组的长度

     var count = array.length;

  4>.移除元素

     var ele = array.pop();

  5>.倒置  

     array.reverse();

  6>.排序

     array.sort();

  7>.从数组中获取部分元素

     array.slice(start, end);

  8>.将数组中的元素用指定分隔符拼凑成一个字符串

     var text = array.join("-");

五、时间对象

  1>.new Date()：获取系统当前时间

  2>.toLocaleDateString()：获取年月日部分

  3>.toLocaleTimeString()：获取时分秒部分

  4>.getFullYear()   getMonth()   getDate()  

     getHours()   getMinutes()   getSeconds()

 获取年、月份、日期、时、分、秒

  5>.setFullYear()   setMonth()   setDate()

     setHours()   setMinutes()   setSeconds()

     设置年、月份、日期、时、分、秒

  6>.setTime()    getTime()

     获取或设置当前时间距离1970年1月1日0点0分0秒的毫秒数。

六、自定义函数

1.javascript中如何定义函数（方法）

  语法：function  方法名(参数列表){         function  getSum(a, b){

            //代码块                            return a + b;

        }                                   }

  注意：没有返回值类型；参数列表中每个参数都没有数据类型；返回值通过return关键字；

  调用：直接通过方法名+参数即可调用:    var result = getSum(5, 6);

        方法调用时，传递的实参个数和形参个数可以不同。

七、DOM操作

1.从html文档树中获取元素

  方式一：通过getElement......来获取

  document.getElementById()

  document.getElementsByName()

  document.getElementsByTagName()

  注意：上面三个方法不单单属于document，也属于其他元素节点

  方式二：根据节点之间的关系来获取其他节点（父子、同辈、祖先后代）

  firstChild、lastChild、parentNode、nextSibling、previousSibling

3.Html节点

  节点的类型：元素1、属性2、文本3、注释8、文档9

  所有节点，都包含如下三个属性：

  nodeType : 1|2|3|8|9

  nodeName : 元素节点得到的是节点名称；文本节点为#text

  nodeValue : 文本节点得到的是文本内容；属性节点得到的是属性值；元素节点和文档节点得到的是null

  注意：如何快速获取节点中的文本：使用innerHTML属性。

4.如何创建节点和移除节点

  创建节点：document.createElement("tagName")

  追加节点：appendChild()

  插入节点：insertBefore()

  删除节点：removeChild()

5.样式操作

  document.getElementById("id").style.property="值";

  其中property可以取以下值：

  backgroundColor  color

  border  borderLeft  borderLeftColor  borderLeftWidth  borderLeftStyle

  display  height  width

  margin  marginLeft  marginRight  marginBottom  marginTop   padding...

  cssFloat  clear  position  left  top  right  bottom  zIndex

八、事件

  1>.js中经常使用的事件：

     click、load、dblclick、focus、blur、change、keydown、keyup、

     mouseover、mouseout、mousemove、submit、resize。

  2>.事件详细介绍

     click : 元素被单击时触发

     dblclick : 元素被双击时触发

     load : 元素加载完毕时触发

     focus : 元素获取光标（焦点）时触发

     blur : 元素失去焦点时触发

     change : 元素内容改变时触发

     keydown : 键盘上的按键被按下时触发

     keyup : 键盘上的按键被抬起时触发

     mouseover : 鼠标悬浮到元素上时触发

     mouseout : 鼠标离开元素（可视化区域）时触发

     mousemove : 鼠标在元素上移动时触发

     submit : 表单提交时触发

     resize : 元素大小改变时触发

  3>.注意事项

     change 事件 往往应用于单行文本框、下拉列表、复选框、单选按钮、多行文本框。

     事件对象event

     事件触发时，都可以使用event对象。

     event.keyCode   event.which    获取按键的值    

     a=65 b=66 ... | 回车键Enter=13  左箭头=37 | 上=38 | 右=39 | 下=40

     event.offsetX   获取鼠标相对于事件元素的水平坐标位置

     event.offsetY   获取鼠标相对于事件元素的垂直坐标位置

     event.type      获取事件的类型：click、load、dblclick...

     event.target    获取触发当前事件的元素

     上面所有的事件，都可以通过元素对象.事件名()，来模拟该事件。例如模拟按钮的单击事件可以这样：

     document.getElementById(“btn1”).click();

九、定时器

  1>.setInterval(函数名, 毫秒数)

     特点：每隔指定毫秒数，均会执行一次函数。该函数返回值为定时器编号。

     var intervalId = setInterval(getTime, 1000);

  2>.setTimeout(函数名, 毫秒数)

     特点：经过指定毫秒数，执行函数，且只执行一次，之后定时器失效。该函数返回值为定时器编号。

     var timeoutId = setTimeout(getTime, 1000);

  3>.clearInterval(intervalId)

     清除定时器  inteval

  4>.clearTimeout(timeoutId)

     清除定时器  timeoutId