JavaSript

作者: 陈洲 | 来源:发表于2017-02-24 23:06 被阅读0次

    JavaScript特点

    1. 安全性(不允许直接访问本地硬盘),它可以做的就是信息的动态交互。
    2. 跨平台性。(只要是可以解释Js的浏览器都可以执行,和平台无关。)

    JavaScript与Java不同
    JS是Netscape公司的产品,Java是Sun公司的产品
    JS是基于对象,Java是面向对象。
    JS只需解释就可以执行,Java需要先编译成字节码文件,再执行。
    JS是弱类型,Java是强类型。

    JavaScript内容

    EDB.png

    1.JavaScript语法基础
    2.使用JS操作网页(DOM)
    2.使用JS操作浏览器(BOM)
    如何编写javascript的代码

     方式1:可以使用<script>标签体内进行编写。
    
        格式:
            <script type="text/javascript">
                    js代码
            </script>   
    
    方式2: 引入外部的javascript文件。
    
        格式:   
            <script src="......" type="text/javascript"></script>                                                       
    
        注意:
            1.<script>是有开始标签与结束标签的,千万不要在一个标签中结束了。
            2.如果<script>已经用于引入了js文件,那么该<script>标签体就不能再写js代码了
    

    javascript的变量声明:

     格式:
        var 变量名 = 数据;
    声明变量要注意的事项:
        1. 在javascript中声明变量是 使用var关键字声明的,javascript中的变量可以存储任意的数据类型数据.
        2. javascript中变量数据类型是根据存储的值决定的,可以随时更改存储数据的类型。
        3. 定义了多个同名的变量是,后定义的同名变量是覆盖前面定义的同名变量。
        4. 声明变量的时候可以省略var关键字,但是不建议省略。
    

    Javascript的数据类型:

    typeof 查看变量的数据类型:    typeof 变量名       
    
    number 小数与整数
    
    string 字符串 注意: javascript中没有字符的概念,只有字符串,字符串可以写在单引号或双引号中。
    
    boolean 布尔数据类型,
    
    undefined  undefined代表该变量没有定义。   
    
    document.write("10数据类型是"+(typeof 10)+"<br/>");
    document.write("3.14数据类型是"+(typeof 3.14)+"<br/>");
    document.write("a数据类型是"+(typeof 'abc')+"<br/>");
    document.write("abc数据类型是"+(typeof "abc")+"<br/>");
    document.write("abc数据类型是"+(typeof true)+"<br/>");
    document.write("a变量数据类型是"+(typeof a)+"<br/>");  //undefined
    

    字符串转数字
    parseInt() 可以把一个字符串转换成整数。
    parseFloat() 可以把一个字符串转换成小数。

    a = "123abc123";
      //parseInt方法如果接收的字符串含有非数字的字符,那么parseInt方法会从字符串的首个字符开始寻找,一直找到非数字字符为止,然后就使用前面的数字字符转换成数字
    a = "a123"; 
     // NaN not a number(不是一个数字)
    a = "012";
     //12 如果首位是0,那么就想祛除0再进行转换。
    a = "0x10";
     //如果一个字符串是以0x开头,那么会把字符串中的内容当成十六进行的数据处理的
    
    var b = parseInt(a);
    document.write("结果:"+b+"<br/>");
    
    
     isNaN() 不是一个数字返回true,是一个数字返回false.
        
          document.write(isNaN("123")+"<br/>");//f
          document.write(isNaN("abc123")); //t
    

    Javascript的运算符:

        +(加法、正数、 连接符)
    var a = 1;
    document.write((1+true)+"<br/>"); //true 是1, false是0
    document.write((1+false)+"<br/>");
    document.write("hello"+1); // hello1
    
        / 除法
    var a = 10;
    var b = 3;
    document.write("除法运算是:"+(a/b)+"<br/>"); //如果两个整数相除不能整数的时候结果还是小数。
    
    
       比较运算符
    

    字符串与字符串的比较规则是:

    情况1: 能找到对应位置上的不同字符,那么就比较第一个不同字符的大小。
    
    情况2: 不能找到对应位置上的不同字符,这时候比较的是两个字符串的长度。
    
    document.write("10大于3吗?"+(10>3)+"<br/>");
    document.write("10字符串大于3字符串吗?"+("190">"19")+"<br/>"); //字符串与字符串比较
    document.write("10大于字符串9吗?"+( 10 > "9")+"<br/>"); // 字符串还可以与数字进行比较。  凡是数字与字符串 进行比较,会先把字符串转换成数字再进行比较 的。
    
    
    
     逻辑运算符  
    
    //没有单的。
    document.write((true&&true)+"<br/>");
    document.write((true||true)+"<br/>");
    
    
     三目运算符   
    
         布尔表达式?值1:值2;
    var age = 10;
    document.write(age>18?"成年人":"未成年人");
    

    补充:
    javascript常用的函数:

    alert("显示的内容..") ; 弹出框   
    
    document.write("数据") ; //向页面输出数据...
    

    页面的注释:

    html <!-- --> 注释的内容
    
    css的注释  /* 注释的内容*/ 
    
    javascript:  //注释的内容  单行注释          /* 注释的内容*/ 多行注释
    

    控制流程语句

    if语句
    
    格式:
        if(判断条件){
            符合条件执行的代码   
        }   
    
    if语句的特殊之处:
       在javascript中的if语句条件不单止可以写布尔表达式,还可以写任何的数据。
    
        number  非0为true, 0为false.
        string  内容不能空是true, 内容空的时候是false。
        undefined:false
        NaN:    false
    
    switch语句
    
    特殊之处:
         在javascript中case后面可以跟常量与变量还可以跟表达式。
    
    var option = "A";
    var score =98;
    switch(option){
        case score>=90?"A":"B":
            document.write("java");
            break;
        case "B":
            document.write("ps");
        case "C":
            document.write("javascript");
            break;
        case "D":
            document.write("C++");
            break;
    }
    
    while语句
    
        格式:
            while(判断的条件){
                循环体内容   
            }
    
    for语句
    
        格式:
            for(初始化语句; 判断的条件 ; 循环后的语句){
                循环体语句;   
            }
    for-in语句
    

    for-in语句的格式:

     for(var 变量名 in 遍历的目标){
    
     }
    
    for-in语句的作用:
        1. 可以用于遍历数组的元素。  注意: 使用for-in语句遍历数组元素的时候遍历出来是数组的下标。
        2. 可以用于遍历对象的所有属性数据。 注意: 使用for-in语句遍历对象的属性的时候,遍历出来的是对象的属性名。       
    
        for(var index in arr){
            document.write(arr[index]+",");       
        }
        var  p = new Person(110,"aa");
        for(var property in p){
            document.write(p[property]+",");   
        } //110,aa
    
     with语句
    
    有了 with 语句,在存取对象属性和调用方法时就不用重复指定对象。
    格式:
        with(对象){   
    
        }
    
    with(document){
        write("<hr/>");
    }
    

    函数

    函数的定义格式:

    function 函数名(形参列表){
        函数体 ;   
    }
    

    javascript的函数要注意的细节:
    1. 在 javascript中函数 定义形参时是不能使用var关键字声明变量 的。
    2. 在javascript中 的函数是没有 返回值类型 的,如果函数需要返回数据给调用者,直接返回即可,如果不需要返回则不返回。
    3. 在 javascript中是没有函数 重载 的概念 的,后定义的同名函数会直接覆盖前面定义同名函数。
    4. 在javascript中任何的函数内部都隐式的维护了一个arguments(数组)的对象,给函数 传递数据的时候,是会先传递到arguments对象中,
    然后再由arguments对象分配数据给形参的。

    //加法
    function add(){
            document.write("长度:"+arguments.length+"<br/>");
            for(var index = 0 ; index<arguments.length ; index++){
                document.write(arguments[index]+",");   
            }
    
    add(11,21,13,14);
    

    例子:

    显示月份天数:
    function showDay(){
        //找到对应 的标签对象。
        var inputObj = document.getElementById("month");
        //获取input标签数据
        var month = inputObj.value;
        if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
            alert("本月是31天");   
        }else if(month==4||month==6||month==9||month==11){
            alert("本月是30天");   
        }else if(month==2){
            alert("本月是28天");   
        }else{
            alert("没有该月份");   
        }
    }
    
    <body>
    月份:<input id="month" type="text" /><input type="button" value="查询" onclick="showDay()" />
    </body>/
    

    String

    创建一个字符串的方式:
    方式1:
        new String("字符串的内容");
    
    方式2:
        var str = "字符串的内容";
    
     var str1 = new String("hello");
     var str2 = new String("hello");
     //地址不同但是内容相同
    
    字符串常用的方法:
        anchor()   生产锚点
        blink()     为元素添加blink标签
        charAt()     返回指定索引位置处的字符。
        charCodeAt() 回一个整数,代表指定位置上字符的 Unicode 编码。
        fontcolor()  把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端
        indexOf()    返回 String 对象内第一次出现子字符串的字符位置
        italics()    把 HTML <I> 标记放置在 String 对象中的文本两端。
        link()         把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
        replace()      返回根据正则表达式进行文字替换后的字符串的复制
        split()        切割   
        Substr()       截取子串
        toUpperCase()  转大写
        toLowerCase()    转小写
    
        document.write("aa".anchor("five")+"<br/>");
        document.write("aa".blink()+"<br/>");
        document.write("abc".charAt(1)+"<br/>");
        document.write("abc".charCodeAt(1)+"<br/>"); //chatCodeAt返回的是索引值对应的字符的码值。
        document.write(aa".fontcolor("red")+"<br/>"); //fontcolor() 给字符串添加font标签,然后设置color的属性值。
        document.write("abchellohehehello".indexOf("hello")+"<br/>"); //返回指定字符串第一次出现的索引值。
        document.write("aa".italics()+"<br/>"); //给文本添加一个i标签,把文本内容设置成斜体。
        document.write("aa".link("http://www.itcast.cn")+"<br/>"); // 给文本添加一个a标签,
        document.write("aaxml".replace("xml","aa")+"<br/>"); 
    
        var str = "A-B-C";
        var arr = str.split("-");
        for(var index = 0 ; index<arr.length ; index++){
            document.write(arr[index]+",");   
        }
        document.write("<br/>");
        document.write("abc".toUpperCase()+"<br/>"); //转大写
        document.write("ABC".toLowerCase()+"<br/>");  //转小写
    

    Date

    var date = new Date(); //获取到当前的系统时间
    document.write("年:"+ date.getFullYear()+"<br/>");
    document.write("月:"+ (date.getMonth()+1)+"<br/>");
    document.write("日:"+ date.getDate()+"<br/>");
    
    document.write("时:"+ date.getHours()+"<br/>");
    document.write("分:"+ date.getMinutes()+"<br/>");
    document.write("秒:"+ date.getSeconds()+"<br/>");
    
    //xxxx年yy月dd日  hh:mm:ss
    
    document.write("当前时间是:"+date.toLocaleString());
    document.write("当前时间是:"+date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+
    date.getHours()+":"+date.getMinutes()+":"+date.getSeconds());
    

    例子:

    <body>
    当前系统时间:<span id="time"></span>
    </body>
    
    <script type="text/javascript">
    
        function getCurrentTime(){
            var date = new Date();
            var timeInfo =  date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+
        date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
    
            //找span对象
            var  spanObj = document.getElementById("time");
            //设置span标签体的内容
            spanObj.innerHTML = timeInfo.fontcolor("red");
        }
    
        getCurrentTime();
    
        //定时方法.
        window.setInterval("getCurrentTime()",1000);
        /* setInterval   定时方法,第一个参数要指定调用的代码,第二参数是每 隔指定的毫秒数调用指定的代码。*/
    </script>
    

    Number

    创建Number对象的方式:   
    
        方式1:
            var 变量=  new Number(数字)   
    
        方式2: 
            var 变量 = 数字;   
    
    常用的方法:   
        toString()  把数字转换成指定进制形式的字符串。
        toFixed()   指定保留小数位,而且还带四舍五入的功能。
    
        var  num = 10; // 十进制
        document.write("十进制:"+num.toString()+"<br/>");
        document.write("二进制:"+num.toString(2)+"<br/>"); //2进制
        document.write("八进制:"+num.toString(8)+"<br/>");
        document.write("十六进制:"+num.toString(16)+"<br/>");
        document.write("三进制:"+num.toString(3)+"<br/>");   // 101
        var num2 = 3.455;
        document.write("保留两位小数:"+num2.toFixed(2))   
    

    Math

     ceil         向上取整
     floor()   向下取整
     random()  随机数方法 //  产生的伪随机数介于 0 和 1 之间(含 0,不含 1),
     round     四舍五入
    
        document.write("向上取整:"+ Math.ceil(3.14)+"<br/>");   
        document.write("向下取整:"+ Math.floor(3.14)+"<br/>");
        document.write("随机数:"+ Math.random()+"<br/>");
        document.write("四舍五入:"+ Math.round(3.75)+"<br/>");
    

    Array

    方式1:
        var 变量名 = new Array();  创建一个长度为0的数组。
    
    方式2:
        var 变量名= new Array(长度) 创建一个指定长度的数组对象。
    
    方式3:
         var 变量名 = new Array("元素1","元素2"...);  给数组指定元素创建数组 的对象。
    
    方式4:
        var 变量名 = ["元素1","元素2"...];
    
    
    数组要注意的细节:
        在javascript中数组的长度是可以发生变化的。
    
        var arr = new Array(3); //创建了一个长度为0的数组对象。
        arr[100] = 10;
        document.write("arr长度:"+arr.length+"<br/>"); //101
    

    Array数组常用方法:

    1.arr1.concat(arr2);
        arr1 = arr1.concat(arr2); //concat把arr1与arr2的数组元素组成一个新的数组返回。
    
    2.arr.join(str);
        var elements = arr1.join(","); // join使用指定的分隔符把数组中的元素拼装成一个字符串返回。
        //如arr1 = [a,b,c,d];上式结果为字符串"a,b,c,d"
    
    3.x = arr.pop();
        pop :移除数组中的最后一个元素并返回该元素。
    
    4.length = arr.push();
        arr1.push("abc"); // 将新元素添加到一个数组中,并返回数组的新长度值。
    
    5.arr1.reverse(); //翻转数组的元素
    
    6.x = arr.shift();
        document.write("删除第一个元素并返回:"+arr1.shift()+"<br/>"); //移除数组中第一个元素,并且返回。
    
    7.arr2 = arr1.slice(begin,end)
        var subArr = arr1.slice(1,2); //指定数组 的开始索引值与结束索引值截取数组的元素,并且返回子数组。
    
    8.arr.sort(compare);
        arr1 = [19,1,20,5];
        arr1.sort(sortNumber);  //排序,排序的时候一定要传入排序的方法。
        function sortNumber(num1,num2){
            return num1-num2;
        }
    
    9.arr.splice(.....)   
        arr1.splice(1,1,"a","b","c");
        //第一个参数是开始删除元素的索引值, 第二参数是删除元素的个数,往后的数据就是插入的元素。
    

    自定义对象

    在javascript没有类的概念,只要有函数即可创建对象。
    
        方式1:
    
            使用无参的函数创建对象。
    
            例子:
                function Person(){}
                var p = new Person(); //创建了一个Person对象了
                p.id = 110;
                p.name = "abc";
    
        方式2://推荐
    
            使用带参的函数创建对象。
    
            function Person(id,name){
                this.id = id;
                this.name = name;   
                this.say = function(){
                    ....  
                }
            }
    
            var p = new Person(110,"abc");    //创建对象
    
    
        方式3: 使用Object函数创建对象
    
            var p = new Object();
            p.id = 110;
            p.name = "abc";
    
        方式4:使用字面量的方式创建.
    
            var p = {
                id:110,
                name:"狗娃",
                say:function(){
                   ....
            }   
    
    
        注意:javascript的类名可以直接访问属性,如类名.成员;也可以这样访问类名[成员名字(字符串)]或对象[成员名字(字符串)]
    
     //一个数组工具类例子
    
        javascript 文件:
    
            var tool = new ArrayTool();
            function ArrayTool(){
                //找最大值
                this.getMax = function(arr){
                    ........
                    return max;
                }
                //找元素的索引值
                this.searchEle = function(arr,target){
                    .........
                }
            }
    
        HTML文件:
    
        <script src="ArrayTool.js" type="text/javascript"></script>
        <script type="text/javascript">
        var arr = [12,15,9,4];
        var max = tool.getMax(arr);
        document.write("最大值:"+ max+"<br/>");
        var index = tool.searchEle(arr,9);
        document.write("找到的索引值是:"+ index);</script>
    

    prototype

    prototype注意的细节:
        1.    prototype是函数(function)的一个必备属性(书面一点的说法是"保留属性")(只要是function,就一定有一个prototype属性)
        2.    prototype的值是一个对象
        3.    可以任意修改函数的prototype属性的值。
        4.    一个对象会自动拥有prototype的所有成员属性和方法。
    

    例子:为String类加新方法:

     //为String对象的prototype对象添加新的方法,也使得String拥有该方法
    String.prototype.toCharArray = function(){  
            var arr = new Array();
            for(var index = 0; index<this.length ;index++){
                arr[index] = this.charAt(index);   
            }
            return arr;
        }
    
    
        String.prototype.reverse = function(){
            var arr = this.toCharArray();
            arr.reverse();
            return arr.join("");
        }
    

    继承用途:

     function Super(){
                this.val = 1;
                this.arr = [1];
            }
            function Sub(){
                // ...
            }
            Sub.prototype = new Super();    // 核心 ,使得Sub拥有Super的所有方法```
    
            var sub1 = new Sub();
            var sub2 = new Sub();
            sub1.val = 2;
            sub1.arr.push(2);
            alert(sub1.val);    // 2
            alert(sub2.val);    // 1
    
            alert(sub1.arr);    // 1, 2
            alert(sub2.arr);    // 1, 2
    BOM编程(Browser Object Model )
    
        - BOM编程基础
    
        全称 Browser Object Model,浏览器对象模型。
        JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。
        为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。
    
        BOM对象:
         
          - window 对象
    
           Window 对象是 JavaScript 层级中的顶层对象。
           Window 对象代表一个浏览器窗口或一个框架。
           Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
    
            - window中的方法
    
        document   对 Document 对象的只读引用
        location   用于窗口或框架的 Location 对象,代表了地址栏对象。
        history    对 History 对象的只读引用。
        document.tilte    设置网页的标题
        moveto()  将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
        moveby()    相对于目前的位置移动。
        resizeTo()   调整当前浏览器的窗口。
        open()     打开新窗口显示指定的URL(有的浏览器中是打一个新的选项卡)
        setTimeout(vCode, iMilliSeconds)       超时后执行代码。
        setInterval(vCode, iMilliSeconds)      定时执行代码,第一次也是先待,到时再执行。
    
         事件
     注册事件的方式:
    
                方式一: 直接在html元素上注册
                      <body onload="ready()">
                      function ready(){
                          alert("body的元素被加载完毕了..");   
                      }
     
    
                方式二:可以js代码向找到对应的对象再注册。 推荐使用。
                var bodyNode = document.getElementById("body");
                bodyNode.onload = function(){
                    alert("body的元素被加载完毕");   
                }
     
        - 事件说明
    
    基本上所有的HTML元素中都可以指定事件属性。
       
    所有的事件属性都是以on开头,后面的是事件的触发方式,如:
           onclick,表示单击
           onkeydown,表示键按下
                  ...
    
        - 常用的事件类型:
    
        鼠标点击相关:
           onclick 在用户用鼠标左键单击对象时触发。
           ondblclick 当用户双击对象时触发。
           onmousedown 当用户用任何鼠标按钮单击对象时触发。
           onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
    
        鼠标移动相关:
           onmouseout  当用户将鼠标指针移出对象边界时触发。
           onmousemove 当用户将鼠标划过对象时触发。
    
        焦点相关的:
           onblur 在对象失去输入焦点时触发。
           onfocus 当对象获得焦点时触发。
    
        其他:
           onchange 当对象或选中区的内容改变时触发。
           onload 在浏览器完成对象的装载后立即触发。
           onsubmit 当表单将要被提交时触发。
    
    location 对象
    
    location 对象是由 JavaScript runtime engine 自动创建的,包含有关当前 URL 的信息。
    
    location中的重要方法:
        href属性   设置或获取整个 URL 为字符串。
        reload()   重新装入当前页面
    
        function showURL(){
            alert(location.href);   
        }
    
    
        function download(){
            location.href="http://www.baidu.com";
        }
    
    
        function rafresh(){
            location.reload();   
        }
    
    screen 对象
    
    
    Screen 对象是由 JavaScript runtime engine 自动创建的,包含有关客户机显示屏幕的信息。
    
    属性:
        availHeight   获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
        availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
        height     获取屏幕的垂直分辨率。
        width      获取屏幕的水平分辨率。
    
    示例:
        document.write("屏幕工作区: " + screen.availHeight + ", " + screen.availWidth + "<br>");
        document.write("屏幕分辨率: " + screen.height + ", " + screen.width + "<br>");
    
    document对象
    
    DOM编程主要内容。
    DOM编程(Document Object Model )
    
     DOM简介
    
        全称Document Object Model,即文档对象模型。
        DOM描绘了一个层次化的树,允许开发人员添加、删除、修改页面的某一部分。
    
        浏览器在解析HTML页面标记的时候,其实不是按照一行一行读取并解析的,
           而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树,
           组建好之后,按照树的结构将页面显示在浏览器的窗口中。
    
        节点层次
    
        HTML网页是可以看做是一个树状的结构,如下:
        html
         |-- head
         |     |-- title
         |     |-- meta
         |     ...
         |-- body
         |     |-- div
         |     |-- form
         |     |     |-- input
         |     |     |-- textarea
         ...   ...   ...
    
        这是一颗树,是由多个节点(Node)组成的,节点的类型有很多种。
        节点最多有一个父节点,可以有多个子节点。
    
        HTML DOM 定义了访问和操作HTML文档的标准方法。
        document
           代表当前页面的整个文档树。
        
        all    获取页面所有元素对象
        var allNodes = document.all;   //获取html文件中的所有标签节点 。
        for(var i = 0; i<allNodes.length ; i++){
            alert(allNodes[i].nodeName);     //标签的名字  nodeName;
        }
        forms   获取页面所有表单对象
        images 获取页面所有图片对象
        links   获取所有超链接或area对象
        
        var links = document.links; // 获取文档中含有href的属性的标签。
    
        获取节点对象
    
        document.getElementById("html元素的id")
        document.getElementsByTagName("标签名")
        document.getElementsByName("html元素的name")
        
              <script type="text/javascript">
    
         function showText(){
            var inputNode = document.getElementById("userName");  //根据ID属性值找元素
            inputNode.value = "设置好了文本";
        }
        //InnerHTml是用于设置标签体的内容的。 value是用于设置标签的value属性值.
    
         function showImage(){
            var images = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象。
            for(var i = 0 ; i<images.length ; i++){
                images[i].src = "33.jpg";
                images[i].width="100";
                images[i].height="100";
            }
        }
         function showDiv(){
            var divs = document.getElementsByName("info"); //根据标签的name属性值取找对应的标签,返回的是一个数组。
            for(var i = 0 ; i<divs.length ; i++){
                divs[i].innerHTML = "aaaa".fontcolor("red");   
            }
        }
        </script>
        ......
         <body>   
        <input type="text" id="userName" value="请输入用户名..." /><input type="button" onclick="showText()" value="设置文本"/>
        <hr/>
        <img src="" />
        <img src="" />
        <img src="" />
        <input type="button" onclick="showImage()" value="显示图片"/>
         <hr/>
        <div name="info"></div>
        <div name="info"></div>
        <div name="info"></div>
         <input type="button" onclick="showDiv()" value="设置div内容"/>
        </body>
    
    通过关系(父子关系、兄弟关系)找节点
    
        从一个节点出发开始查找:
        parentNode 获取当前元素的父节点。
        childNodes 获取当前元素的所有下一级子元素。
        firstChild 获取当前节点的第一个子节点。
        lastChild  获取当前节点的最后一个子节点。
        nextSibling       获取当前节点的下一个节点。(兄节点)
        previousSibling   获取当前节点的上一个节点。(弟节点)
    
        示例1:
           firstChild属性最普遍的用法是访问某个元素的文本:
           var text=x.firstChild.nodeValue;
    
        示例2:
           parentNode 属性常被用来改变文档的结构。
           假设您希望从文档中删除带有 id 为 "maindiv" 的节点:
           var x=document.getElementById("maindiv");
           x.parentNode.removeChild(x);
    
    节点操作
    
        创建新节点
        document.createElement("标签名")    创建新元素节点
        elt.setAttribute("属性名", "属性值")     设置属性,如type = file
        elt.appendChild(e)                             添加元素到elt中最后的位置
        elt.insertBefore(new, child);                添加到elt中,child之前。
        elt.removeChild(eChild)                      删除指定的子节点
    
         城市联动框例子:
    
        <script type="text/javascript">
    
        function showCity(){
            var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];           
            //获取省份对应的节点
            var provinceNode = document.getElementById("province");
            //获取省份选中的选项
            var selectIndex =  provinceNode.selectedIndex;
            //获取对应的城市
            var  cityDatas = citys[selectIndex];
    
            //找到city节点
            var cityNode = document.getElementById("city");
            //设置options的个数。
            cityNode.options.length = 1 ;
            //遍历对应的所有城市然后创建对应的option添加到city上。
            for(var index = 0; index<cityDatas.length ; index++){
                var option = document.createElement("option");
                option.innerHTML = cityDatas[index];
                cityNode.appendChild(option);
            }
        }
    
        </script>
        ......
        <body>
        省份<select id="province" onchange="showCity()">
                <option>省份</option>
                <option>广东</option>
                <option>湖南</option>
                <option>广西</option>
            </select>
        城市<select id="city"><option>城市</option></select>
        </body>
    
    操作CSS例子
    
        <script type="text/javascript">
        //产生一个四位的验证码。
          function createCode(){
            var datas = ['A','B','何','敏','凡','江','1','9']; // 0-7  长度8
            var code = "";
            for(var i = 0 ; i<4; i++){
                //随机产生四个索引值
                var index =  Math.floor(Math.random()*datas.length); // random 0.0-1.0(不包括1.0)
                code+=datas[index];
            }   
    
            var spanNode = document.getElementById("code");
            spanNode.innerHTML = code;
            spanNode.style.fontSize ="24px";
            spanNode.style.color = "red";
            spanNode.style.backgroundColor="gray";
            spanNode.style.textDecoration = "line-through";
        }
    
        function ready(){
            createCode();
        }
        </script>
        .......
        <body onload="ready()">
        <span id="code"></span><a href="#" onclick="createCode()">change</a>
        </body>
    
    正则表达式
    

    方式1:
    /正则表达式/模式
    var regex = /正则表达式/标志

    方式2:
    new RegExp("正则表达式",模式);
    var regex = new RegExp("正则表达式", "标志");

    正则表达式对象常用的方法:
    test() 使用正则对象去匹配字符串 如果匹配成功返回ture,否则返回false.
    exec() 根据正则表达式去查找字符串符合规则的内容。

    模式:
    g (全文查找出现的所有 pattern)
    i (忽略大小写)

    位置:
    ^ 开头
    $ 结尾
    次数:
    * 0或多个
    + 1或多个
    ? 0或1个
    {n} 就是n个
    {n,} 至少n个
    {n,m} 最少n个,最多m个
    通配符:
    \b 空格
    \d 任意数字
    \D 任意非数字
    \s 任意空白
    \S 任意非空白
    . 任意字符(除'\n'外)
    组合:
    [a-z]
    [0-9]

    组:
    (正则) 匹配括号中正则表达式对应的结果,并暂存这个结果。
    (?:正则) 匹配括号中正则表达式对应的结果,但不暂存这个结果。
    \数字 使用第n个组匹配的结果

    例子:
    var str = "hello123";
    var reg = /^[A-Z0-9]+$/i;
    alert("匹配吗?"+reg.test(str));

    var str  ="da jia hao hao xue xi a";
    var reg = /\b[a-z]{3}\b/gi;
    var line =""; 
    while((line = reg.exec(str))!=null){
        document.write(line+"<br/>")
    }
    

    相关文章

      网友评论

          本文标题:JavaSript

          本文链接:https://www.haomeiwen.com/subject/pmhgwttx.html