JavaScript基础学习(三)

一、js的全局函数


        *由于不属于任何一个对象,直接写名称使用
        *** eval()  : 执行js代码(如果字符串是一个js代码,使用方法直接执行)
        var str = "alert("1234")";
        eval(str);

        ***encodeURI(): 对字符进行编码
        var str = "测试中文aaa1234";
        var string = encodeURI(str);
        
         decodeURI(): 对字符进行解码
         var string1 = decodeURI(string);
         document.write(string1);// 测试中文aaa1234

         isNaN()  判断当前的字符串是否是数字
         返回true false  注意:是数字时返回false   ,  不是返回true

         **parseInt()   :类型转换
         var str = "123";
         document.write(str+1); //1231
         document.write(parseInt(str)+1); //124

二、js函数的重载

        **什么是重载?
        方法名相同,参数不同
        **js的重载是否存在?  不存在
                ---调用最后一个方法
                --把传递的参数保存在arguments数组里
                (面试题目)js里面不存在重载,但是可以通过其他方式模拟重载效果
                通过arguments数组实现
                function add1(){

                    var sum = 0;
                    for (var i = 0; i<arguments.length;i++){                        
                        sum+=arguments[i];
                        }
                    return sum;
                }


                alert(add1(1,2));  //3
                alert(add1(1,2,3));  //6

三、js的bom对象
        
        **bom: browswer object model: 浏览器对象模型
        有哪些对象?
        *  navigator:获取客户机的信息(浏览器的信息)
                -navigator.appName
                -document.write(navigator.appName);//Microsoft Internet Explorer
        
        *  screen: 获取屏幕的信息
            -screen.width
            -screen.height

        *location:
                获取当前请求url地址
                -location.href

                设置url地址
                -页面上安装一个按钮,按钮上绑定一个事件,
                当点击这个按钮,会跳转到另一个页面
                <input type="button" value="tiaozhuan" onclick="href1();"/>
                function href1(){
                //alert("aaaa");
                location.href = "99乘法表.html";
                }

        *history: 请求url的历史记录
        -创建三个页面:
                1.创建第一个页面 a.html,写一个超链接到b.html
                2.创建b.html 超链接 到c.html
                3.创建c.html
                在b.html安装两个按钮,分别写一个方法
                //到上一个页面
                function back1(){
                    history.back();
                    //history.go(-1);
                }
                //到下一个页面
                function next1(){
                    history.forward();
                    //history.go(1);
                }
            
        ****window(重点):
                -窗口对象
                -顶层对象(所用的bom对象都在window里面操作)

                -方法(window都可以简写)
                    -window.alert():页面弹出一个框,显示内容

                    -confirm();确认框
                    var flag=confirm("显示内容");
                    document.write("<hr/>");
                    document.write(flag);

                -prompt();  输入的对话框
                    -window.prompt("提示内容","默认值");
                
                -open():  打开一个新的窗口
                        **open("打开的新窗口的地址","","窗口特征,比如宽度和高度");
                        **创建一个按钮,点击这个按钮,打开一个新的窗口
                    
                -close():  关闭窗口(浏览器兼容性比较差)

                -做定时器
                **  setInterval("js代码",毫秒数);
                        -每3秒执行一次alert方法
                        返回一个id
                        var id1 = window.setInterval("alert('123');",3000);
                **  setTimeout("js代码",毫秒数);
                        -表示在毫秒数之后执行,但只会执行一次
                        -4秒之后执行,只执行一次
                        var id2 = window.setTimeout("alert('abc');",4000);

                ** clearInterval(): 清除setInterval设置的定时器
                ** clearTimeout(): 清除setTimeout设置的定时器
                **设置两个按钮,分别写一个方法
                    function clear1(){
                        clearInterval(id1);
                    }

                    function clear2(){
                        clearTimeout(id2);
                    }
四、js的dom对象
    * dom: document  object  model:文档对象模型
    **  文档:
            超文本文档(超文本标记文档)html、xml
    **  对象:
            提供了属性和方法
    **  模型:
            使用属性和方法操作超文本标记型文档
    
    *****可以使用js里面的dom里面提供的对象,使用这些对象的属性和方法,
    对标记型文档进行操作

    ****想要对标记型文档进行操作,
    首先需要对标记型文档里面所有内容封装成对象
        --需要把html里面的标签、属性、文本内容都封装成对象

    ***   要想对标记型文档进行操作,解析标记型文档

            -画图分析,如何使用dom解析html



    *** 解析过程
        根据html的层级结构,在内存中分配一个树形结构,需要把html每部分封装成对象
        -document对象 :整个文档
        -element 对象:标签对象
        -属性对象
        -文本对象

        ---Node节点对象:这个对象是这些对象的父对象
            **如果在对象里面找不到想要的方法,这个时候到Node对象里面去找

    *DOM模型有三种
    *DHTML:很多技术的简称
            **html:封装数据
            **css:使用属性和属性值设置样式
            **dom:操作html文档(标记型文档)
            **javascript:专门指的是js的语法语句(ECMAScript)


五、document对象

    *表示整个对象

    **常用方法
            **write()方法:
                -(1)向页面输出变量(值)
                -(2)向页面输出html代码
                var str = "abc";
                document.write(str);
                document.write("<hr/>");

            **getElementById();
                -通过id得到元素(标签)
                <input type="text" id="txt1" value="123"/>
                var input1 = document.getElementById("txt1");//传递的参数是输入项里面的id的值
                //得到input里面的value值
                alert(input1.value);    // 标签对象.属性名称
                //向input里面设置一个值value
                input1.value = "bbbb";

            **getElementsByName();
                -通过标签的name的属性值得到标签
                <input type= "text" name="name1" value="aaa"/><br/>
                <input type= "text" name="name1" value="bbb"/><br/>
                <input type= "text" name="name1" value="ccc"/><br/>
                <input type= "text" name="name1" value="ddd"/><br/>
                //取得的是name属性为name1的所有元素,当只有一个元素name属性
                //为name1时 ,也是返回数组,长度为1,可直接通过数组下标[0]得到input0[0]
                var input0 = document.getElementsByName("name1");//传递的参数是标签里面name的值
                document.write(input0.length);//4
                //遍历数组
                for(var i=0;i<input0.length;i++){
                        var input1 = input0[i];  
                        document.write(input1.value);
                }


            **getElementsByTagName("标签名称");
                --通过标签名称得到元素
                <input type= "text" name="name1" value="aaa"/><br/>
                <input type= "text" name="name1" value="bbb"/><br/>
                <input type= "text" name="name1" value="ccc"/><br/>
                <input type= "text" name="name1" value="ddd"/><br/>

                var input2 = document.getElementsByTagName("input");
                document.write(input2.length);//4
                //参考上面getElementsByName();





猜你喜欢

转载自blog.csdn.net/qq_38992372/article/details/80938226