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>

  • 相关阅读:
    文件管理系统(JQuery插件+Ajax)
    十大Ajax框架
    WSS3.0开发你还在为写CAML痛苦吗?
    vue获取微博授权的URL
    微博三方登录原理
    阿里云短信服务
    JWT原理和COOKIE原理
    django数据库的ORM操作
    celery原理与组件
    生成微博授权URL
  • 原文地址:https://www.cnblogs.com/jx17/p/6286884.html
Copyright © 2011-2022 走看看