JAVASCRIPT的基本知识

左手的ㄟ右手 2022-08-07 13:46 210阅读 0赞

0.javascript语言的特征  
    1.客户端的脚本语言  
    2.描述解释型语言  
    3.基于对象  
    4.基于事件驱动的  
    5.安全  
    6.弱类型  
1.JavaScript的数据类型  
    1.未定义的数据类型    undefined  
    2.数字类型        number  
    3.字符串类型        string  
    4.布尔类型        boolean  
    5.对象数据类型        object  
2.常用的警告是提示  
    1.alert("提示信息");                              //显示一个带有提示信息,和确认按妞的对话框  
    2.var num = prompt("提示信息","输入框的默认信息");    //显示一个带有提示信息.可以供用户输入的对话框.返货用户输入的数值  
    3.var bool = confirm("提示信息");            //显示一个带提示信息,和确认,取消按钮的对话框    .点击确认返回True...点击取消.返货flase  
3.JavaScript商用的语法----函数  
    1.常用的系统函数  
            1.转换成整数类型      
                1.var a=parseInt("23.123");    a=23;  
                2.var a=parseInt("23");        a=23;  
                3.var a=parseInt("abc23");    a=NAN;  
                4.var a=parseInt("23abc");    a=23;  
                5.var a=parseInt("23.12.12");    a=23;  
            2.转换成浮点型  
                1.var a=parseFloat("23.123");    a=23.123;  
                2.var a=parseFloat("23");    a=23;  
                3.var a=parseFloat("abc23");    a=NAN;  
                4.var a=parseFloat("23abc");    a=23;  
                5.var a=parseFloat("23.12.12");    a=23.12;  
            3.对数字的判断  
                1.var a=isNaN("23.123");    a=false;  
                2.var a=isNaN("23abc");        a=true;  
                3.var a=isNaN(23.123);        a=false;  
                4.var a=isNaN("abc123");    a=true;  
    2.自定义函数  
            1.无参的函数  
                function show()\{  
                    //javascript语句  
                \}  
            2.有参的函数  
                function show(a,b,c)\{  
                    //javascript语句  
                \}  
            3.带返回值的函数  
                function show()\{  
                    var a;  
                    //javascript语句  
                    return a;  
                \}  
            4.匿名函数  
                //建立匿名函数  
                var a=function ()\{  
                    //javascript语句  
                \};  
                //调用匿名函数  
    3.定时函数  
            1.指定多长时间后运行某一事件    var a=setTimeout("show()",1000);  
            2.循环运行某一事件        var a=setInterval("show()",1000);  
            3.清除定时器            clearTimeout(a);  
                οnclick="a()";  
    4.window常用的属性和方法  
                1.window对象的相关的属性  
                    1.screen    有关客户端的屏幕和显示性能的信息  
                    2.history    有关客户访问过的URL的信息  
                    3.location    有关当前URL的信息  
                2.window相关的方法  
                    1.prompte("提示信息","默认值");        //显示一个带有提示信息.可以供用户输入的对话框.返货用户输入的数值  
                    2.alert("t提示信息");            //显示一个带有提示信息,和确认按妞的对话框  
                    3.confirm("提示信息")    ;        //显示一个带提示信息,和确认,取消按钮的对话框    .点击确认返回True...点击取消.返货flase  
                    4.window.close();                //关闭浏览器窗口  
                    5.window.open("给定的文档的路径","窗口名称","窗口特征");        //打开给定URL文档信息的窗口  
                        1.height,width            窗口文档显示的高度和宽度  
                        2.left,top            窗口文档显示相对于桌面左上角的x,y坐标  
                        3.toolbar=yes/no/1/0        窗口是否显示工具栏  
                        4.menubar=yes/no/1/0        窗口是否显示菜单栏  
                        5.location=yes/no/1/0        窗口是否显示地址栏  
                        6.status=yes/no/1/0        窗口是否显示状态栏  
                        7.titlebar=yes/no/1/0        窗口是否显示标题栏  
                        8.scrollbars=yes/no/1/0        窗口是否显示滚动条  
                        9.resizable=yes/no/1/0        窗口是否可以调节尺寸  
                    6.setTimeout("调用的函数和表达式",等待的毫秒数);        //在指定的时候调用函数和计算表达式  
                    7.setInterval("调用的函数和表达式".间隔的毫秒数);    //按照指定的周期执行函数和表达式  
                3.window对象的事件  
                    1.onclick    //点击事件  
                    2.onload    //加载事件  
                    3.onmouseover    //鼠标悬浮响应事件  
                    4.onkeydown    //键盘响应事件  
                    5.onchange    //域的内容被改变事件  
    5.Date对象的常用方法        var a=new Date();  
            1.a.getFullYear();            //返回指定时间所属的年份  
            2.a.getMonth();                //返回指定时间所属的月份0-11  
            3.a.getDate();                //返回指定时间所属的日期1-31  
            4.a.getHours();                //返回指定时间的小时0-23  
            5.a.getMinutes();                //返回指定时间的分0-59  
            6.a.getSeconds();                //返回指定时间的秒0-59  
            7.a.getDay();                //返回当前的星期数0-6  
            8.a.getTime();                //返回当前时间的毫秒数  
    6.location和history对象  
        1.location对象  
            1.location.href            设置和返回完整的路径  
            2.location.reload();        当前页面的刷新  
            3.location.replace();        用新的文档替换当前的文档  
        2.history对象  
            1.history.back();        加载history列表前一个URL  
            2.history.forward();        加载history对象列表中的下一个URL  
            3.history.go();            加载history列表里的某个指明的URL  
        3.document对象              
            1.referrer        返回载入当前文档的文档的URL  
            2.URL            返回当前文档的路径  
            3.getElementById();    返回指向对象Id的引用  
            4.getElementsByName();    返回带有指定名称对象的集合  
            5.getElementsByTagName();返回带有指定标签名称对象的集合  
            6.write();        向文档写入的功能          
    7.元素的显示和隐藏  
        1.visibility            style.visibility="";  
            1.隐藏            hidden  
            2.显示            visible  
        2.display            style.display="";  
            1.隐藏        none  
            2.显示        block  
            3.在同一行    inline  
    8.DOM高级编程  
        1.core DOM  
            1.查看节点      
                1.document.getElementById("");  
                2.document.getElementsByName("");  
                3.document.getElementsByTagName("");  
            2.获取和设置属性的值  
                1.document.getAttribute("属性名");                    //获取某个属性名的值  
                2.document.setAttribute("属性名","值");                    //设置某个属性名的值  
            3.创建和增加节点  
                1.document.createElement("标签名");                    //按照指定的标签名创建一个新的元素  
                2.document.body.appendChild(节点对象):                    //在已存的列表的末尾添加一个新的子节点  
                3.document.body.insertBefore(新节点,老节点)                    //在某个节点前插入一个新的节点  
                4.cloneNode(boolean);                        //复制某个节点对象  
            4.替换和删除节点  
                1.document.body.remove(节点对象);                        //删除指定的节点  
                2.document.body.replaceChild(新节点,旧节点);                    //替换节点  
        2.HTML DOM对象  
            1.获得节点的属性  
                1.document.getElementById("").属性名;  
            2.表格对象  
                1.table对象  
                    1.rows\[\]            //表格中行的数组  
                    2.insertRow(index);        //在表格中插入一个新行  
                    3.deleteRow(index);        //从表格中删除一行  
                2.tableRow对象  
                    1.cells\[\]            //行中单元格的数组  
                    2.rowIndex;            //该行在表格中的位置  
                    3.insertCell(index);        //在一行的指定位置插入一个新的单元格  
                    4.deleteCell(index);        //删除行中的某个单元格  
                3.tableCell对象  
                    1.cellIndex;            //该单元格在行中的位置  
                    2.innerHTML;            //该单元格的文本  
                    3.align;            //该单元格内数据的水平居中方式  
                    4.className            //该单元格的类名  
    9.javascript和css的交互  
            1.常用的style属性  
                1.背景 background      
                    1.设置元素的背景颜色         backgroundColor  
                    2.设置背景元素的图像        backgroundImage  
                    3.设置背景的平铺方式        backgroundRepeat  
                2.字体 text  
                    1.设置字体的大小        fontSize  
                    2.设置字体的颜色        color  
                    3.设置文本的粗细        fontWeight  
                    4.设置排列文本的顺序        textAlign  
                    5.设置文本的修饰        textDecoration  
                    6.设置同一行字体的显示        font  
                3.边距    padding  
                    1.设置元素的填充        padding  
                    2.设置元素的上边距        paddingTop  
                    3.设置元素的下边据        paddingBottom  
                    4.设置元素的左边距        paddingLeft  
                    5.设置元素的右边距        paddingRight  
                4.边框    border  
                    1.设置四个边框的属性        border  
                    2.设置上边框属性        borderTop  
                    3.设置下边框的属性        borderBottom  
                    4.设置左边框的属性        borderLeft  
                    5.设置右边框的属性        borderRight  
            2.获取当前元素的坐标定位  
                  var left;        //滚动对象的x坐标  
                  var top;        //滚动对象的y坐标  
                function initial()\{  
                    var a=document.getElementById("id");            //需要滚动的对象      
                    if(a.currentStyle)\{                               //当当前浏览器为IE时候的初始化对象信息  
                        left=parseInt(a.currentStyle.left);  
                        top=parseInt(a.currentStyle.top);  
                    \}else\{                                            //当当前浏览器为火狐浏览器时候的初始化对象信息  
                        left=parseInt(document.defaultView.getComputerStyle(a,null).left);  
                        top=parseInt(document.defaultView.getComputerStyle(a,null).top);  
                    \}  
                \}  
                //当鼠标移动时候对象坐标信息的改变  
                function move()\{  
                    var a=document.getElementById("id");            //需要滚动的对象  
                    a.style.left=left+parseInt(document.documentElement.scrollLeft)+"px";  
                    a.style.top=top+parseInt(document.documentElement.scrollTop)+"px";  
                \}  
    10.正则表达式  
            1.定义正则表达式  
                1.var reg=/表达式/附加参数       附加参数:g:代表全局    i:代表忽略大小写    m:代表可以进行多行匹配  
                2.var reg=new RegExp(reg,g/i/m)  
            2.正则表达式常用的符号  
                1.正则表达式的开始和结束        /.../  
                2.匹配字符串的开始            ^  
                3.匹配字符串的结束            $  
                4.任何空白字符                \\s  
                5.任何非空白字符            \\S  
                6.匹配一个数字 下划线和字母字符        \\w     等价于\[a-zA-Z0-9\_\]  
                7.匹配一个数字 下划线和字母字符        \\W    等价于\[^a-zA-Z0-9\_\]  
                8.匹配一个数字字符            \\d    等价于\[0-9\]  
                9.匹配一个非数字字符            \\D    等价于\[^0-9\]  
                10.除了换行符之外的所有字符        .  
            3.常用的正则表达式  
                1.匹配中文字符的表达式        \[\\u4e00-\\u9fa5\]  
                2.匹配双字节字符        \[^\\x00-\\xff\]  
                3.匹配空白行的正则表达式    \\n\\s\*\\r  
                4.匹配HTML的正则表达式        <(\\S\*?)\[^>\]\*>.\*?</\\1>|<.\*?/>  
                5.匹配首位空白字符的正则表达式    ^\\s\*|\\s\*$  
                6.匹配Email的正则表达式        \\w+(\[-+.\]\\w+)\*@\\w+(\[-.\]\\w+)\*\\.\\w+(\[-.\]\\w+)\*  
                7.匹配网址URL的正则表达式    \[a-zA-Z\]+://\[^\\s\]\*  
                8.匹配账户是否合法的(字母开头.云溪5-16个字符.允许数字字母下划线)的正则表达式    ^\[a-zA-Z\]\[A-Za-z0-9\_\]\{4,15\}$  
                9.匹配国内的电话号码的正则表达式    \\d\{3\}-\\d\{8\}|\\d\{4\}-\\d\{7\}  
                10.匹配腾讯QQ的正则表达式        \[1-9\]\[0-9\]\{4.\}  
                11.匹配中国邮政编码的正则表达式        \[1-9\]\\d\{5\}(?!\\d)  
                12.匹配身份证号码的正则表达式        \\d\{15\}|\\d\{18\}  
                13.匹配IP地址的正则表达式        \\d+\\.\\d+\\.\\d+\\.\\d+  
                14.匹配年龄的正则表达式            /^\[1-9\]$|^\[1-9\]\\d$|^1\[0-1\]\\d$|^120$/    或者    /^120$|^((1\[0-1\])|\[1-9\])?\\d$/  
                15.出生年月日的正则表达式        /^((19\\d\{2\})|(200\\d))-(0?\[1-9\]|1\[0-2\])-(0?\[1-9\]|\[1-2\]\\d|3\[0-1\])$/  
                16.特定数字的匹配  
                    1.匹配正整数            ^\[1-9\]\\d\*$  
                    2.匹配负整数            ^-\[1-9\]\\d\*$  
                    3.匹配整数            ^-?\[1-9\]\\d\*$  
                    4.匹配非负整数(正整数+0)    ^\[1-9\]\\d\*|0$  
                    5.匹配非正整数(负整数+0)    ^-\[1-9\]\\d\*|0$  
                    6.匹配正浮点数            ^\[1-9\]\\d\*\\.\\d\*|0\\.\\d\*\[1-9\]\\d\*$          
                    7.匹配负浮点数            ^-(\[1-9\]\\d\*\\.\\d\*|0\\.\\d\*\[1-9\]\\d\*)$  
                    8.匹配浮点数            ^  
                    9.匹配非负浮点数(正浮点数+0)  
                    10.匹配非正浮点数(负浮点数+0)  
    11.正则表达式的应用  
            1.获得HTML标签中的文本  
                var reg=/^<(\[a-zA-Z\]+)>(\\w\*)<\\/\\1>$/;  
                alert("<name>tom</name>".replace(reg,"$2"));  
            2.获得两端空格中的文本  
                var str="     abc     ";  
                var reg=/^\\s\*|\\s\*$/g;  
                alert(str.replace(reg,""));  
            或者    alert(str.trim());  
            或者    var a=new String("     abc def ghi     ");  
                String.prototype.trim=function()\{  
                    var reg=/^\\s\*|\\s\*$/g;  
                    return this.replace(reg,"");  
                \}  
                alert(a.trim().length);  
    12.innerHTML,innerText,outerHTML和outerText的区别  
        innerHTML 设置或获取位于对象起始和结束标签内的 HTML  
        outerHTML 设置或获取对象及其内容的 HTML 形式  
        innerText 设置或获取位于对象起始和结束标签内的文本  
        outerText 设置(包括标签)或获取(不包括标签)对象的文本                  
        innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，而        outerText设置包括标签在内的文本。  
    13.取计算出来的金额.保留小数点后面两位  
        var money=parseFloat(price).toFixed(2);  
    14.Map的使用                  
        <img src="images/main\_12.gif" width="367" height="23" border="0" usemap="\#Map" />  
        <map name="Map">  
            <area shape="rect" coords="3,3,47,19" href="ListMessageServlet">  
            <area shape="rect" coords="53,3,97,19" href="javascript:history.back()">  
            <area shape="rect" coords="100,3,145,19" href="javascript:history.go(1)">  
            <area shape="rect" coords="149,3,196,19" href="javascript:location.reload()">  
            <area shape="rect" coords="210,3,307,19" href="">  
            <area shape="rect" coords="309,3,365,19" href="index.jsp">  
        </map>  
    15.将enter键该为tab键效果的方法  
        if (event.keyCode==13 && event.srcElement.type!='image')\{  
                event.keyCode = 9;  
        \}