美文网首页
js基础小结(2)

js基础小结(2)

作者: dev晴天 | 来源:发表于2018-10-28 17:18 被阅读0次

    js 操作css 的属性

    语法:
    document.getElementById("id").style.属性="值"

    属性:就是css中属性 css属性有"-" 例如:backgroud-color
    若有"-" 只需要将"-"删除,后面第一个字母变大写即可。

    //给标签添加css样式 通过js操作
    // 只需要获得标签 然后再通过元素的style属性进行设置就行

    • 注意:
      只要是window对象的属性和方法,可以把window省略
      window.onload 等价于 onload
      window.setInterval() 等价于 setInterval()
      window 对象有onload的方法可以直接使用

    code example:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <input type="button" value="给css添加样式" onclick="doClick()" />
            <div id="div_id"></div>
        </body>
        <script>
            // window的onload的使用
           window.onload = function(){
            alert("onload 的简单使用");
           }
            function doClick(){
                //给标签添加css样式  通过js操作
                // 只需要获得标签 然后再通过元素的style属性进行设置就行
            var obj =   document.getElementById("div_id").style;
            obj.backgroundColor = "#fff000";
            obj.width = "100px";
            obj.height = "100px";
            obj.border = "1px";
            }
        </script>
    </html>
    
    

    window对象模型

    js的组成:
    • ECMAScript(语法)
    • BOM(浏览器对象模型)
    • DOM(文档对象模型)

    bom:
    1 window:浏览器打开的窗口
    2 location:定位信息 (地 址栏)
    3 history:历史
    4 Navigator(浏览器的版本等相关信息 几乎很少用)
    5 Screen(获得屏幕等相关信息 几乎很少用

    dom:
    1 document(使用最多)
    2 element
    3 attributate
    4 event

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <!--
                作者:1246771571@qq.com
                时间:2018-10-28
                描述: js结构总结
                
            js的组成:
            ECMAScript(语法)
            BOM(浏览器对象模型)
            DOM(文档对象模型)
            
            一  bom的总结:所有的浏览器都有5个对象
            1 window:浏览器打开的窗口
            2 location:定位信息 (地 址栏)
            3 history:历史
            4 Navigator(浏览器的版本等相关信息 几乎很少用)
            5 Screen(获得屏幕等相关信息 几乎很少用)
            
            注意:通过window可以获取其他的四个对象(因为一个window窗口包含了地址栏历史信息等等)
            
            1 window对象的相关方法
                                     消息框
                alert("...."):警告框
                confirm("你确定要删除吗?"):确定框 返回值:boolean
                prompt("请输入您的姓名"):输入框 返回值:你输入的内容
                                     
                                     定时器
                设置定时器
                    setInterval(code,毫秒数):周期执行
                    setTimeout(code,毫秒数):延迟多长事件后 只执行一次.
                    
                    例如:
                        setInterval(showAd,4000);
                        serInterval("showAd()",4000);
                
                清除定时器
                    clearInterval(id):
                    clearTimeout(id):
                       
                       打开和关闭
                open(url):打开  (参数页面的url)
                close():关闭
                
                二 dom   文件对象模型
                document
                element
                attributate
                event
                
            -->
        </body>
        <script>
            // 1 消息相关的方法
            // window 对象相关方法的练习
            window.alert("警告对话框");// 原始写法 window可以省略
            window.confirm("确认对话框");//有返回值 返回值为布尔类型 
            //根据你点击的对话框的确认或者取消 返回不同的布尔值
            window.prompt("请输入:");// 输入框 返回值为 你输入的值
            // 注意含有返回值时 可以动过var 然后打印测试
            
            // 2 定时的略 上个文件已经写过
            
            // 3 关闭打开窗口
            //window.open("js操作css样式.html");
            // window.close(); 关闭窗口
            
            
        </script>
    </html>
    
    

    loaction 与history的用法

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <input type="button" value="设置页面的url" id="setting_url"/>
            <!--
                作者:1246771571@qq.com
                时间:2018-10-28
                描述:
                history 历史信息
                history:历史
        back();后退
        forward():向前
        ★go(int)
            go(-1) 相当于 back()
            go(1) 相当于 forward()使用就行了
            
            一般记住go()的
            -->
        </body>
        <script>
            /*
             location:定位信息  
                   常用属性:
            href:获取或者设置当前页面的url(定位信息)
            
            location.href; 获取url
            location.href="...";设置url        相当于 a标签
             * */
        
            alert("当前的页面信息"+location.href);
            
            // 设置页面的url
            document.getElementById("setting_url").onclick = function(){
                location.href = "http://www.baidu.com";
            }
        </script>
    </html>
    
    

    事件焦点

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <!--
                作者:1246771571@qq.com
                时间:2018-10-28
                描述:元素的事件
                onfocus 获得焦点
                onblur失去焦点
                
                
                事件总结:
        常见的事件:
            焦点事件:★
                onfocus
                onblur
            表单事件:★
                onsubmit
                onchange 改变 (下拉选中)
            页面加载事件:★
                onload
            
            鼠标事件(掌握)
                onclick
            鼠标事件(了解)
                ondblclick:双击
                onmousedown:按下
                onmouserup:弹起
                onmousemove:移动
                onmouserover:悬停
                onmouserout:移出
            键盘事件(理解)
                onkeydown:按下
                onkeyup:弹起
                onkeypress:按住
    ////////////
    绑定事件:
        方式1:
            元素的事件属性
        方式2:
            派发事件
            
        了解
        阻止默认事件的发生
        阻止事件传播
            -->
                  请输入:<input type="text" onfocus="dofocus()" onblur="doblur()"/>
        </body>
        <script>
            function dofocus(){
                alert("获得焦点");
            }
            function doblur(){
                alert("失去焦点");
            }
        </script>
    </html>
    
    

    dom 获取元素

    1 根据id 获得元素 
       document.getElementById()
    2 根据 标签获得元素
       document. getElementByTagName() 返回数组
    3 获得一类标签(返回数组)
       document.getElementsByClassName():需要给标签添加class属性 
       document.getElementsByName():需要给标签添加name属性
    

    dom 分析

    dom(文档对象模型)
        当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
        节点(Node)
            文档节点 document
            元素节点 element
            属性节点 attribute
            文本节点 text
    获取节点:
    通过document可以获取其他节点:
    常用方法:
    document.getElementById("id值"):获取一个特定的元素document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
    document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
    document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)
    
            设置获取获取节点的value属性
                dom对象.value;获取
                dom对象.value="";设置
            设置或者获取节点的标签体
                dom对象.innerHTML;获取
                dom对象.innerHTML="";设置
            获取或者设置style属性
                dom对象.style.属性;获取
                dom对象.style.属性="";设置
            获取或者设置属性
                dom对象.属性
    

    js补充

    数组:
        语法:
            new Array();//长度为0
            new Array(size);//指定长度的
            new Array(e1,e2..);//指定元素
            非官方
                var arr4=["aa","bb"];
        常用属性:
            length
        注意:
            数组是可变的
            数组可以存放任意值
        常用方法:(了解)
            存放值:对内容的操作
                pop():弹 最后一个
                push():插入 到最后
                
                shift():删除第一个
                unshift():插入到首位
            打印数组:
                join(分隔符):将数组里的元素按照指定的分隔符打印
            拼接数组:
                concat():连接两个或更多的数组,并返回结果。
            对结构的操作:
                sort();排序
                reverse();反转
    引用类型总结:
        原始类型中的String Number Boolean都是伪对象,可以调用相应的方法
        Array:数组
        String:
            语法:
                new String(值|变量);//返回一个对象
                String(值|变量);//返回原始类型
            常用方法:
                substring(start,end):[start,end)
                substr(start,size):从索引为指定的值开始向后截取几个
                
                charAt(index):返回在指定位置的字符。
                indexOf(""):返回字符串所在索引
                
                replace():替换
                split():切割
                
            常用属性:length 
        Boolean:
            语法:
                new Boolean(值|变量);
                Boolean(值|变量);
                非0数字 非空字符串 非空对象 转成true
        Number
            语法:
                new Number(值|变量);
                Number(值|变量);
            注意:
            
                null====>0 
                fale====>0 true====>1
                字符串的数字=====>对应的数字
                其他的NaN
        Date:
            new Date();
            常用方法:
                toLocalString()
        RegExp:正则表达式
            语法:
                直接量语法  /正则表达式/参数
                直接量语法  /正则表达式/
                
                new RegExp("正则表达式")
                new RegExp("正则表达式","参数") 
                参数:
                    i:忽略大小写
                    g:全局
                常用方法:
                    test() :返回值为boolean
        Math:
            Math.常量|方法
            Math.PI
            Math.random()  [0,1)
            
        全局:
            ★
            decodeURI() 解码某个编码的 URI。 
            encodeURI() 把字符串编码为 URI。
    
            Number():强制转换成数字
            String():转成字符串
            
            parseInt():尝试转换成整数
            parseFloat():尝试转换成小数
            
            eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行。 
    

    相关文章

      网友评论

          本文标题:js基础小结(2)

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