zoukankan      html  css  js  c++  java
  • javascript基础

    一、js的简介
        1、js是什么
            js是可以嵌入到html中,是 基于对象 和 事件驱动 的 脚本语言(不需要编译,可以嵌入到其它语言)
            特点:
                (1)交互性
                (2)安全性:js不能访问本地磁盘
                (3)跨平台:浏览器中都具备js解析器
        2、js能做什么
            (1)js能动态的修改(增删)html和css的代码
            (2)能动态的校验数据
            
        3、js历史及组成
            ECMAScript    BOM(浏览器对象模型)  DOM(文档对象模型)    
        4、js被引入的方式
            (1)内嵌脚本
                <input type="button" value="button" onclick="alert('xxx')" />            
            (2)内部脚本
                <script type="text/javascript">
                    alert("xxx");
                </script>
            (3)外部脚本
                首先先创建一个js文件
                其次在html中引入
                    <script type="text/javascript" src="demo1.js"></script>
            
            js代码放在哪?
                放在哪都行 但是在不影响html功能的前提下 越晚加载越好

    二、js基本语法
        1、变量
            (1)
            var x = 5;
            x = 'javascript';
            var y = "hello"; 在js中单引和双引一致
            var b = true;
            (2)
            x = 5;
        
        2、原始(基本)数据类型
            (1)number:数字类型
            (2)string:字符串类型
            (3)boolean:布尔类型
            (4)null:空类型
            (5)undefined:未定义 typeof 判断类型
            
            注意:number、boolean、string是伪对象,能调方法
            
            类型转换:
                numberoolean转成string
                    toString();
                stringoolean转成number
                    parseInt()   
                    parseFloat()
                    boolean不能转  parseInt(true)得到NaN
                    string可以将数字字符串转换成number 如果“123a3sd5” 转成123(parseInt(123a3sd5)默认舍去非数字后的字符)
                强制转换
                    Boolean()     强转成布尔
                        数字强转成布尔  非零就是true Boolean(123)   零就是false Boolean(0)
                        字符串强转成布尔  非“”(空字符串)就是true Boolean(true)  空字符串“”就是false
                    Number()    强转成数字
                        布尔转数字 true转成1  false转成0
                        字符串转数字 不能强转 NaN
        
        3、引用数据类型
            java:    Object obj = new Object();
            js:     var obj = new Object();  object类型
                     var num = new Number();    
        
        4、运算符
            (1)赋值运算符
                var x = 5;
            (2)算数运算符
                + - * / %
                +: 遇到字符串变成连接
                -:先把字符串转成数字然后进行运算
                *: 先把字符串转成数字然后进行运算
                /: 先把字符串转成数字然后进行运算
            (3)逻辑运算符
                &&    ||  短路作用
            (4)比较运算符
                <    >    >=    <=    !=    ==
                ===:全等:类型与值都要相等
            (5)三元运算符
                3>2?"大于":"小于"  大于
            (6)void运算符
                <a href="javascript:void(0);">xxxxxx</a> 不会跳转
            (7)类型运算符
                typeof:判断数据类型 返回我的数据类型
                instanceof:判断数据类型 是否是某种类型 返回true/false
                var obj = new Object();
                alert(typeof obj);//object
                alert(obj instanceof Object);//true
        
        
        5、逻辑语句
            (1)if-else
                //条件:true/false
                //数字非0 字符串非空====true
                    if(9){
                        alert("true--");
                    }else{
                        alert("false--");
                    }
            (2)switch
                var x = "java";
                switch(x){
                    case "css":
                        alert("css");
                        break;
                    case "js":
                        alert("js");
                        break;
                    case "java":
                        alert("java");
                        break;
                    default:
                        alert("def");
                }
                    打印java
            (3)for
                 for(var i = 0;i<5;i++){
                    alert(i);
                 }
            (4)for in
                var arr = [1,3,5,7,"js"];
                 for(index in arr){//index代表角标
                    //alert(index);  //0 1 2 3 4
                    alert(arr[index]);  //1 3 5 7 js
                 }
    三、js内置对象

        (1)Number 数字对象
            创建方式:
                var myNum=new Number(value);
                var myNum=Number(value);     type:object
                参数 value 是要创建的 Number 对象的数值,或是要转换成数字的值。

            属性和方法:
                toString():转成字符串 type:string
                valueOf():返回一个 Number 对象的基本数字值 type:number
        (2)Boolean
            创建方式:
                var bool = new Boolean(value);    
                var bool = Boolean(value);
            属性和方法:
                toString():转成字符串
                valueOf():返回一个 Boolean 对象的基本值(boolean)            
        (3)String
            创建方式:
                var str = new String(s);
                var str = String(s);
            属性和方法:
                length:字符串的长度
                charAt():返回索引字符
                charCodeAt:返回索引字符unicode
                indexOf():返回字符的索引
                lastIndexOf();逆向返回字符的索引
                split();将字符串按照特殊字符切割成数组
                substr():从起始索引号提取字符串中指定数目的字符
                substring():提取字符串中两个指定的索引号之间的字符(包括头不包括尾)
                toLocalCase();转小写
                toUpperCase();转大写
            示例:  
                var str = "a-b-cdc-FG";伪对象,也可调用属性和方法
                var str = new String("a-b-cdc-FG");
                //alert(str.length);//10
                //alert(str.charAt(4));//c
                //alert(str.charCodeAt(4));//99
                //alert(str.indexOf("c"));//4
                //alert(str.lastIndexOf("c"));//6 角标还是从前往后数
                //var arr = str.split("-");
                /* for(var i=0;i<arr.length;i++){
                    alert(arr[i]);       //a b c d c F G
                } */
                //alert(str.substr(2,3));//b-c
                //alert(str.substring(2,3));//b
                //alert(str.toUpperCase()); //A-B-CDC-FG
        (4)Array
            创建方式:
                var arr = new Array();//创建空数组
                var arr = new Array(size);//创建一个指定长度的数据
                var arr = new Array(element0, element1, ..., element n);//创建数组直接实例化元素
                var arr = [];//空数组
                var arr = [1,2,5,"java"];//创建数组直接实例化元素
            属性和方法:
                length:数组长度
                join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
                pop():删除并返回最后元素
                push():向数组的末尾添加一个或更多元素,并返回新的长度
                reverse();反转数组
                sort();排序
            示例:
                //var arr = [3,"z",1,"java",'js',true,4];
                //alert(arr.length);//7
                //alert(arr.join("-"));//3-7-1-java-js-true-4
                //alert(arr.pop()); //4
                //alert(arr); //3,7,1,"java",'js',true
                //alert(arr.push("R")); 8
                //alert(arr); //3,7,1,"java",'js',true,4,R
                //alert(arr.reverse()); 4,true,'js',"java",1,"z",3
                //alert(arr.sort());//按照字符串字典顺序进行排序 1,3,4,"java","js",true,"z"
        (5)Date
            创建方式:    
                var myDate = new Date();
                var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
            属性和方法
                getFullYear():年
                getMonth():月 0-11
                getDate():日 1-31
                getDay():星期 0-6(星期天是0)
                getTime():返回1970年1月1日午夜到指定日期(字符串)的毫秒数
                toLocalString();获得本地时间格式的字符串
            示例:
                var date = new Date();
                //alert(date.toString());  //Sat Jan 14 2017 07:19:25 GMT+0800
                //alert(date.toLocaleString()); //2017/1/14 上午7:19:25
                /* alert("year:"+date.getFullYear());//2017
                alert("month:"+date.getMonth());//0
                alert("date:"+date.getDate());//14
                alert("day:"+date.getDay());//6 */
                /* var time1 = date.getTime();
                var time2 = 1*24*60*60*1000;
                alert(new Date(time1+time2).toLocaleString()); */  //显示明天的这个时间 2017/1/15 上午7:25:11
                
        (6)Math
            创建方式:    
                Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,
                不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
            属性和方法
                PI:圆周率
                abs():绝对值
                ceil():对数进行上舍入
                floor():对数进行下舍入
                pow(x,y):返回 x 的 y 次幂
                random():0-1之间的随机数,包含
                round():四舍五入
            示例:
                /* var x = "-897";
                alert(Math.abs(x));   897     */
                /* var x = 12.34;
                var y = 2;
                var z = 4; */
                /* alert(Math.ceil(x));//13
                alert(Math.floor(x));//12
                alert(Math.round(x));//12 */
                //alert(Math.pow(y, z));//16
                //alert(Math.random());
        (7)RegExp
            创建方式:    
                var reg = new RegExp(pattern);
                var reg = /^正则规则$/;
            规则的写法:
                [0-9]
                [A-Z]
                [a-z]
                [A-z]   大小写都可以
                d      代表数字(digit)
                D    非数字
                w    查找单词字符(word)
                W    查找非单词字符
                s    查找空白字符(space)
                S    查找非空白字符
                n+    出现至少一次
                n*    出现0次或多次
                n?    出现0次或1次
                {5}     出现5
                {2,8}   2到8次
            方法:    
                test(str):检索字符串中指定的值。返回 true 或 false
            需求:
                校验邮箱:邮箱的正则表达式: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
                var email = haohao_827@163.com
                var reg = /^[A-z]+[A-z0-9_-]*@[A-z0-9]+.[A-z]+$/;
                reg.test(email);

    四、js的函数
        1、js函数定义的方式
            (1)普通方式
                语法:function 函数名(参数列表){函数体}
                示例:
                    function method(){
                        alert("xxx");
                    }
                    method();
            (2)匿名函数
                语法:function(参数列表){函数体}
                示例:
                    var method = function(){
                        alert("yyy");
                    };
                    method();
            (3)对象函数
                语法:new Function(参数1,参数2,...,函数体);
                注意:参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
                示例:
                    var fn = new Function("a","b","alert(a+b)");
                    fn(2,5);  // 7
        2、函数的参数
            (1)形参没有var去修饰
            (2)形参和实参个数不一定相等
            (3)arguments对象 是个数组 会将传递的实参进行封装
            function fn(a,b,c){
                //var sum = a+b+c;
                //alert(sum);
                //arguments是个数组 会将传递的实参进行封装
                for(var i=0;i<arguments.length;i++){
                    alert(arguments[i]);   //1 2 4 8
                }
            }
            fn(1,2);       //NaN
            fn(1,2,4,8);  //7
            
        3、返回值
            (1)在定义函数的时候不必表明是否具有返回值
            (2)返回值仅仅通过return关键字就可以了 return后的代码不执行
            function fn(a,b){
                return a+b;
                //alert("xxxx");
            }
            alert(fn(2,3));
        
        4、js的全局函数(js已经定义好的,直接可以调用)
            (1)编码和解码
                encodeURI()   decodeURI()
                encodeURIComponet()      decodeURIComponent()
                escape()    unescape()
                三者区别:
                    进行编码的符号范围不同吧,实际开发中常使用第一种
            示例
                var url = "http://www.baidu.com?name=张&password=123";
                alert(encodeURI(url));
                //http://www.baidu.com?name=%E5%BC%A0&password=123 只转中文
                alert(encodeURIComponent(url));
                //http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhangsan%26password%3D123
                alert(escape(url));
                //http%3A//www.baidu.com%3Fname%3Dzhangsan%26password%3D123
            (2)强制转换
                Number()
                String()
                Boolean()
            (3)转成数字
                parseInt()
                parseFloat()
            (4)eval()方法    
                将字符串当作脚本进行解析运行
                //var str = "var a=2;var b=3;alert(a+b)";
                //eval(str);  //5
                function print(str){
                    eval(str);
                }
                print("自定义逻辑");

    五、js的事件
        事件
        事件源
        响应行为
        1、js的常用事件
            onclick:点击事件
            onchange:域内容被改变的事件
                需求:实现二级联动
                <select id="city">
                    <option value="bj">北京</option>
                    <option value="tj">天津</option>
                    <option value="sh">上海</option>
                </select>
                <select id="area">
                    <option>海淀</option>
                    <option>朝阳</option>
                    <option>东城</option>
                </select>
                <script type="text/javascript">
                    var select = document.getElementById("city");
                    select.onchange = function(){
                        var optionVal = select.value;
                        switch(optionVal){
                            case 'bj':
                                var area = document.getElementById("area");
                                area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
                                break;
                            case 'tj':
                                var area = document.getElementById("area");
                                area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
                                break;
                            case 'sh':
                                var area = document.getElementById("area");
                                area.innerHTML = "<option>浦东</option><option>杨浦</option><option>长宁</option>";
                                break;
                            default:
                                alert("error");
                        }
                    };                
                </script>
            onfocus:获得焦点的事件
            onblur:失去焦点的事件
                需求:    当输入框获得焦点的时候,提示输入的内容格式
                    当输入框失去焦点的时候,提示输入有误
                <label for="txt">name</label>
                <input id="txt" type="text" /><span id="action"></span>
                <script type="text/javascript">
                    var txt = document.getElementById("txt");
                    txt.onfocus = function(){
                        //友好提示
                        var span = document.getElementById("action");
                        span.innerHTML = "用户名格式最小8位";
                        span.style.color = "green";
                    };
                    txt.onblur = function(){
                        //错误提示
                        var span = document.getElementById("action");
                        span.innerHTML = "对不起 格式不正确";
                        span.style.color = "red";
                    };
                </script>
                
            onmouseover:鼠标悬浮的事件
            onmouseout:鼠标离开的事件
                需求:div元素 鼠标移入变为绿色 移出恢复原色
                #d1{background-color: red;200px;height: 200px;}
                <div id="d1"></div>
                <script type="text/javascript">
                    var div = document.getElementById("d1");
                    div.onmouseover = function(){
                        this.style.backgroundColor = "green";
                    };
                    div.onmouseout = function(){
                        this.style.backgroundColor = "red";
                    };
                </script>
            
        
            onload:加载完毕的事件
                等到页面加载完毕在执行onload事件所指向的函数
                <span id="span"></span>
                <script type="text/javascript">
                    window.onload = function(){
                        var span = document.getElementById("span");
                        alert(span);
                        span.innerHTML = "hello js";
                    };
                </script>
                
        2、事件的绑定方式
            (1)将事件和响应行为都内嵌到html标签中
                <input type="button" value="button"  onclick="alert('xxx')"/>
            (2)将事件内嵌到html中而响应行为用函数进行封装
                <input type="button" value="button" onclick="fn()" />
                <script type="text/javascript">
                    function fn(){
                        alert("yyy");
                    }
                </script>
            (3)将事件和响应行为 与html标签完全分离
                <input id="btn" type="button" value="button"/>
                <script type="text/javascript">
                    //找到标签
                    var btn = document.getElementById("btn");
                    btn.onclick = function(){
                        alert("zzz");
                    };
                </script>
            
            ****this关键字
                this经过事件的函数进行传递的是html标签对象
                <input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
                <script type="text/javascript">
                    function fn(obj){  
                        alert(obj.name);  //mybtn
                    }
                </script>
        
        3、阻止事件的默认行为
            IE:window.event.returnValue = false;
            W3c: 传递过来的事件对象.preventDefault();
            //ie:window.event.returnValue = false;
            //W3c:传递过来的事件对象.preventDefault();
            //W3c标准
            if(e&&e.preventDefault){
                alert("w3c");
                e.preventDefault();
            //IE标签
            }else{
                alert("ie");
                window.event.returnValue = false;
            }
            
            
            //通过事件返回false也可以阻止事件的默认行为
            <a href="demo11.html" onclick="return false">点击我吧</a>
        
        4、阻止事件的传播
            IE:window.event.cancelBubble = true;
            W3c: 传递过来的事件对象.stopPropagation();
            if(e&&e.stopPropagation){
                alert("w3c");
                e.stopPropagation();
            //IE标签
            }else{
                alert("ie");
                window.event.cancelBubble = true;
            }    

    六、js的bom
        (1)window对象
            弹框的方法:
                提示框:alert("提示信息");没有返回值
                确认框:confirm("确认信息");

                    有返回值:如果点击确认返回true  如果点击取消 返回false
                    var res = confirm("您确认要删除吗?");
                    alert(res);
                输入框:prompt("提示信息");

                    有返回值:如果点击确认返回输入框的文本 点击取消返回null
                    var res =  prompt("请输入密码?");
                    alert(res);
            open方法:
                window.open("url地址");            
                open("../jsCore/demo10.html");
                
            定时器:
                setTimeout(函数,毫秒值); 过了毫秒值之后去执行函数
                    setTimeout(
                        function(){
                            alert("xx");
                        },
                        3000
                    );  //3秒后弹xx框
                clearTimeout(定时器的名称);
                示例:
                    //定义定时器
                    var timer;
                    var fn = function(){
                        alert("x");
                        timer = setTimeout(fn,2000);
                    };
                    var closer = function(){
                        clearTimeout(timer);
                    };
                    fn();

                setInterval(函数,毫秒值);
                clearInterval(定时器的名称)
                    var timer = setInterval(
                    function(){
                        alert("nihao");
                    },
                    2000
                );
                var closer = function(){
                    clearInterval(timer);
                };
                
            需求:注册后5秒钟跳转首页
            恭喜您注册成功,<span id="second" style="color: red;">5</span>秒后跳转到首页,如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>
            <script type="text/javascript">
                var time = 5;
                var timer;
                timer = setInterval(
                    function(){
                        var second = document.getElementById("second");
                        if(time>=1){
                            second.innerHTML = time;
                            time--;
                        }else{
                            //关闭定时器
                            clearInterval(timer);
                            location.href="http://www.baidu.com";
                        }
                    },
                    1000
                );
            </script>
            
        (2)location    
            location.href="url地址";
        (3)history
            back();
            forward();
            go();
            <a href="demo7.html">后一页</a>
            <input type="button" value="上一页" onclick="history.back()">
            <input type="button" value="下一页" onclick="history.forward()">
            
            <input type="button" value="上一页" onclick="history.go(-1)">
            <input type="button" value="下一页" onclick="history.go(1)">
            
    七、js的dom
        1、理解一下文档对象模型
            html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改
            在dom树当中 一切皆为节点对象
        2、dom方法和属性
            (1) document.getElementById("id");
            示例:
                          //输出 <input type="text" name="username" value="IT精英培训"  id="tid" >标签value属性的值
                 var inputNode = document.getElementById("tid");
                 alert(inputNode.value);
                     //输出 <input type="text" name="username" value="IT精英培训"  id="tid" >标签type属性的值
                        var inputNode = document.getElementById("tid");
                alert(inputNode.type);
            (2) document.getElementById("id");
                    //通过元素的name属性获取所有元素的引用
                   var inputNodes = document.getElementsByName("tname");
                   //测试该数据的长度
                   //alert(inputNodes.length);
                   //遍历元素,输出所有value属性的值
                   /* for(var i=0;i<inputNodes.length;i++){
                       var inputNode = inputNodes[i];
                       alert(inputNode.value);
                   } */
                   //为每个文本框(<input type="text">)增加change事件,当值改变时,输出改变的值
                   for(var i=0;i<inputNodes.length;i++){
                       var inputNode = inputNodes[i];
                       inputNode.onchange = function(){
                           alert(this.value);
                       };
                   }
             (3) document.getElementsByTagName
                 <form name="form1" action="test.html" method="post" >
                       <input type="text" name="tname" value="IT精英培训_1"  id="tid_1"  ><br>
                  <input type="text" name="tname" value="IT精英培训_2"  id="tid_2"  ><br>
                  <input type="text" name="tname" value="IT精英培训_3"  id="tid_3"  ><br>
                  <input type="button" name="ok" value="保存1"/>
                     </form>
           
                   <select name="edu" id="edu">
                         <option value="博士">博士^^^^^</option>
                      <option value="硕士" selected="selected">硕士^^^^^</option>
                      <option value="本科"  >本科^^^^^</option>
                      <option value="幼儿园">幼儿园^^^^^</option>
                    </select>
           
               <select name="job" id="job" >
                         <option value="美容">美容^^^^^</option>
                      <option value="IT">IT^^^^^</option>
                      <option value="程序员">程序员^^^^^</option>
                      <option value="建筑师">建筑师^^^^^</option>
                  </select>
           
               <br/>

               <input id="btn" type="button" value="输出select被选中的值" />            

                //获取所有的input元素,返回值是数组
                    var inputNodes = document.getElementsByTagName("input");
                //测试长度
                //alert(inputNodes.length);
                    //遍历value的值
                   /* for(var i=0;i<inputNodes.length;i++){
                       var inputNode = inputNodes[i];
                       alert(inputNode.value);
                   }  */
                //输出type="text"中 value属性的值 不包含按钮(button)
                /* for(var i=0;i<inputNodes.length;i++){
                       var inputNode = inputNodes[i];
                       if(inputNode.type=="text"){
                           alert(inputNode.value);
                       }
                    } */
        
                    //输出所有下拉选select的option标签中value的值
                    /* var optionNodes = document.getElementsByTagName("option");
                        for(var i=0;i<optionNodes.length;i++){
                       var optionNode = optionNodes[i];
                           alert(optionNode.value);
                       } */
        
                    //输出所有下拉选 id="edu"中option标签中 value属性的值
                    /* var edu = document.getElementById("edu");
                    var optionNodes = edu.getElementsByTagName("option");
                    for(var i=0;i<optionNodes.length;i++){
                       var optionNode = optionNodes[i];
                       alert(optionNode.value);
                   } */
           
                  //点击按钮输出下拉框中被选中的值
                  /* var btn = document.getElementById("btn");
                  btn.onclick = function(){
                      var optionNodes = document.getElementsByTagName("option");
                    for(var i=0;i<optionNodes.length;i++){
                       var optionNode = optionNodes[i];
                       if(optionNode.selected){  //返回true
                           alert(optionNode.value);
                           }
                       }
                  }; */

              (4)hasChildNodes() 检查一个元素是否有子节点,返回true或false
                //查看id="edu"的节点是否含有子节点
                      var edu = document.getElementById("edu");
                   //alert(edu.hasChildNodes());
             (5)<form name="form1" action="test.html" method="post" >
                       <input type="text" name="tname" value="IT精英培训_1"  id="tid_1"  ><br>
                  <input type="text" name="tname" value="IT精英培训_2"  id="tid_2"  ><br>
                  <input type="text" name="tname" value="IT精英培训_3"  id="tid_3"  ><br>
                  <input type="button" name="ok" value="保存1"/>
                     </form>
           
                   <p id="pid">明天上课</p>

                //元素节点  id="tid_1"  输出nodeName nodeType nodeValue
                //var node = document.getElementById("tid_1");
                /* alert(node.nodeName);//input  nodeName是只读属性
                alert(node.nodeType);//1  nodeType是只读属性
                alert(node.nodeValue);//null */
        
                //文本节点 id="pid"  输出nodeName nodeType nodeValue
                /* var node = document.getElementById("pid");
                var textNode = node.firstChild;
                alert(textNode.nodeName);//#text
                alert(textNode.nodeType);//3
                alert(textNode.nodeValue);//明天上课 */
        
                //属性节点  id="pid"   输出nodeName nodeType nodeValue
                /* var node = document.getElementById("pid");
                var p = node.getAttributeNode("id");
                alert(p.nodeName);//id
                alert(p.nodeType);//2
                alert(p.nodeValue);//pid  */

            (6)
                   您喜欢的城市:<br>
                   <ul>
                        <li id="bj" value="beijing">北京</li>
                     <li id="sh" value="shanghai">上海</li>
                     <li id="cq" value="chongqing"> 重庆</li>
                   </ul>
          
                  您喜欢的游戏:<br>
                   <ul>
                        <li id="fk" value="fangkong">反恐<p>精英</p></li>
                     <li id="ms" value="moshou">魔兽</li>
                     <li id="cq" value="chuanqi">传奇</li>
                   </ul>   
                
                     //点击北京节点, 将被反恐节点替换
                     var bj = document.getElementById("bj");
                   var fk = document.getElementById("fk");
                    bj.onclick = function(){
                        var parentNode = this.parentNode;
                        parentNode.replaceChild(fk,this);
                    };

            (7)     得到属性值
                  //<li id="xj" value="xingji">星际争霸</li>节点的value属性的值
                  var xj = document.getElementById("xj");
                   alert(xj.getAttribute("value"));
                  设置属性值
                 //给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>
                 var xj = document.getElementById("xj");
                 xj.setAttribute("name","xingjizhengba");
                     //测试
                   alert(xj.getAttribute("name")); //xingjizhengba
            (8)     
                  您喜欢的城市:<br>
                   <ul id="city">
                        <li id="bj" value="beijing">北京</li>
                     <li id="sh" value="shanghai">上海</li>
                     <li id="cq" value="chongqing">重庆</li>
                   </ul>
          
                  您喜欢的游戏:<br>
                   <ul>
                        <li id="fk" value="fangkong">反恐</li>
                     <li id="ms" value="moshou">魔兽</li>
                     <li id="xj" value="xingji">星际争霸</li>
                   </ul>
                 //增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下
                  var li = document.createElement("li");
                li.setAttribute("id","tj");
                 li.setAttribute("v","tianjin");
                 
                //添加文本节点
                 var txt = document.createTextNode("天津");
                 li.appendChild(txt);
        
                 var city = document.getElementById("city");
        
                 city.appendChild(li);
            (9)  <ul>
                       <li id="bj" name="beijing">北京</li>
                    <li id="sh" name="shanghai">上海</li>
                    <li id="cq" name="chongqing">重庆</li>
                   </ul>
                // 创建新的节点 <li id="tj" name="tianjin">天津</li>
                    var li = document.createElement("li");
                 li.setAttribute("id","tj");
                 li.setAttribute("v","tianjin");
        
                 var txt = document.createTextNode("天津");
                 li.appendChild(txt);
                // 在 <li id="cq" name="chongqing">重庆</li>的前面
                var ul = document.getElementsByTagName("ul");
                var cq = document.getElementById("cq");
                ul[0].insertBefore(li,cq);  
                
                示例2:
                // 在 上海节点的后面 插入天津节点<li id="tj" name="tianjin">天津</li>
                  var li = document.createElement("li");
                 li.setAttribute("id","tj");
                 li.setAttribute("v","tianjin");
        
                 var txt = document.createTextNode("天津");
                 li.appendChild(txt);
        
                 var ul = document.getElementsByTagName("ul");
                 var sh = document.getElementById("sh");
                 var cq = sh.nextSibling; (得到重庆节点)
        
                 ul[0].insertBefore(li,cq);
            (10)   
                //删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
                    var city = document.getElementById("city");
                 var bj = document.getElementById("bj");
                 city.removeChild(bj);
            (11) innerHTML
                <body>
                         <div id="subject">jquery</div>
                  </body>
                  <script language="JavaScript">
          
                    //使用innerHTML读出id=subject中的文本内容
                    /* var div = document.getElementById("subject");
                    alert(div.innerHTML); */
            
                //将<h1>今天</h1>写到div的层中
                /* var div = document.getElementById("subject");
                div.innerHTML = "<h1>今天</h1>"; */
            
                  </script>

  • 相关阅读:
    区别@ControllerAdvice 和@RestControllerAdvice
    Cannot determine embedded database driver class for database type NONE
    使用HttpClient 发送 GET、POST、PUT、Delete请求及文件上传
    Markdown语法笔记
    Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required
    Mysql 查看连接数,状态 最大并发数(赞)
    OncePerRequestFilter的作用
    java连接MySql数据库 zeroDateTimeBehavior
    Intellij IDEA 安装lombok及使用详解
    ps -ef |grep xxx 输出的具体含义
  • 原文地址:https://www.cnblogs.com/jx17/p/6286884.html
Copyright © 2011-2022 走看看