js（javascript 脚本）知识点总结

js（javascript 脚本）知识点总结

一、基础知识

1.js简介
（1）定义
    JavaScript一种直译式脚本语言，是一种动态类型、弱类型（Java是强类型）、基于原型的语言，
    内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言
（2）特点
    脚本语言 解释性 基于对象 事件驱动函数 
（3）组成部分 ★
    ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等...)
    BOM:浏览器对象模型
    DOM:文档对象模型
（4）作用
    修改html页面的内容
    修改html的样式
    完成表单的验证

2.js和html整合（两种方式）★
（1）方式1:内部编写js，在页面上直接写
    将js代码放在 <script></script>标签中,一般放在head标签中
    <script type="text/javascript">js代码</script>
（2）方式2:外部有一个独立的js文件  后缀名:.js
    在html中通过script的src属性导入
    <script src="js的路径"></script>    
    注：一旦使用了src属性,那么script标签体中的js代码将不再执行了
        
3.函数定义（两种格式）★
（1）方式1:
    function 函数名(参数列表){
        函数体;
    }    
（2）方式2:匿名函数
    var 函数名=function(参数列表){
        函数体;
    }
    例如:window.onload=function(){};
    注:函数不用声明返回值类型；参数不需要加类型；通过return结束方法将值返回
       函数调用的时候：函数名(参数)
                    
4.常见的事件 ★
（1）焦点 ★
    onfocus:获取焦点
    onblur:失去焦点
（2）表单事件 ★
    onsubmit: 表单提交（form表单里的） onsubmit="return 函数名()
    onchange:改变(下拉选)
（3）页面或者元素或者对象加载事件 ★
    onload:页面加载
    最常用的方式:window.onload=function(){};
（4）鼠标事件(掌握) ★
    onclick:单击
（5）鼠标事件(了解)
    ondblclick:双击
    onmousedown:按下
    onmouseup:弹起
    onmousemove:移动
    onmouseover:悬停
    onmouseout:移出
（6）键盘事件(理解)
    onkeydown:按下
    onkeyup:弹起 ★
    onkeypress:按住 
    
5.事件和函数的绑定（两种方式）★
（1）方式1:
    通过标签（元素）的事件属性   <xxx onxxx="函数名(参数列表)"></xxx>
    若参数为this:将当前的dom对象传递给了函数
（2）方式2:（常用）
    给元素派发事件
    dom对象.onxxx=function(){};
    即：
    document.getElementById("id值").onxxx=function(参数){....}；
    document.getElementById("id值").onxxx=函数名；
    注:内存中应该存在该元素才可以派发事件
    解决办法：
    a.将方式2的js代码放在html页面的最下面
    b.在页面加载成功之后再运行方式2的js代码  通过onload事件.    
     

二、ECMAScript（js基础语法）

1.变量声明 ★
（1）方式一：（常用）
    var 变量名=初始化值;
（2）方式二：
    var 变量名;
        变量名=初始化值;

2.数据类型 ★

  原始类型(5种)
    Null，Undefined
    String（用引号引起来的内容），Number，Boolean
    通过typeof运算符可以判断出属于哪种原始类型
    格式：typeof 变量或值;
    注：原始类型中的String Number Boolean都是伪对象,可以调用相应的方法
    使用typeof的返回值：
    undefined - 如果变量是 Undefined 类型的 
    boolean - 如果变量是 Boolean 类型的 
    number - 如果变量是 Number 类型的 
    string - 如果变量是 String 类型的 
    object - 如果变量是一种引用类型或 Null 类型的 
    
  引用类型  new
（1）Array:数组 ★★
  a.语法:
    官方：
    new Array();//长度为0
    new Array(size);//指定长度的
    new Array(e1,e2..);//指定元素
    非官方：
    var arr=["aa","bb"];
  b.常用属性:length ★
    注:数组长度是可变的；数组可以存放任意值
  c.常用方法:(了解)
    存放值:对内容的操作
        pop():弹    最后一个
        push():插入 到最后    
        shift():删除第一个
        unshift():插入到首位
    打印数组:
        join(分隔符):将数组里的元素按照指定的分隔符打印
    拼接数组:
        concat():连接两个或更多的数组，并返回结果。
    对结构的操作:
        sort();排序
        reverse();反转        
（2）String ★★
  a.语法:
    new String(值|变量);//返回一个对象
    String(值|变量);//返回原始类型
  b.常用属性:length     
  c.常用方法:
    substring(start,end):[start,end) ★
    substr(start,size):从索引为指定的值开始向后截取几个        
    charAt(index):返回在指定位置的字符。
    indexOf(""):返回字符串所在索引        
    replace():替换 ★
    split():切割 ★        
（3）Boolean
    语法:
    new Boolean(值|变量);
    Boolean(值|变量);
    注：非0数字 非空字符串 非空对象 转成true
（4）Number
    语法:
    new Number(值|变量);
    Number(值|变量);
    注:
    null====>0 
    fale====>0 true====>1
    字符串的数字=====>对应的数字
    其他的NaN(not a number)
（5）Date:
  a.语法:
    new Date();
  b.常用方法:
    toLocalString()
（6）RegExp:正则表达式
  a.语法:
    直接量语法  /正则表达式/参数
    直接量语法  /正则表达式/    （常用）★        
    new RegExp("正则表达式")
    new RegExp("正则表达式","参数") 
    参数:
        i:忽略大小写
        g:全局
  b.常用方法: ★
    test() :返回值为boolean
（7）Math:
    Math.常量|方法
    例如：
    Math.PI
    Math.random()  随机数的范围：[0,1) ★
（8）全局 ★    
  a.编码 ★
    decodeURI() 解码某个编码的 URI 
    encodeURI() 把字符串编码为 URI    
  b.强制转化
    Number():强制转换成数字
    String():转成字符串    
  c.尝试转化 parseXxx
    parseInt()  :尝试转换成整数
    parseFloat():尝试转换成小数    
  d.eval() 计算字符串,解析成js代码执行 ★
  
3.运算符
（1）比较运算符: > >= < <=
    若两边都是数字 和java一样
    若一边为数字,另一边为字符串形式的数字,将字符串形式的数字转换成数字再进行比较   3>"2"
    若一边为数字,另一边为普通字符串,返回一个false   3>"hello"
    两边都是字符串的时候,比较ascii码
（2）等性运算符 == ===
    == :只判断值是否相同
    例如："66"==66  true
    ===:不仅判断值是否相同,还要判断类型是否相同
    例如："666"===666 false

4.语句 ★
  if语句，for语句， while 语句和java一样
  switch 和java基本一样(区别：switch 后面可以跟字符串. 还可以跟变量)  

三、BOM（浏览器对象模型）

所有的浏览器都有五个对象，常用的有三个：window,location,history

1.window对象:窗口
（1）常用属性:
    通过window可以获取其他的四个对象
    例如：window.location 等价于 location
（2）常用方法:
  a.消息框
    alert()   警告框
    confirm() 确认框 返回值:boolean
    prompt()  输入框 返回值:输入的内容
  b.定时器 ★
    设置
        var id = setInterval(code,毫秒数):每隔指定的毫秒数执行一次函数,循环,周期执行
        var id = setTimeout(code,毫秒数) :延迟指定的毫秒数之后 只执行一次函数            
        写法例如:
        setInterval(showAd,4000);
        serInterval("showAd()",4000);
    清除
        clearInterval(id):
        clearTimeout(id):
  c.打开和关闭
    open(url)
    close()
  注:若是window对象的属性和方法,调用的时候可以省略window
        
2.location对象:定位信息 地址栏
  常用属性:
  href:获取或者设置当前页面的url(定位信息)
    location.href:获取
    location.href="url":设置 相当于超链接
    
3.history对象:操作历史
  常用方法:
  back();后退
  forward():向前
  go(int)★
    go(-1) 相当于 back()
    go(1)  相当于 forward()

    
四、DOM（文档对象模型）★

1.document树
  当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
  节点(Node):
    文档节点 document  例如：整个文档
    元素节点 element   例如：head.body,title等
    属性节点 attribute 例如：href等
    文本节点 text      例如：文字“点击”
    
2.获取节点: ★
（1）通过document可以获取其他节点:
    常用方法:
    document.getElementById("id值"):获取一个特定的元素
    document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
    document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
    document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)
（2）设置或者获取节点的value属性
    dom对象.value;   获取
    dom对象.value="";设置
（3）设置或者获取节点（元素）的标签体
    dom对象.innerHTML;获取
    dom对象.innerHTML="";设置
（4）获取或者设置style属性
    dom对象.style.属性;获取
    dom对象.style.属性="";设置
（5）获取或者设置元素的属性
    dom对象.属性
            
3.（了解）文档查找
   对于htmldom的操作若在js或者htmldom查找不到，去查找xml dom
   关于文档的操作 在 xml dom 的document中
   关于元素的操作 在 xml dom 的element中
   appendChild(dom对象):在一个元素下添加孩子  

四、常见案例    

1.案例一：js简单校验表单    
（1）需求:表单提交的时候需要校验数据是否完整,若不满足条件,则使用弹出框提示
（2）技术分析:js和html整合,js中变量声明,js事件和函数,获取元素
（3）步骤分析:
    a.先有一个表单
    b.在form上添加一个事件 onsubmit="return checkForm()"
    c.编写checkForm这个方法
    d.获取每个表单子标签的内容
    e.判断是否满足要求,
      若满足,不用管它；
      若不满足,表单不能提交,返回false,且提示信息.
        
2.案例二：图片轮播
（1）需求:每隔3秒图片更新一下
（2）技术分析:bom中window对象的定时器方法
（3）步骤分析:    
    1.在首页上面绑定一个onload事件
    2.事件绑定的函数中编写一个定时器
    3.定时器每隔3秒更换图片:imgObj.src="";    

3.案例三-定时弹出广告    
（1）需求:打开页面后4秒,展示广告,2秒之后,该广告隐藏.再停2秒,继续展示
（2）技术分析:bom中window对象的定时器方法
（3）思路:确定事件->编写函数（获取元素，操作元素）
（4）步骤分析:    
    a.html页面,先把广告隐藏 display: none
    b.确定事件:页面加载成功事件 onload
    c.编写函数
    定时器:
    获取元素:document.getElementById("")
    操作css属性：
    document.getElementById("id").style.属性="值"

4.案例四-表单校验plus
（1）需求:提示信息不用弹出框,将信息追加在文本框后面
（2）技术分析:onsubmit,dom操作 
（3）思路:确定事件->编写函数（获取元素，操作元素）
（4）步骤分析:    
    a.表单
    b.表单提交的时候 确定事件 onsubmit()
    c.校验用户名和密码
    d.获取用户名和密码的对象及值
    e.判断内容,当为空的时候,获取相应的span元素,往span元素中显示错误信息

5.案例五-隔行换色    
（1）需求:一个表格,隔一行换一个色
（2）技术分析:onload,dom操作 
（3）思路:确定事件->编写函数（获取元素，操作元素）
（4）步骤分析:    
    a.html表格加载的时候 确定事件 onload
    b.编写函数
    获取元素(所有的tr元素)
    操作(若当前行是偶数的话加一个样式;若是奇数的话,加另一个样式)

6.案例六:全选或者全不选
（1）需求:将内容中复选框的选中状态和最上面的复选框状态保持一致
（2）技术分析:onclick，checked
（3）思路:确定事件->编写函数（获取元素，操作元素）
（4）步骤分析:    
    a.确定事件 最上面那个复选框的单击事件 onclick
    b.编写函数:让所有的复选框和最上面的复选框状态保持一致
    获取最上面这个复选框选中状态 通过checkbox的checked属性即可；
    获取其他的复选框,设置他们的checked属性即可

7.案例七-左右选中
（1）需求:将左边选中的内容移到右边
（2）技术分析:onclick，select对象.options，option对象.selected
（3）思路:确定事件->编写函数（获取元素，操作元素）
（4）步骤分析:    
    a.确定事件,按钮的单击事件
    b.编写函数:
    点击移动单|多个的:
        首先，获取左边选中的选项  select对象.options--数组
        遍历数组 判断是否选中 option对象.selected
        然后，将其追加到右边的下拉选中
        rightSelect对象.appendChild(option);
    点击移动所有的:
        获取左边的所有的选项，一个个的追加过去

8.案例八-省市联动
（1）需求:选中省的时候,动态的查询当前省下的所有市,然后展示在市的下拉选中
（2）技术分析:数组,onchange事件
（3）思路:确定事件->编写函数（获取元素，操作元素）
（4）步骤分析:    
    a.省的下拉选的选项中添加value属性，当成数组的索引
    b.初始化市
    c.选择省的时候,onchange事件
    d.编写函数
    通过获取的索引获取对应的市的数组 this.value;
    遍历数组,将数组里面的每个值组装成option 添加到select中即可