JS2

案例1_定时弹出广告    
    步骤分析:
    1.htm 页面,先把广告隐藏
    2.页面加载成功事件 oncload
    3.编写函数
        定时器
        获取元素
        修改元素的样式(修改CSS属性)

在这个例子中用到的页面加载成功事件,定时器都是BOM(浏览器对象模型)中window 对象的方法

关于BOM浏览器对象模型总结:

    所有的浏览器都有5个对象:
        window:窗口对象,如果这个页面包含frame 框架,那么,浏览器会在创建一个window 对象
        location:定位信息,地址栏.访问过的url
        history:浏览的地址历史(前进和后退就是利用的它)
        Navigator:浏览器的信息
        Screen:屏幕的信息
/

1.window 对象:使用他的方法都可以直接省略window
常见属性:
    通过window 对象可以获取其他四个对象:window.history=history
常用方法:
    1.消息框:
            alert(...):警告框
            confirm("你确定要删除吗?"):确定框   有返回值:boolean
            prompt("请输入你的信息"):输入框
    2.定时器:定时器的写法
            setInterval(show,4000);
            setTimeout("show()",4000);    
    3.打开和关闭:
    open(url)
    close();    
//

2.location:定位信息
    常用属性:
        1.href:获取或者设置当前页面的url(定位信息)
        location.href:获取url
        location.href=""   :设置当前页面的url  .相当于a 标签,点击完页面就跳转
///

3.history:历史
    常用的方法:
        1.back():向后退
        2.forward():向前
        3.go(a): a=1 向前   a=-1  向后
//
/

案例3:升级版表单校验
之前简陋版的问题:每一次我们要点击提交对的时候才会收到,提示的信息
我们希望的效果:输入每一栏信息时不符合要求,会直接在后面显示出来,更方便于用户的使用
技术分析:
1.确定事件
        表单提交事件   onsubmit
        文本栏失去焦点事件  onblur
2.编写函数
3.获取元素
4.操作元素:
        获取元素的值    操作标签体     操作标签value 属性
///
步骤分析:
1.表单
2.提交表单的时候确认事件  onsubmit
3.校验用户名和密码
4.获取用户名和密码的对象值
5.判断内容,进行校验

总结:
1.在函数中(事件引出的函数)传入实参this :表示的是当前元素对象(BOM对象)    
2.常见事件(在这个案例中用到了很多事件
    1.焦点事件:onfocus onblur
    2.表单事件:onsubmit   onchange
    3.页面加载事件:onload        
    

复习事件绑定的方式:
    1.通过元素的事件属性
    2.通过给元素对象派发事件
阻止默认事件的发生:
 preventDefualt();
     格式:定义函数时:
             function 函数(){
                 var event||window.event;
                //阻止默认事件的发生
                event.preventDefault();
             }    
 阻止事件的传播:
 stopPropagation:
 格式:定义函数时:
             function 函数(){
                 var event||window.event;
                //阻止默认事件的发生
                event. stopPropagation();
             }    
 
    
隔行换色案例：
技术分析：
1.确定事件，onload
2.获取元素：
    通过ID一次获取一个元素：docunment.getElementById("id值")
    Dom 操作：document.getElementByTagName("标签名") ：通过标签名获取一组元素。返回的是数组
Array:
    常用属性：
    length

步骤分析：
1.确认事件：加载的时候
2.编写函数：
    a.获取当前所有元素
    b.获取所有元素的行编号，判断奇偶。从而添加不一样的颜色

//
案例5：多选框，全选或者是全不选
步骤分析：
1.确定事件：最上面的复选框（input的checkbox 对象）的单击事件 onclick
2.编写函数：保证下面的复选框对的状态和最上面的复选框是一样的（checked    ="checked"就是选中状态
    如何获取复选框的状态：checkbox 对象有一个checked 属性，返回值为boolean
            获取状态：通过checkbox 对象获取checked 属性的值
    获取其他的复选框的checked 属性让他们保持一致
//
//
/

Dom（文档对象模型）：

在学习DOM文档对象时，一定要先明白，事件（也是元素的属性）和函数。

常见事件：

1.焦点：onfocus//onblur

2.表单事件：onsubmit//onchange

3.页面或者是元素的加载：onload

经常使用的方式是：window.οnlοad=function(){}  直接在<script></script>中写

然后就是明白函数与事件的绑定（见笔记JS1）

之后就是学习DoM 对象
当浏览器接收html 代码时，浏览器会将所有的代码装载到内存中，形成一棵树（document树） 

       

1.节点（Node）:
        文档节点 document
        元素节点 element
        属性节点 attribute
        文本节点 text
2.获取节点：
    通过document 可以获取节点：获取到的是元素对象
        常用方法：
        document.getElenmentById("Id 值")：获取到某个特定元素
        document.getElenmentsBytagName("标签体的名字")：获取一组元素
        document.getElenmentsByClassName("class属性的值"）：获取一组元素
        document.getElenmentsByName("name属性的值"）：获取一组元素        
 3.获取节点的属性：Dom对象.属性
   dom对象.value;//获取value 的值
   dom对象.value="";//设置value 的值
   dom对象.innerHTML;获取标签体的内容（文字内容）
   dom对象.innerHTML=""设置标签体的内容    
   appendChild(dom对象):在这个元素下添加孩子    
//

///

案例：左右选中dom的练习
技术分析：
    1.确定事件：单机
    2.编写函数
     左边为下拉选项
     左边点击多个选项：
     下拉选项中（select对象）：
            获取下拉选项中的所有选项：select对象.options 
            遍历数组，判断是否选中：options.selected 判断是否选中        
     获取左边点击的对象，将其追加到右边的文本框中
     右边的下拉选项.appendChild(选中的选项)
///
案例：省市联动：
在之前的个人信息对的表单代码的设计下
实现：选中省的时候，动态的查询当前省下的所有市，然后展示在市的下拉选项中        
技术分析：
    1.用数组来存储数据
        语法：new Array()：大小为0的数组
             new Array(size)：指定大小
             new Array(e1,e2,e3...):指定元素    
             也可以直接写：var arr=[e1,e2,e3...]
    关于数组特别到不能在特别的地方：
    1.数组是可变的
    2.数组可以存放各种数据（一个数组中可以同时存放不同类型的数据）
    数组的常用方法：
            1.pop():弹出最后一个
            2.push():插入最后
            3.shift():删除第一个
            4.unshift():插入到第一个
            对结构的操作，持久化
            打印数组：join(分隔符)：将数组按照指定的分隔符打印
            拼接数组：concat():连接数组，并将结果返回
                排序：sort();
                反转：reverse();

步骤分析：
    1.省的下拉选项中中添加value属性，当成数组的索引
    2.初始化市：将省和市，组装成二维数组
    3.在选择省的时候绑定 onchange 事件（select 的选项改变，事件获取的值就会改变）
    4.编写函数：
        通过获取省的索引this.value，获取她所对应的市的数组
        遍历数组，将数组中的每个值组装成option 添加到seletc 中即可
//
//
//

引用类型：

1.Array:
    new Array():长度为零的数组
    new Array(size):指定长度的数组
    new Array(e1,e2,e3...):指定元素的数组
2.String:
原始类型中对的String  Number Boolean 都是伪对象，可以调用方法。只有对象才可以调用方法
    语法：
        new String(值|变量):new 出来的都是对象
        String(值|变量)：创建的变量类型是字符串
    常用方法：
        subString(start,end):截取字串
        substr(start,size):向后截取几个
        charAt(index):返回指定位置的字符
        indexOf(""):返回指定位置的字符
        replace()：替换
        split():切割
        。。。。
3.Boolean：
    new Boolean(值)：
    Boolean(值)：
    非零非空就为 true;
4.Number
    new Number():
    Number():
     能将数字字符串，转成数字，null---0  false----0   true----1
     不是数字的:结果为NaN:not a number
5.Date:  

 new Date();
    常用方法：
        toLocalString():将时间转化为字符串
6.MAth:
    math.数值|方法
    math.PImath.random()
7.全局变量!!!!
    1.encodeURI();编码
    2.decodeURI():解码
    
    3.Number():强制转化，不成功则返回Nan
    4.String():强制转换为字符串
    5parseInt():尝试转化为整数
    parseFloat():尝试转化为小数
        能转化多少转化多少
        
    代码：
    6.eval: 计算字符串将他转为JS代码执行
8.RegExp:正则表达式
    语法：
    直接量语法   /正则表达式/参数
    直接量语法  /正则表达式
    
    new RegExp("正则表达式")
    new RegExp("正则表达式",参数)
    参数：
        i:忽略大小
        g:全局
    常用方法：
    test():返回值为boolean