WEB学习——JavaScript

1.主要内容
　　核心（ECMAScript）：它是整个JavaScript的核心，包含基本语法、变量、关键字、保留字、数据类型、语句、函数等
　　文档对象模型（DOM）：包含整个HTML页面内容
　　浏览器对象模型（BOM）：包含整个浏览器的相关内容

2.引入方式
　　内部引入：直接将javascript代码写到< script type=”text/javascript”>< /script>
　　外部引入：需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script标签的src属性引入该外部的js文件

2.ECMAScript
　　1）.语法：
　　　　区分大小写
　　　　变量是弱类型的
　　　　每行结尾分号可有可无（推荐写上）
　　2）.变量：只能使用var定义，如果在函数的内容使用var定义，那么它是一个局部变量，如果没有使用var它是一个全局的。弱类型！
　　3）.数据类型：
　　　　原始数据类型(undefined/null/string/number/boolean)
　　　　引用数据类型（Object，null是属于Object类型，常用7个对象：String、Number、Boolean、Math、Date、Array和Regxp）
　　　　　　可以使用instanceof方法判断变量类型，例如 a instanceof Object 返回true或者false
　　　　注意：null与undefined的区别
　　　　　　　　null：对象不存在
　　　　　　　　undefined：对象存在，但是没有初始化
　　4）运算符：==与===的区别
　　　　==号会尝试进行类型转换，如果转换后值相同，则返回true，===直接进行判断，值或者类型不同直接返回false
　　
　　5）.定时操作：setInterval(code,millisec) 按照指定毫秒值来周期性的调用函数或者表达式
　　　　code：要调用的函数或要执行的代码串
　　　　millisec：毫秒值，周期性调用code
　　　该函数存在返回值，返回的是该函数的ID值，通过该ID值可以将该定时操作结束，通过其clearInterval()方法， 如 clearInterval(id)

　　6）.提交按钮submit，当对其设置监听函数的返回内容，例如onsubmit()(“return checkForm()”)，如果checkForm()函数返回的false，则不发送内容至服务器，不写返回值则返回form表单的值
　　7）函数传参 function fun(parameter1 , parameter2){…}
　　　　注意 不需要var来定义参数，直接写参数名即可
　　　　
3.浏览器对象模型（BOM）
　　1）.Window对象：表示浏览器中打开的窗口
　　
　　2）.Location对象：包含有关当前URL的信息
　　　通过js实现页面跳转的方法：window.location.href=” ”
　　
　　3）.History对象：包含用户（在浏览器中）访问过的URL
　　　返回上一个页面：onclick=”javascript:history.back()”
　　　go参数值：-1返回上一个页面，-2返回上上个页面。1进入下一个历史页面
　　　让按钮点击失效：onclick:”javascript:volid(0)”
　　　　
　　4）.Navigator对象：包含有关浏览器的信息
　　
　　5）.screen对象：有关客户端显示屏幕的信息
　　

4.文档对象模型（DOM）
　　1）文档对象模型
　　
　　Document:整个html文件都成为一个document文档
　　Element:所有的标签都是Element元素
　　Attribute：标签里面的属性
　　Text：标签中间夹着的内容为text文本
　　Node:document、element、attribute、text统称为节点node.

　　2）Document对象
　　每个载入浏览器的 HTML 文档都会成为 Document 对象。
　　
　　两个getElements方法获取之后需要遍历
　　以下两个方法很重要，但是在手册中查不到！
　　　创建文本节点：document.createTextNode()
　　　创建元素节点：document.createElement()
　　
　　->获取元素
　　通过ID获取元素：document.getElementById(“id名称”) ：如果id是一个字符串必须加上”“，如果id是变量则不需要加
　　获取元素内容：document.getElementById(“id名称”).value
　　通过name获取元素：document.getElementsByName(“标签name”)：因为name可以多个相同标签公用，以此来分组，因此该函数返回的是一个数组，需要遍历
　　
　　->获取表格的行
　　首先获取表格：var vTable = document.getElementById(“tableId”) ;
　　获取除表头外的行数： var len = vTable.tBodies[0].rows.length ;
　　　注：tBodies是数组表格自带的一个属性值，该值是一个数组，存储的是表格中tbody标签（一个table中可以有多个tbody），每个tbody有多行；
　　　　　rows表示行标签属性，也是一个数组，存储的是行标签，可以使用其lentgh属性获取每个tbody的行数，也可以通过i下标索引来操作行数据。
　　　　　　例如：vTable.tBodies[0].rows[0].style.backgroundColor=”pink” ;
　　
　　->操作HTML页面内容
　　操作HTML元素：通过id对页面元素进行赋值
　　　　　　document.getElementById(“id名称”).innerHTML = … ；
　　写到文档输出：把内容直接写到HTML代码中输出
　　　　　　document.write(“< p>Hello JavaScript< /p>”)
　　
　　3）Element对象
　　我们所认知的html页面中所有的标签都是element元素

　　使用方式就是document.getElementById(“id”).以上方法 ， 通过获取到的element来调用
　　
　　4）Attribute对象
　　我们所认知的html页面中所有标签里面的属性都是attribute
　　
　　　　　　　　　　
5.事件：
　　onsubmit()此事件写在form标签中，必须有返回值。
　　onload()此事件只能写一次并且放到body标签中，也可以使用windows.onload = function{…}实现
　　其它事件放到需要操作的元素位置。(onclick、onfocus、onblur)
　　
　　onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
　　onclick/ondblclick:鼠标单击和双击事件
　　onkeydown/onkeypress：搜索引擎使用较多
　　onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
　　onmouseover/onmouseout/onmousemove：购物网站商品详情页。
　　onsubmit：表单提交事件 ，有返回值，控制表单是否提交。
　　onchange:当用户改变内容的时候使用这个事件(二级联动)

6.JavaScript内置对象

　　1）Array对象
　　数组的创建：
　　数组的特点：
　　　　长度可变！数组的长度=最大角标+1
　　2）Boolean对象
　　Boolean对象创建：
　　如果value 不写，那么默认创建的结果为false
　　3）Date对象
　　 getTime()返回 1970 年 1 月 1 日至今的毫秒数。
　　　解决浏览器缓存问题
　　4）Math和number对象
　　和Java中基本一样
　　5）String对象
　　match()：找到一个或多个正则表达式的匹配。
　　substr()：从起始索引号提取字符串中指定数目的字符。
　　substring()：提取字符串中两个指定的索引号之间的字符。
　　6）RegExp对象
　　正则表达式对象
　　test()：检索字符串中指定的值。返回 true 或 false。
注：一些常用的正则表达式示例：
　　　　1、匹配所有的正数：^[0-9]+$
　　　　2、匹配所有的小数：^-?[0-9].?[0-9]$3、匹配所有的整数：^-?[0-9]+$
　　　　4、提取信息中的中文字符串： [\u4e00-\u9fa5]* ;
　　　　5、提取信息中的邮件地址：\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*
　　　　6、提取信息中的中国手机号码：(86)*0*13\d{9}
　　　　7、提取信息中的中国固定电话号码：((\d{3,4})|\d{3,4}-|\s)?\d{8}
　　　　8、提取信息中的中国邮政编码：[1-9]{1}(\d+){5}
　　　　9、提取信息中的中国身份证号码：\d{18}|\d{15}
　　　　10、提取信息中的任何数字：(-?\d*)(.\d+)?
　　　　11、匹配HTML标记的正则表达式：/<(.)>.<\/\1>|<(.*) \/>/
　　　　12、匹配邮箱：/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
　　7）全局函数
　　全局属性和函数可用于所有内建的 JavaScript 对象
　　
　　其中：
　　关于编码和解码的一组方法、eval()函数以及parseInt()函数的一些举例：

<script>
    <!--编码和解码-->
    var str = "张三";
    //alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
    //alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89

    //alert(decodeURI(encodeURI(str)));//张三
    //alert(decodeURIComponent(encodeURIComponent(str)));//张三

    var str1 = "http://www.itheima.cn";
    //alert(encodeURI(str1));//http://www.itheima.cn
    //alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn

    //alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn
    //alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn
    <!--eval-->
    var str2 = "alert('abc')";
    //alert(str2);
    eval(str2);

    <!--parseInt()方法-->
    parseInt("10")  //返回10
    parseInt("11"，10)  //返回11
    parseInt("11"，2)  //返回3
    parseInt("11"，8)  //返回9
    parseInt("11"，16)  //返回17
</script>

7.常见的js实现
　　1）轮播图
　　　　可以在body标签中添加onload()事件监听函数，在函数中使用 document.getElementById(“id名称”)获取到该元素，然后使用src方法修改图片。即：document.getElementById(“sowingImg”).src=”2.jgp” ，配合循环语句和一个全局变量即可实现轮换播放。
　　　　代码如下：

<!--JavaScript代码-->
<script>
    function init(){
        setInterval("changeImg()",3000);
    }

    var i=1;
    function changeImg(){
        i++;
        var imgEl = document.getElementById("img1");
        imgEl.src="../img/"+i+".jpg";
        if(i==3){
            i=0;
        }
    }
</script>

<!--Html部分代码-->
<!--确定事件：onload  加在body里面！-->
<body onload="init()">

<!--给指定的图片位置定义一个id-->
<img src="../img/1.jpg" width="1300px" id="img1"/>

　　2）表单验证功能
　　　如下代码实现

<!--Javascript部分代码：-->
<script>
    function showTips(id,info){
        //获取span元素，给出提示信息
        document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
    }

    function check(id,info){
        //获取用户输入的数据
        var uValue = document.getElementById(id).value;
        //进行判断
        if(uValue==""){
            //在span位置给出错误提示信息
            document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
        }else{
            document.getElementById(id+"span").innerHTML="";
        }
    }
</script>

<!--HTML部分代码：-->
<input type="text" name="user" id="user" onfocus="showTips('user','用户名必须以字母开头！')" onblur="check('user','用户名不能为空！')"/>
<span id="userspan"></span>

　　3）复选框全选和全不选
　　复选框要把全选框和下面的复选框区分，复选框的name要相同
　　代码如下：

<!--Javascript部分代码：-->
<script>
    function checkAll(){
        //1.获取编号前面的复选框
        var checkAllEle = document.getElementById("checkAll");
        //2.对编号前面复选框的状态进行判断
        if(checkAllEle.checked==true){
            //3.获取下面所有的复选框
            var checkOnes = document.getElementsByName("checkOne");
            //4.对获取的所有复选框进行遍历
            for(var i=0;i<checkOnes.length;i++){
                //5.拿到每一个复选框，并将其状态置为选中
                checkOnes[i].checked=true;
            }
        }else{
            //6.获取下面所有的复选框
            var checkOnes = document.getElementsByName("checkOne");
            //7.对获取的所有复选框进行遍历
            for(var i=0;i<checkOnes.length;i++){
                //8.拿到每一个复选框，并将其状态置为未选中
                checkOnes[i].checked=false;
            }
        }
    }
</script>

<!--HTML部分代码：-->
<!--复选框前面的：-->
    <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>

<!--下面所有的复选框：-->
<td><input type="checkbox" name="checkOne"/></td>

　　
　　4）动态添加标签
　　例如按钮点击 动态添加城市
　　代码如下：

<!--JavaScript代码-->
<script>
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            //1.获取ul元素节点
            var ulEle = document.getElementById("ul1");
            //2.创建城市文本节点
            var textNode = document.createTextNode("深圳");//深圳
            //3.创建li元素节点
            var liEle = document.createElement("li");//<li></li>
            //4.将城市文本节点添加到li元素节点中去
            liEle.appendChild(textNode);//<li>深圳</li>
            //5.将li添加到ul中去
            ulEle.appendChild(liEle);
        }
    }
</script>       

<!--html部分代码-->
<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
</ul>

　　5）省市二级联动　　
第一步：确定事件(onchange)并为其绑定一个函数
第二步：创建一个二维数组用于存储省份和城市
第三步：获取用户选择的省份
第四步：遍历二维数组中的省份
第五步：将遍历的省份与用户选择的省份比较
第六步：如果相同，遍历该省份下所有的城市
第七步：创建城市文本节点
第八步：创建option元素节点
第九步：将城市文本节点添加到option元素节点中去
第十步：获取第二个下拉列表，并将option元素节点添加进去
第十一步：每次操作前清空第二个下拉列表的option内容。

<!--JavaScript代码-->
<script>
    //1.创建一个二维数组用于存储省份和城市
    var cities = new Array(3);
    cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
    cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
    cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
    cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

    function changeCity(val){

        //7.获取第二个下拉列表
        var cityEle = document.getElementById("city");

        //9.清空第二个下拉列表的option内容
        cityEle.options.length=0;

        //2.遍历二维数组中的省份
        for(var i=0;i<cities.length;i++){
            //注意，比较的是角标
            if(val==i){
                //3.遍历用户选择的省份下的城市
                for(var j=0;j<cities[i].length;j++){
                    //alert(cities[i][j]);
                    //4.创建城市的文本节点
                    var textNode = document.createTextNode(cities[i][j]);
                    //5.创建option元素节点
                    var opEle = document.createElement("option");
                    //6.将城市的文本节点添加到option元素节点
                    opEle.appendChild(textNode);
                    //8.将option元素节点添加到第二个下拉列表中去
                    cityEle.appendChild(opEle);
                }
            }
        }
    }
</script>

<!--HTML部分代码-->
<select onchange="changeCity(this.value)">
    <option>--请选择--</option>
    <option value="0">湖北</option>
    <option value="1">湖南</option>
    <option value="2">河北</option>
    <option value="3">河南</option>
</select>
<select id="city">
</select>

全国省市
北京 京 北京
　　东城区 西城区 崇文区 宣武区 朝阳区 丰台区 石景山区 海淀区门 头沟区
　　房山区 通州区 顺义区 昌平区 大兴区 怀柔区 平谷区 密云县 延庆县
上海 沪 上海
　　黄浦区 卢湾区 徐汇区 长宁区 静安区 普陀区 闸北区
　　虹口区 杨浦区 闵行区 宝山区 嘉定区 浦东新区 金山区
　　松江区 青浦区 南汇区 奉贤区 崇明县
天津 津 天津
　　和平区 河东区 河西区 南开区 河北区 红桥区 塘沽区 汉沽区 大港区 东丽区
　　西青区 津南区 北辰区 武清区 宝坻区 宁河县 静海县 蓟县
重庆 渝 重庆
　　万州区 涪陵区 渝中区 大渡口 区江北区 沙坪坝区 九龙坡区 南岸区 北碚区
　　万盛区 双桥区 渝北区 巴南区 黔江区 长寿区 江津区 合川区 永川区 南川区
　　綦江县 潼南县 铜梁县 大足县 荣昌县 璧山县 梁平县 城口县 丰都县 垫江县
　　武隆县 忠县 开县 云阳县 奉节县 巫山县 巫溪县 石柱土家族自治县
　　秀山土家族苗族自治县 酉阳土家族苗族自治县 彭水苗族土家族自治县
黑龙江 黑 哈尔滨
　　哈尔滨市 齐齐哈尔市 鸡西市 鹤岗市 双鸭山市 大庆市 伊春市
　　佳木斯市 七台河市 牡丹江市 黑河市 绥化市 大兴安岭地区
吉林 吉 长春
　　长春市 吉林市 四平市 辽源市 通化市 白山市
　　松原市 白城市 延边朝鲜族自治州
辽宁 辽 沈阳
　　沈阳市 大连市 鞍山市 抚顺市 本溪市 丹东市 锦州市 营口市
　　阜新市 辽阳市 盘锦市 铁岭市 朝阳市 葫芦岛市
山东 鲁 济南
　　济南市 青岛市 淄博市 枣庄市 东营市 烟台市 潍坊市 济宁市 泰安市 威海市
　　日照市 莱芜市 临沂市 德州市 聊城市 滨州市 菏泽市
山西 晋 太原
　　太原市 大同市 阳泉市 长治市 晋城市 朔州市
　　晋中市 运城市 忻州市 临汾市 吕梁市
陕西 陕或秦 西安
　　西安市 铜川市 宝鸡市 咸阳市 渭南市 延安市
　　汉中市 榆林市 安康市 商洛市
河北 冀 石家庄
　　石家庄市 唐山市 秦皇岛市 邯郸市 邢台市 保定市
　　张家口市 承德市 沧州市 廊坊市 衡水市
河南 豫 郑州
　　郑州市 开封市 洛阳市 平顶山市 安阳市 鹤壁市 新乡市 焦作市 济源市
　　濮阳市许昌市 漯河市 三门峡市 南阳市 商丘市 信阳市 周口市 驻马店市
湖北 鄂 武汉
　　武汉市 黄石市 十堰市 宜昌市 襄樊市 鄂州市 荆门市 孝感市 荆州市
　　黄冈市 咸宁市 随州市 恩施土家族苗族自治州 仙桃市 潜江市 天门市 神农架林区
湖南 湘 长沙
　　长沙市 株洲市 湘潭市 衡阳市 邵阳市 岳阳市 常德市 张家界市
　　益阳市 郴州市 永州市 怀化市 娄底市 湘西土家族苗族自治州
海南 琼 海口
　　海口市 三亚市 五指山市 琼海市 儋州市 文昌市 万宁市 东方市 定安县
　　屯昌县澄迈县 临高县 白沙黎族自治县 昌江黎族自治县 乐东黎族自治县
　　陵水黎族自治县 保亭黎族苗族自治县 琼中黎族苗族自治县
江苏 苏 南京
　　南京市 无锡市 徐州市 常州市 苏州市 南通市 连云港市 淮安市
　　盐城市 扬州市 镇江市 泰州市 宿迁市
江西 赣 南昌
　　南昌市 景德镇市 萍乡市 九江市 新余市 鹰潭市 赣州市 吉安市
　　宜春市 抚州市 上饶市
广东 粤 广州
　　广州市 韶关市 深圳市 珠海市 汕头市 佛山市 江门市 湛江市 茂名市
　　肇庆市 惠州市 梅州市 汕尾市 河源市 阳江市 清远市
　　东莞市 中山市 潮州市 揭阳市 云浮市
广西 桂 南宁
　　南宁市 柳州市 桂林市 梧州市 北海市 防城港市 钦州市 贵港市
　　玉林市 百色市 贺州市 河池市 来宾市 崇左市
云南 云或滇 昆明
　　昆明市 曲靖市 玉溪市 保山市 昭通市 丽江市 思茅市 临沧市
　　楚雄彝族自治州 红河哈尼族彝族自治州 文山壮族苗族自治州
　　西双版纳傣族自治州 大理白族自治州 德宏傣族景颇族自治州
　　怒江傈僳族自治州 迪庆藏族自治州
贵州 贵或黔 贵阳
　　贵阳市 六盘水市 遵义市 安顺市 铜仁地区 毕节地区
　　黔西南布依族苗族自治州 黔东南苗族侗族自治州 黔南布依族苗族自治州
四川 川或蜀 成都
　　成都市 自贡市 攀枝花市 泸州市 德阳市 绵阳市 广元市 遂宁市
　　内江市 乐山市 南充市 眉山市 宜宾市 广安市 达州市 雅安市
　　巴中市 资阳市 阿坝藏族羌族自治州 甘孜藏族自治州 凉山彝族自治州
内蒙古 内蒙古 呼和浩特
　　呼和浩特市 包头市 乌海市 赤峰市 通辽市 鄂尔多斯市 呼伦贝尔市
　　巴彦淖尔市 乌兰察布市 兴安盟 锡林郭勒盟 阿拉善盟
宁夏 宁 银川
　　银川市 石嘴山市 吴忠市 固原市 中卫市
甘肃 甘或陇 兰州
　　兰州市 嘉峪关市 金昌市 白银市 天水市 武威市 张掖市 平凉市
　　酒泉市 庆阳市 定西市 陇南市 临夏回族自治州 甘南藏族自治州
青海 青 西宁
　　西宁市 海东地区 海北藏族自治州 黄南藏族自治州 海南藏族自治州
　　果洛藏族自治州 玉树藏族自治州 海西蒙古族藏族自治州
西藏 藏 拉萨
　　拉萨市 昌都地区 山南地区 日喀则地区 那曲地区 阿里地区 林芝地区
新疆 新 乌鲁木齐
　　乌鲁木齐市 克拉玛依市 吐鲁番地区 哈密地区 昌吉回族自治州
　　博尔塔拉蒙古自治州 巴音郭楞蒙古自治州 阿克苏地区
　　克孜勒苏柯尔克孜自治州 喀什地区和田地区 伊犁哈萨克自治州
　　塔城地区 阿勒泰地区 石河子市阿拉尔市 图木舒克市五家渠市
安徽 皖 合肥
　　合肥市 芜湖市 蚌埠市 淮南市 马鞍山市 淮北市 铜陵市 安庆市
　　黄山市 滁州市 阜阳市 宿州市 巢湖市 六安市 亳州市 池州市 宣城市
浙江 浙 杭州
　　杭州市 宁波市 温州市 嘉兴市 湖州市 绍兴市
　　金华市 衢州市 舟山市 台州市 丽水市
福建 闽 福州
　　福州市 厦门市 莆田市 三明市 泉州市 漳州市 南平市 龙岩市 宁德市
台湾 台 台北
　　台北市 高雄市 基隆市 台中市 台南市 新竹市 嘉义市
香港 港 香港
　　中西区 湾仔区 东区 南区 油尖旺区 深水埗区 九龙城区 黄大仙区 观塘区
　　荃湾区 葵青区 沙田区 西贡区 大埔区 北区 元朗区 屯门区 离岛区
澳门 澳 澳门
澳门
注：1、以下城市为副省级市：沈阳、大连、长春、哈尔滨、南京、杭州、宁波、厦门、济南、青岛、武汉、广州、深圳、成都、西安。
2、以下城市为计划单列市：大连、宁波、厦门、青岛、深圳。